# @solid-devtools/debugger
> Debugger of the Solid's reactivity graph — a cornerstone of all solid-devtools.
Latest version **0.28.1** (published 2025-07-01) · MIT license · 0 weekly downloads
## Install
```sh
npm install @solid-devtools/debugger
pnpm add @solid-devtools/debugger
yarn add @solid-devtools/debugger
bun add @solid-devtools/debugger
```
## Health
**Score 45/100 (D)** — status: stable.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: stale.
## Facts
| | |
|---|---|
| Version | 0.28.1 |
| Published | 2025-07-01 |
| First published | 2022-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 255.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 660 |
| Author | Damian Tarnawski |
| Maintainers | thetarnav. |
| Keywords | solid, devtools, debugger, reactivity |
## Links
- npm: https://www.npmjs.com/package/@solid-devtools/debugger
- Repository: https://github.com/thetarnav/solid-devtools
- Homepage: https://github.com/thetarnav/solid-devtools/tree/main/packages/debugger#readme
- Issues: https://github.com/thetarnav/solid-devtools/issues
- npm.io page: https://npm.io/package/@solid-devtools/debugger
## Dependencies (9)
- [@nothing-but/utils](https://npm.io/package/@nothing-but/utils.md) ~0.17.0
- [@solid-devtools/shared](https://npm.io/package/@solid-devtools/shared.md) ^0.20.0
- [@solid-primitives/utils](https://npm.io/package/@solid-primitives/utils.md) ^6.3.1
- [@solid-primitives/bounds](https://npm.io/package/@solid-primitives/bounds.md) ^0.1.1
- [@solid-primitives/keyboard](https://npm.io/package/@solid-primitives/keyboard.md) ^1.3.1
- [@solid-primitives/rootless](https://npm.io/package/@solid-primitives/rootless.md) ^1.5.1
- [@solid-primitives/scheduled](https://npm.io/package/@solid-primitives/scheduled.md) ^1.5.1
- [@solid-primitives/static-store](https://npm.io/package/@solid-primitives/static-store.md) ^0.1.1
- [@solid-primitives/event-listener](https://npm.io/package/@solid-primitives/event-listener.md) ^2.4.1
## Alternatives
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads
## Recent versions
- 0.28.1 (latest) — 2025-07-01
- 0.28.0 — 2025-06-17
- 0.27.1 — 2025-06-14
- 0.27.0 — 2025-04-01
- 0.26.0 — 2025-01-03
- 0.25.0 — 2025-01-01
- 0.24.5 — 2024-12-30
- 0.24.4 — 2024-12-18
- 0.24.3 — 2024-12-16
- 0.24.2 — 2024-12-15
- 0.24.1 — 2024-12-13
- 0.24.0 — 2024-12-11
- 0.23.4 — 2024-04-01
- 0.23.3 — 2023-11-18
- 0.23.2 — 2023-11-16
- … 51 more at https://npm.io/package/@solid-devtools/debugger/versions
## README
# @solid-devtools/debugger
[](https://pnpm.io/)
[](https://www.npmjs.com/package/@solid-devtools/debugger)
[](https://www.npmjs.com/package/@solid-devtools/debugger)
A runtime package, used to get information and track changes of the Solid's reactivity graph. It's a cornerstone of the rest of the packages.
## Installation
If you're not using the main [`solid-devtools`](https://github.com/thetarnav/solid-devtools/tree/main/packages/main) package, and want to use the debugger directly, you can install it as a standalone package:
```bash
npm i @solid-devtools/debugger
# or
yarn add @solid-devtools/debugger
# or
pnpm add @solid-devtools/debugger
```
> **Warning**
> This package changes extremely often, and is not meant to be used directly. Unless you know what you're doing, use the main package instead.
## Module overview
The debugger is split into four submodules:
- `.` - The main debugger runtime. It exposes hooks like `useDebugger`, or `useLocator` which are used to directly interact with the debugger.
The debugger module doesn't import from `solid-js` directly, DEV API it provided to it by the `./setup` module.
- `./setup` - As the name suggests, it's used to setup the debugger. It needs to be imported before the debugger is used, as it provides the DEV API to the debugger.
- `./bundled` - A bundled version of the main debugger module. Use this instead of the main module to prevent the debugger from importing from the local `solid-js` package to keep the development and debugger runtimes separate.
- `./types` - Exports all "pure" resources of the debugger, such as types, enums and constants. Use this if you don't want to import the debugger runtime or `solid-js` by accident.
### Import the debugger
The debugger needs to be setup before it can be used. To do that, import the `./setup` module before the debugger is used.
```ts
import '@solid-devtools/debugger/setup'
import {useDebugger} from '@solid-devtools/debugger/bundled' // or from '@solid-devtools/debugger'
const debug = useDebugger()
```
## Using component locator
_Debugger feature inspired by [LocatorJS](https://www.locatorjs.com)_
Locator let's you locate components on the page, and go to their source code in your IDE. All you need to do is configure it by calling `setLocatorOptions` with some options.
```ts
import {useDebugger} from '@solid-devtools/debugger' // or 'solid-devtools/setup'
const debug = useDebugger()
debug.setLocatorOptions()
```
It will not allow you to highlight hovered components on the page and reveal them in the IDE or the Chrome Extension. _(depending of if the extension panel is open or not)_
### Locator Options
Not passing any options will enable the locator with Alt as the trigger key and no `targetIDE` selected.
Currently Locator allows for specifying these props:
#### `targetIDE`
Choose in which IDE the component source code should be revealed.
Out-of-the-box options: `vscode`, `atom`, `webstorm` and `vscode-insiders`
```ts
setLocatorOptions({
targetIDE: 'vscode',
})
```
To be able to go the source code, the code location needs to be inlined during build. This is done by the `@solid-devtools/transform` package. [See how to set it up here.](../transform#getting-started)
**Target URL Function:**
To target custom URLs (e.g. Github files) the `targetIDE` option accepts an function returning a `string` or `false`.
```ts
setLocatorOptions({
targetIDE: ({ filePath, line }) =>
// will navigate to this link when clicking
`https://github.com/thetarnav/solid-devtools/blob/main/playgrounds/sandbox/${filePath}#L${line}`,
})
```
Returning `false` will prevent calling `window.open` to navigate to URL, and let you handle the click yourself.
```ts
setLocatorOptions({
targetIDE({ projectPath, filePath, line, column, element }) {
console.log({ projectPath, filePath, line, column, element })
return false
},
})
```
#### `key`
Holding which key should enable the locator overlay? It's `"Alt"` by default — Alt on Windows, and Option or ⌥ on macOS.
Key options: `"Alt"`, `"Control"`, `"Mete"`, `"Shift"` or `string` to be compared with `e.key` property.
```tsx
setLocatorOptions({
key: 'Control',
})
```
### Using the Locator on the page
To activate the Locator module — you have to hold down the Alt/Option key and move your mouse around the page to highlight components and their different HTML Elements.
Clicking the component should take you to the component source code, given that you specified the [`targetIDE`](#targetIDE) option.
https://user-images.githubusercontent.com/24491503/174093606-a0d80331-021f-4d43-b0bb-e9a4041e1a26.mp4
## Supporting custom renderers
By default the debugger assumes you are using `"solid-js/web"` as jsx renderer and that the rendered elements are `HTMLElement`s.
If you are using a custom renderer—such as Three.js, Pixi.js, or Lightning.js—you need to provide the debugger with an `ElementInterface` implementation.
```ts
import * as debug from '@solid-devtools/debugger/types'
import {setElementInterface} from '@solid-devtools/debugger/setup' // or 'solid-devtools/setup'
/** ElementInterface implementation for DOM Element */
let element_interface: debug.ElementInterface = {
isElement: obj => obj instanceof Element,
getElementAt: e => e.target as Element | null,
getName: el => el.localName,
getChildren: el => el.children,
getParent: el => el.parentElement,
getRect: el => el.getBoundingClientRect(),
getLocation: el => {
let attr = debug.getLocationAttr(el)
return attr && debug.parseLocationString(attr) || null
},
}
setElementInterface(element_interface)
```
## Changelog
See [CHANGELOG.md](./CHANGELOG.md).
---
_Source: https://npm.io/package/@solid-devtools/debugger · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._