https://github.com/oslabs-beta/solid-dev-tool

A SolidJS signal tracking dependency & structural visualizer developer tool
https://github.com/oslabs-beta/solid-dev-tool

debugger devtool solidjs state visualizer

Last synced: 5 months ago
JSON representation

A SolidJS signal tracking dependency & structural visualizer developer tool

• Host: GitHub
• URL: https://github.com/oslabs-beta/solid-dev-tool
• Owner: oslabs-beta
• Created: 2022-07-29T19:57:30.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-05-31T23:03:33.000Z (over 2 years ago)
• Last Synced: 2025-04-25T14:16:54.297Z (9 months ago)
• Topics: debugger, devtool, solidjs, state, visualizer
• Language: TypeScript
• Homepage:
• Size: 674 KB
• Stars: 56
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Solid JS DevTool

 Developer tool that visualizes Solid's signal architecture, including the components. It can be added to any Solid JS application.

 

 ![Screen Shot 2022-08-24 at 9 57 38 PM](https://user-images.githubusercontent.com/86940809/186578516-e514f4ab-e215-4ab7-842b-03bea696d2ca.png)

## Installation

In your command line, go to the main folder where your application's files and package.json are being stored.

Install the following package:

    npm i @solid-solutions/devtool

    

    

Scoreboard-example:

    

    

![EmHk6dv](https://user-images.githubusercontent.com/86940809/186541392-6cbab926-5dbb-47e3-8c8e-ba23d98eb961.gif)

Import { DevTool } in the highest level component, typically it is your index file where you render the App. Then wrap the App with DevTool.

![ZSQKAiP](https://user-images.githubusercontent.com/86940809/186546044-36cf2088-5d86-40b6-a918-ac716f1640f6.gif)

You will then see a button appear on your Solid JS application that has the Solid JS logo. When you hover over the button, the debugger action button will show up. Click on the button to show the panel.

![l5qArwF](https://user-images.githubusercontent.com/86940809/186559623-c55c0f71-c74f-42e8-a71e-0633fa630080.gif)

## Meet Our Team

[Hulkaroy Jouraboeva](https://www.linkedin.com/in/hulkaroy-jouraboeva/)

[Candace Martin](https://www.linkedin.com/in/candace-e-martin/)  

[Stanley Chen](https://www.linkedin.com/in/stanwchen/)

[Lyam Hunt](https://www.linkedin.com/in/lyam-hunt-b87ba4112/)

## Acknowledgements

* https://github.com/thetarnav/solid-devtools

* https://github.com/CM-Tech/solid-debugger