solid-devtools

solid-devtools

The main package of Solid Devtools. It contains the following subpackages:

• Debugger (automatically enabled)
• Extension Adapter (automatically enabled)
• Locator — How to use it
• Babel Plugin — How to use it

Getting started

Installation

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

Import the script

All you need to do is import the devtools script in your app entry file, and the debugger will automatically find roots in your app and track them.

import "solid-devtools"
// and that's it!

Importing "solid-devtools" package is attaching the debugger to your application and runs extension-adapter. In other words, it is creating a platform for other devtools to use. It doesn't provide any functionality by itself.

Using the locator package

The solid-devtools package comes with the Locator package included. It's not neccessary to use it! But you can.

Follow this guide of the locator package

Enabling the Babel plugin

solid-devtools reexports the babel plugin as a vite plugin.

Note In some cases import from solid-devtools/vite causes errors in loading vite config. I haven't figured out the cause yet. But to avoid the error, you can import from @solid-devtools/transform instead.

To enable it you need to add it to plugins array in your .vite.config.js file:

// vite.config.ts

import { defineConfig } from "vite"
import solidPlugin from "vite-plugin-solid"
import devtoolsPlugin from "solid-devtools/vite"
// or: import devtoolsPlugin from "@solid-devtools/transform"

export default defineConfig({
  plugins: [devtoolsPlugin(), solidPlugin()],
})

See transform options

Changelog

See CHANGELOG.md.