si
svelte-inspector
npm i svelte-inspector
si

svelte-inspector

Development helper for inspecting and opening svelte components in editor

by Dmitry Kutran

0.0.3 (see all)License:MITTypeScript:Built-In
npm i svelte-inspector
Readme

Svelte inspector

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

Installation

npm i --save-dev svelte-inspector

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

Downloads/wk

7

GitHub Stars

72

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.0.3
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate