Vue Source Inspector

About

Vue Source Inspector helps frontend developers trace rendered Vue elements back to the files that produced them.

Use the VSI DevTools tab to inspect a page, hover any Vue-rendered element, and review layered source results:

- Nearest: the closest component that rendered the hovered DOM
- Parent: the next useful parent component
- Page: the current page entry file

The extension also surfaces related style files, including matched CSS files and Vue SFC style imports, so you can move from a rendered element to both its component source and its styling source.

You can open source and style files directly in supported desktop editors such as VS Code, Cursor, IntelliJ IDEA, WebStorm, and Antigravity.

Key features:

- Inspect Vue-rendered DOM from a dedicated Chrome DevTools panel
- Start inspection with the DevTools panel or a keyboard shortcut
- Lock the current on-page result with a click
- Review Nearest, Parent, and Page component layers
- Open matching component and style files in your selected editor
- Use local-only preferences for editor, theme, language, and inferred project root
- Works with Vue 2 and Vue 3 development builds through runtime metadata heuristics

This extension is designed for local Vue development workflows. It works best when the target page is running in a development environment and exposes Vue runtime source metadata.

Vue Source Inspector does not collect, transmit, sell, or share personal data. It stores only local preferences in Chrome local storage and does not use analytics, ads, tracking scripts, or remote code.