source-inspector.md

title	Source Inspector
id	source-inspector

The source inspector lets you click any element in your app to open its source file in your editor. When activated, the devtools overlay highlights elements as you hover over them and shows their source file location. Click to open the file at the exact line.

Requirements

Two things are needed for the source inspector to work:

• The @tanstack/devtools-vite plugin must be installed and running (dev server only)
• Source injection must be enabled: injectSource.enabled: true (this is the default)

The feature only works in development. In production builds, source attributes are not injected.

How It Works

flowchart LR
    A["Your JSX/TSX files"] -- "Babel transform" --> B["data-tsd-source<br/>attributes injected"]
    B -- "Hold inspect hotkey<br/>+ click element" --> C["Devtools reads<br/>data-tsd-source"]
    C -- "HTTP request" --> D["Vite dev server"]
    D -- "launch-editor" --> E["Opens file in editor<br/>at exact line"]

Loading

The Vite plugin uses Babel to parse your JSX/TSX files during development. It adds a data-tsd-source="filepath:line:column" attribute to every JSX element. When you activate the source inspector and click an element, the devtools reads this attribute and sends a request to the Vite dev server. The server then launches your editor at the specified file and line using launch-editor.

Activating the Inspector

There are two ways to activate the source inspector:

• Hotkey: Hold Shift+Alt+Ctrl (or Shift+Alt+Meta on Mac) — this is the default inspectHotkey. While held, the inspector overlay appears.
• Settings panel: The inspect hotkey can be customized in the devtools Settings tab.

The hotkey can also be configured programmatically:

<TanStackDevtools
  config={{
    inspectHotkey: ['Shift', 'Alt', 'CtrlOrMeta'],
  }}
/>

Ignoring Files and Components

Not all elements need source attributes. Use the ignore config to exclude files or components:

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      injectSource: {
        enabled: true,
        ignore: {
          files: ['node_modules', /.*\.test\.(js|ts|jsx|tsx)$/],
          components: ['InternalComponent', /.*Provider$/],
        },
      },
    }),
  ],
}

Both files and components accept arrays of strings (exact match) or RegExp patterns.

Click Action

By default, clicking an inspected element opens the file in your editor. You can change this to copy the source path to the clipboard instead using the sourceAction setting:

<TanStackDevtools
  config={{
    sourceAction: 'copy-path',
  }}
/>

Value	Behavior
"ide-warp"	Opens the file in your editor at the exact line (default)
"copy-path"	Copies the filepath:line:column string to the clipboard

This is useful in environments where the Vite dev server cannot reach your editor, or when you want to paste the path elsewhere.

Editor Configuration

Most popular editors work out of the box via the launch-editor package. Supported editors include VS Code, WebStorm, Sublime Text, Atom, and more (full list).

For unsupported editors, use the editor config:

devtools({
  editor: {
    name: 'My Editor',
    open: async (path, lineNumber, columnNumber) => {
      const { exec } = await import('node:child_process')
      exec(`myeditor --goto "${path}:${lineNumber}:${columnNumber}"`)
    },
  },
})