React Trace

An experimental, zero-integration Chrome extension that maps an element in a React development page back to the JSX/TSX source that created it, then opens that location in VS Code or Cursor.

No project-code changes required. Load the extension in Chrome; do not add a package, a Babel/Vite plugin, or application instrumentation. React Trace reads the React runtime and source maps already available in your development page.

Experimental. React Trace relies on React development-only internals and accessible source maps. It is intended for local development, not production pages.

When inspecting a React UI, browser DevTools can show the DOM and styles but not always the source line that created an element. React Trace shortens that loop without modifying the project being inspected:

1. Hold Alt and point at an element.
2. See its source location and React component chain.
3. Pin the result with Alt + click.
4. Open the exact JSX/TSX location in your editor.

• Works as a browser extension only: no project packages, build-tool plugins, source transforms, or application-code changes.
• Maps React 18 source locations from fiber._debugSource when available.
• Maps React 19 JSX call sites from fiber._debugStack, then resolves generated locations through source maps.
• Displays the element, its parent source location, component chain, React version, and the resolution path.
• Opens locations in VS Code or Cursor through their native URL schemes.
• Falls back to the nearest React ancestor for DOM inserted outside React.
• Handles fullscreen masks and portals by inspecting elementsFromPoint() and capturing the Alt-click gesture before page handlers run.
• Infers absolute paths from Vite /@fs/ URLs, compiler fileName literals, absolute source-map paths, sourceRoot, or a configured project root.

1. Open chrome://extensions.
2. Enable Developer mode.
3. Choose Load unpacked and select this repository directory.
4. Reload the extension and then reload the target page whenever extension code changes.

pnpm --dir demo install
pnpm --dir demo dev

Open http://localhost:5173. The demo is only for verification; any supported local React development page works after loading the extension. The extension is injected only on http://localhost/* and http://127.0.0.1/*.

For React 19, React Trace may need an absolute project root to turn a source-map path into a local file path. Click Settings in the result card, or open the extension options page, and map the page origin to the project directory:

http://localhost:5173 -> /absolute/path/to/source-inspect/demo

The setting is stored locally in Chrome. If the isolated-world bridge is unavailable, the extension falls back to page localStorage.

The result card can show two different but useful concepts:

• Source location: the JSX expression that created the element.
• Component chain: the element's ownership in the Fiber tree.

They can differ when a parent creates an element and passes it to a child as children or another prop.

The demo exercises the cases that are easiest to get wrong:

1. Simple elements in one file.
2. List rendering across TodoCard.tsx and TodoItem.tsx.
3. Nested memo and forwardRef components.
4. DOM inserted with innerHTML, which has no Fiber and must fall back to a React ancestor.
5. An element passed through a prop, where source location and Fiber ownership differ.
6. A dropdown with a fullscreen mask that would otherwise steal event.target.

React Trace uses a small two-script architecture because React Fiber expandos are visible only from the page's main world, while chrome.storage is available only from the extension's isolated world.

For path inference, the extension prefers explicit paths over guesses: Vite /@fs/ URLs, compiler-injected fileName values, absolute sources, sourceRoot, then a configured project root combined with the module URL or normalized sources path. If it cannot infer a safe absolute path, it reports the failure instead of opening a guessed file.

Run the focused Node tests:

node test/path-infer.test.mjs
node test/placement.test.mjs

Build the React demo:

pnpm --dir demo build

To compare React runtime behavior without installing dependencies, start a local server from the repository root:

python3 -m http.server 5200

Then open React 19 or React 18.

• Move large source-map parsing to a worker and add a bounded cache.
• Normalize HMR module URLs before caching.
• Validate more bundlers and framework-specific inspection paths.

This is an early-stage prototype. When reporting an issue, include the React version, bundler and dev-server version, module URL, source-map shape, and the expected versus actual source location. Run the verification commands above before submitting a change.

Licensed under the Apache License 2.0.