Solid Developer Tools

Library of developer tools, reactivity debugger & Devtools Chrome extension for visualizing SolidJS reactivity graph.

Why?

To change the way you write, debug and understand your SolidJS applications and reactivity within.

And also to experiment with ways of visualizing and interacting with Solid's reactivity graph.

The Chrome Extension

🚧 In very very early development. 🚧

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

See the guide on setting started

Main Devtools package

solid-devtools

The main library is re-exporting and connecting the rest of packages together to provide a common experience for users. It is a recommended and easy way to get started.

See README for more information.

Available Devtools

Most of the present packages are not much more then just ideas and experiments. Some in progress, and some very much in progress. But few of them can help you in your work already, and a man can dream, so this is what's out there waiting:

Locator

@solid-devtools/locator

A runtime library for locating components on the page, and going to their source code in your IDE.

Logger

@solid-devtools/logger

For debugging only the pinpoint places parts of the Solid's reactivity graph you are concerned with, right in the console you use all the time.

Provides a variaty of debugging utilities for logging the state and lifecycle of the nodes of reactivity graph to the browser console.

Debugger

@solid-devtools/debugger

A runtime library, used to get information and track changes of the Solid's reactivity graph. It's a cornerstone of the rest of the packages.

Transform

@solid-devtools/transform

A babel transform plugin for vite for transforming Solid code. For development — debugging purposes only.

It can do very useful things for you: Wrap stores to let the debugger observe them. Automatically name signals, memos and stroes. It's also required by the Locator package to allow for going to the source code of the components.

Extension Adapter

@solid-devtools/ext-adapter

A runtime library connecting the Debugger with Chrome Extension.

UI

@solid-devtools/ui

A collection of UI components for visualizing and interacting with Solid's reactivity graph. Used by the Chrome Extension.

Resources

From of the lack of proper README, here are a couple of resources and similar projects that inspire this one:

• about devtools
• Content-script <-> background-script communication
• Article about vue devtools
• Manifest.json anatomy
• setting up vite plugin
• example react project:
  • injecting real-world scripts (for accessing the real window object)
• Plugin architecture of Vue Devtools

Previous attempts/experiments that inspire this project:

• Compendium devtools (universal)
• Slugger (my original proof of concept)
• fictitious/solid-devtools
• CM-Tech/solid-debugger
• Go to Component Devtools

Similar projects from other frameworks:

• Svelte Devtools
• Vue Devtools
• MobX Devtools