Svelte DevTools+

Installation

Features

Dynamic component visualization

Inspect the component hierarchy of an application to easily understand its structure

Real-time state and props updates

Monitor real-time updates of a component's state and props, and track your application's behavior

Component inspection

Select a component in the component tree to inspect its state and props, and gain insight into how data flows through the application

Component state modification

Modify the state and props of a component for testing and debugging purposes, and experiment with different scenarios without modifying your code

State Rewind

Explore your application's state at different points in time, and easily observe how it changes over time

Development

1. Fork and clone the repo:

git clone https://github.com/oslabs-beta/Svelte-DevTools-Plus.git

2. Navigate to the project folder

cd Svelte-DevTools-Plus/extension

3. Install the necessary packages:

npm install

Testing

To create a development build

npm run dev

To create a production build

npm run build

To run the test suite

npm test

To load the extension

1. In Chrome, navigate to chrome://extensions/
2. Turn on developer mode by clicking the switch in the top right corner
3. Click "Load unpacked" in the top left corner
4. Navigate to your local repository and select the build folder

Demo apps

For testing, demo apps are included with the repo in the demo-apps folder

Contributors

Alexander Vranas

Maciej Małecki

Janice Chu

Francis Espinoza

Laura Glass-Johnston

License

This project is licensed under the MIT License - see the LICENSE file for details.