Element to Code — VS Code extension
Click any element on a website and jump to the code where that component lives in VS Code. Requires the Chrome Extension.
How it works
This extension runs a small loopback HTTP bridge (bound to 127.0.0.1) that
the Chrome extension calls, authenticated with a per-machine pairing token. When
you select an element in the browser, the browser sends candidate source
locations; this extension matches them against files in your open workspace and
opens the best one at the right line.
The browser is treated as untrusted: the bridge only ever opens files inside your
open workspace folders, and never accepts an arbitrary path. See docs/security.md
in the repository.
Setup
- Open your project as the VS Code workspace.
- Click the E2C item in the bottom-right status bar (or run Element to
Code: Pair Browser) — it copies a pairing token to your clipboard.
- Paste the token into the Chrome extension's options page.
Chrome and VS Code must run on the same machine.
Commands
- Element to Code: Pair Browser — copy the pairing token
- Element to Code: Show Connection Status
- Element to Code: Restart Local Bridge
- Element to Code: Reset Pairing Token
- Element to Code: Show Diagnostic Output
Settings
See elementToCode.* in Settings — bridge port, auto-open thresholds, and the
security.allowOutsideWorkspace guard (off by default).
Compatibility
Resolves source for React dev apps that expose development metadata: React 19
(_debugStack, e.g. Vite / TanStack Start) and Next.js (App and Pages Router,
Webpack and Turbopack). Production/minified builds are out of scope.
