https://github.com/qutran/svelte-inspector

Development helper for inspecting and opening svelte components in editor
https://github.com/qutran/svelte-inspector

Last synced: 3 months ago
JSON representation

Development helper for inspecting and opening svelte components in editor

• Host: GitHub
• URL: https://github.com/qutran/svelte-inspector
• Owner: qutran
• License: mit
• Created: 2019-08-26T00:01:55.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-09-02T13:47:05.000Z (over 5 years ago)
• Last Synced: 2024-07-12T03:57:14.803Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 316 KB
• Stars: 85
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Svelte inspector

Development helper for inspecting and opening [`svelte`](https://github.com/sveltejs/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...):

```javascript

import startInspector from 'svelte-inspector';

startInspector(/*config*/);

```

or

```javascript

const startInspector = require('svelte-inspector');

startInspector(/*config*/);

```

2. Add this code in the index file of your client code: (**Don't forget to cut this code in the final production bundle**)

```javascript

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

```html

```

3. Open your web app and press 'O' (configurable) for toggling the inspecting mode.

4. Move cursor to the element and press 'A' to open element's component in the editor.

## Configuration

```javascript

{

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

}

```