Svelte DevTools+
Installation
Features
Dynamic component visualization
Svelte DevTools+ allows developers to inspect the component hierarchy of a Svelte application, making it easier to understand the application's structure
Real-time state and props updates
Svelte DevTools+ allows developers to see the real-time changes in a component's state and props, immediately reflecting updates in the DevTool and allowing for simple tracking of the application's behavior
Component inspection
When selecting a component in the component tree, developers can inspect the component's props, state, and context to aid in understanding the data and values that are passed to each component
Component state modification
Developers can modify the state and props of a selected component directly from the DevTools window for testing and debugging purposes, making it easy to experiment with different scenarios without modifying your code
State Rewind
Svelte DevTools+ provides a time-travel debugging feature that enables developers to inspect the application's state at different points in time and analyze how the state of the application changes
Development
- Fork and clone the repo:
git clone https://github.com/oslabs-beta/Svelte-DevTools-Plus.git
- Navigate to the project folder
cd Svelte-DevTools-Plus/extension
- 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
- In Chrome, navigate to chrome://extensions/
- Turn on developer mode by clicking the switch in the top right corner
- Click "Load unpacked" in the top left corner
- 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
License
This project is licensed under the MIT License - see the LICENSE file for details.
