SvelteScope
SvelteScope is a Google Chrome Extension specifically designed for Svelte webpages, offering developers a platform to test webpage behaviors and conduct component experimentation within the browser environment. Its features include an interactive visual tree diagram, real-time rendering of state changes, and the ability for developers to create multiple snapshots, all aimed at streamlining front-end testing processes.
Key Features
SvelteScope provides developers with an interactive tree diagram to explore component relationships, streamlining the comprehension of the application's structure. Additionally, developers can click on individual components to navigate their properties, state, and events.
Generate test data scenarios by adjusting component props directly on the SvelteScope app and observe immediate rendering updates directly within the webpage.
Front-end testing often involves extensive trials to pinpoint the source of issues. To facilitate tracking and comparison of tests, SvelteScope offers developers the ability to create multiple snapshots. Within SvelteScope, developers can organize these snapshots into tabs, enabling easy addition and removal as needed.
Installation and Usage Guide for SvelteScope
To install the SvelteScope developer tool onto Chrome browser, please visit Chrome Web Store.
(Developer: If you're interested in contributing to this project, please refer to the Contribution section below for instructions)
If you haven't already, enable the extension by following these steps:
- Click on the three dots (⋮) located at the top right corner of the browser window to open the Chrome menu.
- From the menu, select "More tools," then choose "Extensions." This will open the Extensions page.
- Locate the extension you want to enable in the list of installed extensions.
- Toggle the switch next to the extension to the right (gray to blue) to enable it.
Usuage Guidelines
SvelteScope only functions on locally hosted Svelte web pages.
- Access the developer tools by right-clicking anywhere on the webpage and selecting "Inspect" from the context menu.
- Locate and click on 'SvelteScope' in the top ribbon of the developer tools.
- Explore webpages to observe the real-time rendering of a visual tree component for the Svelte App.
- Select components in the visual tree diagram to access their states.
- Modify component props, events, and states using the editor box, and observe live changes on the webpage.
- Generate additional snapshots by clicking the "+" icon. Delete snapshots by clicking the "x" icon. Reset all tabs by clicking "reset".
Open Source Contribution
We greatly encourage contributions from the community. Your input, suggestions, and feedback play a crucial role in advancing the project. Below are ways in which you can contribute:
- Review our code and provide feedback.
- Test the extension and report any bugs or issues you encounter.
- Suggest new features or improvements.
- Submit pull requests to address open issues or implement new features.
Instructions to download repository.
- Access the SvelteScope GitHub repository.
- Fork the repository to create personal working of the repository.
- Clone or download the the fork to your local machine.
- Install the dependencies
npm install - Once the dependencies are installed, run the following command to build the Svelte extension to compile the code.
npm run build - Save all changes.
- Open Chrome and go to chrome://extensions/.
- Enable developer mode by toggling the switch in the top right corner.
- Click on "Load unpacked" in the top left corner.
- Navigate to the directory where your local repository is located and select the build folder to load.
Contributors
