CodeLocator
Install

Click any element.
Jump to its template, style rule or code.

CodeLocator is a Chrome extension for Angular and Next.js teams. Press Alt+Shift+C, click a label, button or card on your running app, and your editor opens the template or JSX line that renders it.A Chrome extension for Angular and Next.js. Press Alt+Shift+C, click any element, and your editor opens the line that renders it.

Install CodeLocator How a pick works

Free on the Chrome Web StoreChrome 123 or newerNode.js 20.19 or newerRuns only on your computer

Demo on a sample page. Click a name, a skill, Share or the email field.

localhost:4311/volunteers

Volunteers

Mona Hassan

Active

42 volunteer hours

  • First aid
  • Event setup
  • Arabic
Join Report

Available this month

Email address Send

We reply within a day

Omar Farouk

Active

18 volunteer hours

  • Driving
  • Logistics
Join Report

Available this month

Email address Send

We reply within a day

CodeLocator side panel after picking Share: VolunteerCardComponent, high match, volunteer-card.component.html line 16, with Open HTML, Style and TS buttons.
volunteer-card.component.html:16
volunteer-card.component.html
src › app › volunteer-card › volunteer-card.component.html
14  <footer>15    <button type="button" class="btn" (click)="join()">Join</button>16    <button type="button" class="btn-link" aria-label="Share">Share</button>17    <button type="button" class="btn-link" aria-label="Report">Report</button>18  </footer>
Opened by CodeLocatorLn 16, Col 5Spaces: 2UTF-8HTML

Works withAngularNext.jsChromeVS CodeCursorAntigravityIntelliJ IDEA

The two-minute search, gone.

On a project you don't know well, finding the code behind a button takes about 2 minutes by hand. With CodeLocator it takes one click and about half a second.

2 minSearching by hand
0.5 sOne click with CodeLocator

By hand

  1. Open DevTools and copy a class name from the element.
  2. Search the project for it and get a page of matches.
  3. Open files until the markup looks like the page.
  4. Search again for its style rule and the code behind it.

With CodeLocator

  1. Press Alt+Shift+C and click the element.
  2. Your editor is already on the line. Shift+click gives the style rule, Ctrl+click the code.

How a pick works

A Chrome extension and a small local program, the bridge, work together. Nothing is added to your project.

  1. Install it once

    Install the bridge, codelocator, with npm and add the extension from the Chrome Web Store. The bridge runs on your computer at 127.0.0.1:47310, and the panel's Connect button can start it for you.

  2. Run your app as usual

    Start it with ng serve, npm start, nx serve or next dev. The bridge sees which program serves the page's port and finds that program's project folder.

  3. Press Alt+Shift+C and click

    The extension asks Angular's dev mode, or React's debug info in Next.js, which component made the element. The bridge reads that component's template with your project's own compiler and opens file:line:column in your editor.

CodeLocator side panel before a pick: Click any element on the page. Click opens the template line, Shift+click the best style rule, Ctrl+click the code it uses.
The panel before a pick, with what each kind of click opens.

It knows more than the line.

A pick also tells you where the element's styles are, which code it uses and where its value comes from.

Follow a value to the API call

Pick a value on the page, such as a volunteer's name, and the Value tab walks back through your code: the @for it comes from, the component input, the parent template that passes it, the signal, the service method, and the HTTP call with its full URL. Every step has an Open button.

Where name comes from
  1. name
  2. volunteer
  3. v
  4. volunteers
  5. list()
  6. GET /api/volunteers
Where the email field goes
  1. email
  2. send()
  3. create()
  4. POST /api/volunteers
Angular only for now
The Value tab: Where name comes from, 7 steps. Shown in the template at line 3, the component input at line 11, passed by the parent volunteer list template at line 8.
The Value tab after picking a name: seven steps, from the template to GET /api/volunteers.

The style rule and the code, one key away

Shift+click opens the best style rule, with SCSS and Less nesting resolved, so .card { &-title } is found for card-title. When the rules sit in several files, the Styles tab lists them and you choose.

Ctrl+click (Cmd+click on macOS) follows the element's bindings into the component class: its click handler, its form control, its template reference or the property it shows.

Angular only for now
The Styles tab for the Share button: this element is styled in 3 files. Rules .btn-link at volunteer-card.component.scss line 23, footer .btn-link:hover at line 25, a global .btn-link in styles.scss and .btn-link:focus-visible in _buttons.scss.
The Styles tab for Share: rules from three files.

Nothing to set up per project

Run your app the way you always do. The bridge asks your system which program serves the page's port, then walks up from that program's folder to the angular.json or Next.js config. There is no list of projects to keep.

While an Angular app runs, the bridge watches its files, so a component you just added can be picked right away, with no refresh and no restart. Several apps can run at once, and each tab uses the project behind its own port.

