Skip to content

qutran/svelte-inspector

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Svelte inspector

Development helper for inspecting and opening svelte components in your editor.

Installation

npm i --save-dev svelte-inspector

Preparation

Make sure that dev property in your svelte's compiler (loader, plugin, etc...) options have set as true. https://svelte.dev/docs#svelte_compile

Usage

  1. 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*/);
  1. 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>
  1. Open your web app and press 'O' (configurable) for toggling the inspecting mode.

  2. 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';
}

About

Development helper for inspecting and opening svelte components in editor

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published