Skip to content
An extension that allows inspection of Svelte component hierarchy and state in the Firefox and Chrome developer tools.
HTML JavaScript
Branch: master
Clone or download
Latest commit 871f49e Dec 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Nov 25, 2019
dest
scripts Cache mtimes in format script Jun 11, 2019
src Fix slots #22 Dec 2, 2019
test
.gitignore Factor out svelte listener Jun 15, 2019
LICENSE Create LICENSE Sep 24, 2019
README.md Typo Nov 25, 2019
package.json Version 1.2.1 Dec 2, 2019
rollup.config.js Cleanup Nov 29, 2019
screenshot.png New screenshot Oct 5, 2019
zen Basic component tree rendering May 23, 2019

README.md

Svelte DevTools

Mozilla Add-on Chrome Web Store

Install from the Firefox addon page or the Chrome addon page

Svelte Devtools is a Firefox and Chrome extension for the Svelte javascript framework. It allows you to inspect the Svelte state and component hierarchies in the Developer Tools.

After installing you will see a new tab in Developer Tools. This tab displays a tree of Svelte components, HTMLx blocks, and DOM elements that were rendered on the page. By selecting one of the nodes in the tree, you can inspect and edit its current state in the panel to the right.

Requires svelte version 3.12.0 or above

1.1.0 Screenshot

Enabling dev mode

In order for svelte-devtools to comunicate with your application bundle the svelte compiler must have the dev option set to true.

Template

By default the svelte template will set dev: true when running npm run dev and false otherwise.

Rollup

Below is a minimalist rollup config with dev: true set.

// rollup.config.js
import * as fs from 'fs';
import svelte from 'rollup-plugin-svelte';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/bundle.js',
    format: 'iife'
  },
  plugins: [
    svelte({
      dev: true
    })
  ]
}

Webpack

Below is the relevant snipet from a webpack.config.js with dev: true set.

  ...
  module: {
    rules: [
      ...
      {
        test: /\.(html|svelte)$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            dev: true,
          },
        },
      },
      ...
    ]
  },
  ...

Build from source

Building

Clone this repository and run the package script.

git clone https://github.com/RedHatter/svelte-devtools.git
cd svelte-devtools
npm install
npm run package

This should build the codebase and output a zip file under web-ext-artifacts.

Installing

Firefox

Unsigned addons can't be install in firefox permanently but addons can be installed temporarily.

  1. Navigate to about:debugging.
  2. Click "Load Temporary Add-on" and choose the generated zip file.

Chrome

  1. Navigate to chrome://extensions/.
  2. Turn on developer mode using the 'Developer mode' switch in the upper right hand corner of the page.
  3. Click 'Load Unpacked' and select the dest directory.
You can’t perform that action at this time.