You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Set to `true` or options object to enable svelte inspector during development.
220
+
Set to `true` or options object to enable svelte inspector during development. See the [inspector docs](./inspector.md) for the full configuration options.
280
221
281
222
Inspector mode shows you the file location where the element under cursor is defined and you can click to quickly open your code editor at this location.
282
223
283
-
**Example:**
284
-
285
-
```js
286
-
// vite.config.js
287
-
exportdefaultdefineConfig({
288
-
plugins: [
289
-
svelte({
290
-
inspector: {
291
-
toggleKeyCombo:'meta-shift',
292
-
holdMode:true,
293
-
showToggleButton:'always',
294
-
toggleButtonPos:'bottom-right'
295
-
}
296
-
})
297
-
]
298
-
});
299
-
```
300
-
301
-
#### Customizing Inspector options via environment
302
-
303
-
Svelte Inspector toggle keys and other options are personal preferences. As such it isn't always convenient to define them in a shared svelte config file.
304
-
To allow you to use your own setup, svelte inspector can be configured via environment variables, both from shell and dotenv files.
305
-
306
-
```shell
307
-
# just keycombo, unquoted string
308
-
SVELTE_INSPECTOR_TOGGLE=control-shift
309
-
310
-
# options object as json, all options except appendTo are supported
`@sveltejs/vite-plugin-svelte-inspector` is a Vite plugin that adds a Svelte inspector in the browser. It shows the file location where the element under cursor is defined and you can click to quickly open your code editor at this location.
4
+
5
+
Note that `@sveltejs/vite-plugin-svelte` needs to be installed as a peer dependency as the inspector brings in Svelte components to be compiled.
6
+
7
+
## Setup
8
+
9
+
### with Svelte config
10
+
11
+
```js
12
+
// svelte.config.js
13
+
exportdefault {
14
+
vitePlugin: {
15
+
// set to true for defaults or customize with object
16
+
inspector: {
17
+
toggleKeyCombo:'meta-shift',
18
+
showToggleButton:'always',
19
+
toggleButtonPos:'bottom-right'
20
+
}
21
+
}
22
+
};
23
+
```
24
+
25
+
### with environment variables
26
+
27
+
Svelte Inspector toggle keys and other options are personal preferences. As such it isn't always convenient to define them in a shared svelte config file.
28
+
To allow you to use your own setup, svelte inspector can be configured via environment variables, both from shell and dotenv files.
> Inspector options set on the environment take precedence over values set in svelte config and automatically enable svelte inspector during dev.
45
+
46
+
## Plugin options
47
+
48
+
### toggleKeyCombo
49
+
50
+
-**Type:**`string`
51
+
-**Default:**`'meta-shift'` on mac, `'control-shift'` on other os
52
+
53
+
Define a key combo to toggle inspector.
54
+
55
+
The value is recommended to be any number of modifiers (e.g. `control`, `shift`, `alt`, `meta`) followed by zero or one regular key, separated by `-`. This helps avoid conflicts or accidentally typing into inputs. Note that some keys have native behavior (e.g. `alt-s` opens history menu on firefox).
Define keys to select elements with via keyboard. This improves accessibility and helps selecting elements that do not have a hoverable surface area due to tight wrapping.
65
+
66
+
-`parent`: select closest parent
67
+
-`child`: select first child (or grandchild)
68
+
-`next`: next sibling (or parent if no next sibling exists)
69
+
-`prev`: previous sibling (or parent if no prev sibling exists)
70
+
71
+
### openKey
72
+
73
+
-**Type:**`string`
74
+
-**Default:**`'Enter'`
75
+
76
+
Define key to open the editor for the currently selected dom node.
77
+
78
+
### holdMode
79
+
80
+
-**Type:**`boolean`
81
+
-**Default:**`true`
82
+
83
+
Inspector will only open when the `toggleKeyCombo` is held down, and close when released.
84
+
85
+
### showToggleButton
86
+
87
+
-**Type:**`'always' | 'active' | 'never'`
88
+
-**Default:**`'active'`
89
+
90
+
When to show the toggle button. The toggle button allows you to click on-screen to enable/disable the inspector, rather than using the `toggleKeyCombo`.
91
+
92
+
-`'always'`: always show the toggle button
93
+
-`'active'`: show the toggle button when the inspector is active
Inject custom styles when inspector is active. This is useful if you want to customize the inspector styles to match your app.
109
+
110
+
When the inspector is active, the `svelte-inspector-enabled` class is added to the `body` element, and the `svelte-inspector-active-target` class is added to the current active target (e.g. via hover or keyboard).
0 commit comments