Svelte DevTools Standalone

Svelte DevTools is actively maintained. If you have any problems or feature requests feel free to create an issue.

Svelte Devtools Standalone is the browser agnostic version of the Svelte DevTools browser extension. It allows you to inspect the Svelte state and component hierarchies in a popup window.

Requires svelte version 3.12.0 or above

Usage

Svelte DevTools Standalone must be injected into your project to work properly. There are a few different methods to accomplish this.

Include script tag

The simplest method is to include a link to the CDN distribution. Add the following script tag to the top of your head.

<script src="https://cdn.jsdelivr.net/gh/redhatter/svelte-devtools-standalone@master/dist/standalone.js"></script>

The tag must be before your application bundle to work properly.

Import package

Another option is to import the package and bundle it with your application.

Install the package

npm install git+https://github.com/RedHatter/svelte-devtools-standalone.git

Include the import at the top of your bundle

  import 'svelte-devtools-standalone'
  import App from './App.svelte'

  new App({ target: document.body })

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({
      compilerOptions: {
        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

Clone this repository and run the package script.

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

RedHatter / svelte-devtools-standalone