https://github.com/sveltejs/svelte-devtools

A browser extension to inspect Svelte application by extending your browser devtools capabilities
https://github.com/sveltejs/svelte-devtools

Last synced: about 2 months ago
JSON representation

A browser extension to inspect Svelte application by extending your browser devtools capabilities

• Host: GitHub
• URL: https://github.com/sveltejs/svelte-devtools
• Owner: sveltejs
• License: mit
• Created: 2019-05-26T05:29:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-05T15:20:55.000Z (6 months ago)
• Last Synced: 2024-04-14T09:05:00.098Z (5 months ago)
• Language: Svelte
• Homepage: https://chromewebstore.google.com/detail/svelte-devtools/kfidecgcdjjfpeckbblhmfkhmlgecoff
• Size: 1.19 MB
• Stars: 1,314
• Watchers: 27
• Forks: 78
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - svelte-devtools - An extension that allows inspection of Svelte component hierarchy and state in the Firefox and Chrome developer tools. (HTML)

README

        
# Svelte DevTools



	

		

		

	



Svelte DevTools is a browser extension for the [Svelte](https://svelte.dev/) 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.

> For Firefox users, you can install the [`.xpi` file of the latest version from the GitHub releases page](https://github.com/sveltejs/svelte-devtools/releases/latest). Note that if you grab the `.zip` file, you will need to load it as a temporary extension and enable "Always Allow on localhost" in the extension settings.

![2.0.0 Screenshot](./.github/assets/screenshot-2.0.0.png '2.0.0 Screenshot')

## Requirements

The `svelte-devtools` extension requires the following to be true:

- Chrome or Firefox version 121 or higher

- Application running Svelte version `^4.0.0`

- Application compiled with `dev: true` ([SvelteKit](https://kit.svelte.dev/) does this automatically for you)

## Development

Clone this repository, setup and run the build script

```sh

git clone https://github.com/sveltejs/svelte-devtools.git

cd svelte-devtools

pnpm install

pnpm build

```

This will build the codebase and output all the required files in the `build` directory. To load the extension for development, follow these steps:

1. Navigate to the extensions settings page

2. Turn on the 'Developer mode' switch

3. Click 'Load Unpacked' and select the `build` directory

## Acknowledgements

-   This extension was initially created and developed by [RedHatter](https://github.com/RedHatter)