PortProgramProject
:4200 Liveng serve~/work/adminangular.json
:3000next dev~/work/storenext.config.ts

Example of two apps running at once. Live means the bridge is watching that Angular app's files.

See the time it saves

The bottom of the panel shows the minutes your picks saved this week. Open it for picks per day, what you looked for and each project, and copy one sentence for a report or a slide.

Each pick counts as 2 minutes of searching by hand, minus the time the pick took, so the number stays on the careful side. The counts stay in Chrome on your computer.

Time saved, this week: 21.9 minutes over 11 picks, picks per day with Tuesday highest, what you looked for split into template, style and code, and picks by project.
One week: 21.9 minutes saved over 11 picks.

Opens in your editor

The file opens in the window of its project folder, so you can browse the rest of the app from there.

  • VS Code with the code command
  • Cursor
  • Antigravity
  • IntelliJ IDEA opens just the file

Any other editor that accepts -g file:line:column works through codelocator --editor.

Angular and Next.js

What each framework gets
PickAngularNext.js
Click: the lineTemplate lineJSX line
Shift+click: style ruleYesNot yet
Ctrl+click: codeYesNot yet
Follow the valueYesNot yet
Runs withng serve, npm start, npx ng serve, nx servenext dev, npm run dev, Turbopack or webpack

Your code stays on your computer.

Every part of a pick happens on your machine, between Chrome, the bridge and your editor.

Your computer
ChromeYour app's page and the CodeLocator extension
Which line made this element?
codelocator127.0.0.1:47310
Open file:line
Your editorVS Code, Cursor, Antigravity or IntelliJ IDEA

No source code leaves your computer.

  • The bridge listens on 127.0.0.1 only and answers only the CodeLocator extension. Web pages can't call it or read its answers.
  • It reads only the project folders of apps running on your computer. Its only action is opening a file there in your editor.
  • To find those folders it asks the system which program uses each port. It never changes or stops a program.
  • The extension touches a page only after you click its icon or press the shortcut.
  • Time saved counts stay in Chrome on this computer, and Reset counts deletes them.
  • codelocator setup registers a helper that can only start or stop the bridge, and only for the CodeLocator extension.

Read the full privacy policy

Install once. Use it on every project.

You need Node.js 20.19 or newer, Chrome 123 or newer, and one of the editors above.

  1. Add the extension

    Add CodeLocator to Chrome from the Chrome Web Store, then pin it so it is one click away.

    Add to Chrome

  2. Install the bridge

    The bridge finds your code and opens your editor. In a terminal, run:

    npm install -g codelocator

    View on npm

  3. Let the panel start it

    Run this once, so the Connect button can start the bridge for you:

    codelocator setup

  4. Pick

    Start your app, press Alt+Shift+C and click. The first time, the panel walks you through these steps and a short tutorial.

The extension is on the Chrome Web Store and the bridge is the codelocator package on npm. Both are free.

Welcome to CodeLocator: setup steps with Copy buttons. Install Node.js 20.19 or newer, install the bridge, let the panel start the bridge, start your app and connect, check the shortcut.
The setup guide in the panel, with the bridge already connected.

Questions

What teams ask before they install it.

Do I need to change my project?

No. Nothing is added to or configured in your projects, and there is no list of projects to keep. The bridge finds the project from the app you are running.

Which apps does it work with?

Angular apps started with ng serve, npm start, npx ng serve or nx serve, and Next.js apps on next dev or npm run dev, with Turbopack or webpack and both server and client components. React apps without Next.js are not covered yet.

Can I use it on staging or production?

No. It works on apps served from your computer. Production builds drop the debug information it reads, and apps behind a proxy or inside Docker or WSL are not covered. To find something you saw on staging, run the same app locally and pick it there.

Does any of my code leave my computer?

No. The bridge listens on 127.0.0.1 only, reads only the folders of apps running on your computer, and its only action is opening a file in your editor.

If an AI feature is added later, it will be off by default, and nothing will leave your computer unless you turn it on.

Which editors can it open?

VS Code, Cursor, Antigravity and IntelliJ IDEA. Settings shows which of them are installed on your computer. Another editor that accepts -g file:line:column works through codelocator --editor.

Does it run on Windows and macOS?

It is tested on Windows and Linux. The bridge also finds running apps on macOS, but macOS is not tested yet.

Can I run several apps at the same time?

Yes. Each tab uses the project behind its own page's port, so two projects with the same component names never mix. The apps menu in the panel lists every running app.

How is time saved counted?

Each pick that opens a file counts as 2 minutes of searching by hand, minus the time the pick took. The same element picked again within 2 minutes counts once. The counts stay in Chrome on your computer.

Find the line. Fix the bug.

Install CodeLocator once, and every Angular or Next.js app you run is one click away from its source.

Install CodeLocator Try the demo again