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
In order for svelte-devtools to comunicate with your application bundle the svelte compiler must have the dev
option set to true
.
By default the svelte template will set dev: true
when running npm run dev
and false
otherwise.
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
}
})
]
}
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,
}
},
},
},
...
]
},
...
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.
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+
Clone the project
git clone git@github.com: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
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.
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.
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:
- Navigate to
chrome://extensions/
. - Turn on developer mode using the 'Developer mode' switch in the upper right hand corner of the page.
- Click 'Load Unpacked' and select the
./dist/
directory.
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:
- Navigate to
about:debugging
. - Click "Load Temporary Add-on" and choose the generated zip file.
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
.
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.
We use SemVer for versioning. For the versions available, see the tags on this repository.
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.
This project is licensed under the MIT License - see the LICENSE.txt file for details
A list of used libraries and code with their licenses can be seen in the ACKNOWLEDGMENTS.md file.