A svelte Svelte debugging app for svelte Svelte devs.
Bonjour! Canopy is an extension of the Chrome devtools panel. To use it, you'll need to open a Svelte app in developer mode. (We've included one here too, in case you'd like to try Canopy straight out of the box — see the Getting started section below.)
Canopy offers the following two features.
- A dynamically-updating component visualizer. This displays all instances of Svelte components that have been rendered, and automatically updates itself as components are created and destroyed.
- A time-traveling state tracker. This lists all state values, and takes a snapshot upon each state change that can be revisited with the click of a button.
As of now, Canopy has not yet been added to the Chrome Extension store. So to use it, please proceed as follows.
-
Clone this repo to your local machine.
-
Open a terminal, navigate to its root directory, and run the following command.
cd extension/src && npm i && npm run tsc && cd ../sidebar-bundle-generator && npm i && npm run build && cd ../panel-bundle-generator && npm i && npm run build && cd ../../
-
Open Google Chrome, navigate to
chrome://extensions/, and make sure the "Developer mode" toggle in the top-right is switched on. Then, click the "Load unpacked" button in the top-left and select the directory./extension/src/builton your local machine. -
Make sure that your Svelte app targets a DOM element with the id
root. That is, your index/mainhtmlandjsfiles should contain code that looks something like the following two snippets.
index.html:
<body>
<div id="root"></div>
</body>
index.js:
import App from './App.svelte';
new App({
target: document.getElementById("root"),
});
And voilà! You are now the proud owner of the latest instance of Canopy. To use, it simply run your favorite Svelte project in dev mode and open the appropriate localhost port in Chrome -- more specific instructions are below. Alternatively, you can use our pre-loaded Svelte project by navigating in your terminal to the directory ./demo-client and running npm i && npm run dev .
Once you have opened your Svelte app in Chrome, go ahead and open the Chrome DevTools window (keyboard shortcut F12). Among the panels ("Elements", "Console", etc.), you should see "Canopy". And therein lies the state tracker. You should see a list of all state values that dynamically updates with all state changes, as depicted below.
Additionally, upon each state change Canopy takes a snapshot of all state values, and by clicking the corresponding button you can "time-travel" back to that state of your app. Each snapshot button is labeled by the state variable that was updated since the previous snapshot.
In order to see the component visualizer, head to the "Elements" panel, and then open the "Svelte Components" sidebar. (Note that this might actually be below your DOM tree, depending on your configurations.) You should see a tree depicting the hierarchy of Svelte components that comprise your app, as depicted below.
This visualizer dynamically updates as components are created and destroyed, and you can hide/show the children of any node that has them (by clicking the adjacent -/+ button). Each node in the visualizer is labeled by its ID (which may be automatically assigned by Svelte) as well as the Svelte component of which it is an instance.
Canopy is still in beta, and unfortunately it is currently sensitive to the order in which certain operations are performed. If it is not working for you, please follow the following steps in order.
- Be sure that all DevTools windows are closed.
- Reload the extension (as described in the Getting started section above).
- Refresh the page containing the Svelte app.
- Canopy should now be available in the DevTools panel.
Canopy is an open-source product, developed under the auspices of the Open Source Labs tech accelerator. The core Canopy team comprises Aaron Mazel-Gee, Jenna Moon, Justin Paige, and Vance McGrady.
We welcome contributions of all kinds from the Svelte community: comments, questions, suggestions, bug reports, feature requests — and of course, additions to the codebase. Please feel free to contact us here; we'd love to hear from you!