CodeLocator

Click any element on a running Angular or Next.js app to open its source file and line in your editor.

CodeLocator opens the source of any element you click in your running app. Click a button, a card or a heading in the Angular or Next.js app you are developing on your own computer, and CodeLocator opens the right template file at the right line in your editor: VS Code, Cursor, Antigravity or IntelliJ IDEA. What you can do - Click: open the element's template (HTML) at its line. - Shift+click: open the style rule that styles it, chosen from every rule that applies. - Ctrl+click: open the component's TypeScript code that the element uses. - Follow the value (Angular): trace a value on the page back through inputs, fields and services to the API call it came from. - Time saved: see how many searches CodeLocator saved you this week, with a sentence ready for a report. How it works CodeLocator works with a small companion program, the CodeLocator bridge, that runs on your computer. Install it once with npm install -g codelocator and run codelocator setup. The extension talks to the bridge only at 127.0.0.1, so your page and your code never leave your computer. Privacy No accounts, no analytics, no tracking. CodeLocator reads a page only after you start a pick in that tab. Requirements Chrome 123 or later, Node.js 20 or later, and an Angular or Next.js app running in development mode (ng serve or next dev).