Development helper for inspecting and opening svelte
components in your editor.
npm i --save-dev svelte-inspector
Make sure that dev property in your svelte's compiler (loader, plugin, etc...) options have set as true
. https://svelte.dev/docs#svelte_compile
- Import
svelte-inspector
package and call the function at the top of your bundle configuration file (ex. rollup, webpack, parcel, etc...):
import startInspector from 'svelte-inspector';
startInspector(/*config*/);
or
const startInspector = require('svelte-inspector');
startInspector(/*config*/);
- Add this code in the index file of your client code: (Don't forget to cut this code in the final production bundle)
const script = document.createElement('script');
script.src = 'http://0.0.0.0:5001/start';
document.body.appendChild(script);
or this code in the bottom of body tag in index.html
<script type="application/javascript" src="http://0.0.0.0:5001/start"></script>
-
Open your web app and press 'O' (configurable) for toggling the inspecting mode.
-
Move cursor to the element and press 'A' to open element's component in the editor.
{
// Code for the key that activates inspecting mode
// default 79 - means for 'O'
activateKeyCode: 79;
// Code for the key that opens file in editor
// default 65 - means for 'A'
openFileKeyCode: 65;
// Default editor to open inpspected components
// default 'code' - means for 'VS Code'
// Allowed values: 'sublime', 'atom', 'code', 'webstorm', 'phpstorm', 'idea14ce', 'vim', 'emacs', 'visualstudio'
editor: 'code';
// Inspector's color
color: '#009688';
}