D3strukt0r / svelte-devtools

An extension that allows inspection of Svelte component hierarchy and state in the Firefox and Chrome developer tools.

Svelte DevTools

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.

Install from the Firefox addon page or the Chrome addon page

Usage

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: {
            compilerOptions: {
              dev: true,
            }
          },
        },
      },
      ...
    ]
  },
  ...

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

What things you need to install the software and how to install them

• Git - Run brew install git (Only for macOS)
• Node.js 14.18.0+ (because of Vite.js) - Run brew install node (Only for macOS)
• pnpm - Run npm install -g pnpm
• Brave or any browser that supports Manifest V3 (Chrome 88+, Firefox 109+ (101+ as Dev Preview)) - Run brew install --cask brave-browser (Only for macOS)
• Svelte 3.12.0+

Installing

Clone the project

git clone [e-mail]:D3strukt0r/svelte-devtools.git
cd svelte-devtools

Install dependencies

pnpm install

Run the setup scripts to prepare the icons

pnpm setup
# or separately
pnpm setup:build-icons

Development

To watch for changes and rebuild the extension on change, run

pnpm dev

The generated files are located in the ./dist/ folder. To load the build folder into the browser, follow the instructions below.

Building

To create a production ready build, run

pnpm build

The generated files are located in the ./dist/ folder. To load the build folder into the browser, follow the instructions below.

Loading into Browsers

Chromium based browsers (e.g. Chrome, Brave, Edge)

pnpm package:chrome

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

Follow this guide https://developer.chrome.com/extensions/getstarted#unpacked and select the ./dist/ folder. Or following is the TLDR:

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 ./dist/ directory.

Firefox

pnpm package:firefox

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

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

You can follow this guide to install a WebExtension temporarily: https://developer.mozilla.org/Add-ons/WebExtensions/Temporary_Installation_in_Firefox. Or following is the TLDR:

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

Release

To create a zipped release package of the extension that can be uploaded to one of the stores, run

pnpm release

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

Built With

• Vite.js
• CRXJS Vite Plugin

Contributing

Please read CODE_OF_CONDUCT.md for details on our code of conduct, and CONTRIBUTING.md for the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

All the authors can be seen in the AUTHORS.md file.

Contributors can be seen in the CONTRIBUTORS.md file.

See also the full list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.txt file for details

Acknowledgments

A list of used libraries and code with their licenses can be seen in the ACKNOWLEDGMENTS.md file.