Developer Tools

Library of developer tools & ~~Devtools Chrome extension~~ for stuff. To lazy to write anything meaningful now.

Why?

To change the way you write, debug and present your applications.

// TODO update images and link to chrome extension

The Chrome Extension

🚧 For now abandoned 🚧

Chrome Developer Tools extension for debugging 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 JS.

>> See the guide on setting started <<

All devtools packages

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:

Extension Client

devtools

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

See README for more information.

Devtools Overlay

devtools/overlay

An on-page devtools overlay for debugging applications without a chrome extension.

See guide on setting up

Logger

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 .... to the browser console.

Resources and prior art

A couple of resources on the topic on chrome devtools extensions:

• 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

Other devtools projects:

• CM-Tech/solid-debugger
• Svelte Devtools
• Vue Devtools
• MobX Devtools
• React Devtools
• Preact Devtools
• LocatorJS