solid-devtools

solid-devtools

The main client library. It reexports the most important tools and connects the client application to the chrome extension.

It contains the following subpackages:

• Debugger
• Locator — How to use it
• Vite 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!

Using the chrome extension

Importing the solid-devtools package will connect your Solid application to the chrome extension.

Follow this guide to use the extension

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.

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 solid from 'vite-plugin-solid'
import devtools from 'solid-devtools/vite'

export default defineConfig({
  plugins: [devtools(), solid()],
})

See transform options

Changelog

See CHANGELOG.md.