Svelte inspector
Development helper for inspecting and opening svelte
components in your editor.
Installation
npm i --save-dev svelte-inspector
Usage
- Import
svelte-inspector
package and call the function at the top of your bundle configuration file (ex. rollup, webpack, parcel, etc...):
;;
or
const startInspector = ;;
- 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;scriptsrc = 'http://0.0.0.0:5001/start';documentbody;
or this code in the bottom of body tag in index.html
-
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.
Configuration
// 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';