@solid-devtools/locator

@solid-devtools/locator

A runtime library for locating components on the page, and going to their source code in your IDE.

Getting Started

Installation

This module is built-in with solid-devtools package.

To be able to use the "open source code in IDE" feature, you need to install @solid-devtools/babel-plugin additionally.

# @solid-devtools/babel-plugin is optional

npm i solid-devtools @solid-devtools/babel-plugin
# or
yarn add solid-devtools @solid-devtools/babel-plugin
# or
pnpm i solid-devtools @solid-devtools/babel-plugin

Babel Plugin

To be able to use the "open source code in IDE" feature, you need to install and add @solid-devtools/babel-plugin to vite plugins.

Follow the setup guide on it here

Debugger

Wrap your application with the <Debugger> component. And enable the Locator module with passing true or an options object to the locator prop.

import { render } from "solid-js/web"
import { Debugger } from "solid-devtools"

render(
  () => (
    <Debugger locator>
      <App />
    </Debugger>
  ),
  document.getElementById("root")!,
)

Locator Options

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

<Debugger locator={{ targetIDE: "vscode" }}>
  <App />
</Debugger>

key

Holding which key should enable the locator overlay? It's "altKey" by default — Alt on Windows, and Option or ⌥ on macOS.

Key options: "altKey", "ctrlKey", "metaKey", "shiftKey" or string to be compared with e.key property.

<Debugger locator={{ key: "ctrlKey" }}>
  <App />
</Debugger>

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 option.

https://user-images.githubusercontent.com/24491503/174093606-a0d80331-021f-4d43-b0bb-e9a4041e1a26.mp4

Changelog

See CHANGELOG.md.