extension

Chrome Extension

🚧 In early development. 🚧

Chrome devtools extension for debugging Solid applications. It allows for visualizing and interacting with Solid's reactivity graph, as well as inspecting component state and hierarchy.

Should work in any application using SolidJS, including SolidStart and Astro.

Getting started

1. Install the chrome extension

The extension is now available on the Chrome Web Store. You can install it when using a chromium-based browser by clicking the "Install" button.

Solid Devtools Chrome Extension

2. Install the debugger library

If you think about the Chrome Extension as a Frontend, then the "solid-devtools" npm package is its Backend. It debugs the Solid's reactivity and communicates the updates to the Chrome Extension.

Install the following package:

npm i -D solid-devtools
# or
yarn add -D solid-devtools
# or
pnpm add -D solid-devtools

Note The extension will usually require the latest version of the debugger library. As the devtools are in active development, the debugger library and the extension change frequently, often breaking backward compatibility with older versions. This is why need to watch out for version mismatches (will be printed to the console).

3. Add devtools vite plugin

The task of the vite plugin is to enchance the debugging experience by applying additional transforms to your code. That is the recommended way to use the devtools, but it is not required. You can still use the devtools without the plugin, with only the runtime part, but some features will be missing.

Note As vite is the default bundler used by solid application and starter, the devtools are currently concerned with supporting only it.

To get the debugger working include the vite plugin from "solid-devtools/vite" in your vite config. Enabling some of the options, such as "autoname", will improve the debugging experience or enable additional features.

// vite.config.ts

import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid' // or solid-start/vite
import devtools from 'solid-devtools/vite'

export default defineConfig({
  plugins: [
    devtools({
      /* features options - all disabled by default */
      autoname: true, // e.g. enable autoname
    }),
    solid(),
  ],
})

>> More about available transform options

4. Import the devtools runtime

The plugin doesn't automatically import the devtools runtime. You need to import it manually in your application's client-side entry point.

The runtime is important for exposing the devtools API to the extension.

// src/index.tsx or src/client-entry.tsx

import 'solid-devtools'
// or from 'solid-devtools/setup' if you're not using the vite plugin

5. Run the app and play with the devtools!

A new "Solid" panel should appear after you open the Chrome devtools panel.

The extension is in its early development stages. We are constantly working on it to make it better, add new features and improve the user experience. We appreciate your feedback and suggestions.

If you run to any issues, or have any suggestions, please open an issue.

If you are interested in the extension's development, see the contribution guide.

DEMO

This Stackblitz demo is setup to work with the extension.

See this Stackblitz demo.

Changelog

See CHANGELOG.md.