| title | Chrome extension |
|---|---|
| description | Open the devtools as a panel inside Chrome DevTools. |
The Chrome extension adds a panel named Angular DevTools to Chrome DevTools. The panel loads the devtools UI and connects it to the dev server of the page you are inspecting.
The page still needs the devtools mounted on its server and the overlay loaded. The extension is one more way to open the devtools. It does not replace the setup. Start with Angular CLI and Express or Vite and Analog. The manifest setsminimum_chrome_version to 111.
The extension lives in the extension/ folder. You build it from source.
The repository itself needs Node.js 24 or later and pnpm 10 or later.
Run pnpm install in the root of the repository.
Run pnpm extension:build. It builds the devtools UI and copies it into extension/ui.
Go to chrome://extensions and turn on Developer mode.
Click Load unpacked and select the extension/ directory.
The Angular DevTools panel appears next to the built-in panels.
git clone https://github.com/santoshyadavdev/angular-devtools.git
cd angular-devtools
pnpm install
pnpm extension:buildBuild the extension covers the build and the store package in detail.
A content script checks each page for Angular: an ng-version attribute or a window.ng global. It checks once, then retries for a few seconds for apps that bootstrap late. When DevTools opens, the extension also runs the same check in the inspected page, and again after each navigation. The extension creates the panel only on Angular pages.
The panel looks for the devtools server on the origin of the inspected page. It tries these paths in order:
| Path | Mounted by |
|---|---|
/__ng-devtools/ |
A panel mounted with initDevframe() |
/__devframes/ng-devtools/ |
The Express hub or the Vite plugin |
/__devframe/ |
A bare devframe mount |
/ |
A devframe served at the root |
Under each path it asks for __devframe/__connection.json, then __connection.json. It connects the UI to the first path that answers with a connection file. Each request times out after 1.5 seconds.
If no path answers, the panel says "No devtools server answered", lists every URL it tried and links to the setup instructions.
The panel only connects to pages served over http or https. On other pages it says so and stops.
The extension can reach loopback hosts from the start. For any other host, such as a LAN IP or a tunnel, the panel shows an Allow access button instead of looking for the server. Click it and confirm the Chrome prompt. The panel then looks for the server again. See Host access for what the button grants.
The overlay gives each page an id. The panel passes the id of the page it inspects to the UI. If several tabs run the same app, the panel shows the tab you inspect, not the one that reported last.
When the inspected page navigates, the panel shows "Detecting Angular app…", looks for the server again and reconnects.
While the Components tab is open, select an element in the Chrome Elements panel. The Components tab selects the component that hosts that element (the element itself, or the nearest ancestor that is a component host). It expands the parent rows, clears the filter if it hides the row, and scrolls the row into view. On other tabs, the Elements selection does nothing. It also does nothing when inspectors.components is false in the configuration.
This needs the overlay on the page, since the overlay answers which component hosts the element.
The manifest asks for no permissions. Its host permissions cover loopback hosts only, over HTTP and HTTPS:
| Host | Covers |
|---|---|
*.localhost |
localhost and every subdomain, such as app.localhost |
127.0.0.1 |
The IPv4 loopback address |
[::1] |
The IPv6 loopback address |
Other hosts are optional host permissions. Allow access asks Chrome for the host of the inspected page only, on the scheme of that page (http or https) and on any port. The extension never asks for all hosts at once.
Granting the extension a host doesn't change what the devtools server accepts. The server still applies its own checks. The Vite plugin, for example, only answers requests from a loopback address. See Access and redaction.
The Vite plugin and the Express hub accept the extension's chrome-extension:// origin by default. If your Express hub passes its own allowedOrigins list, add chrome-extension://<id> to it. The ID is on the extension card in chrome://extensions.
The content scripts are wider. Two of them run on every page. They check for an ng-version attribute or window.ng, and pass the Angular version to the extension. They don't read or change anything else.
ng-version attribute or exposes window.ng, which development builds do. Then close and reopen DevTools, or reload the page.
The page is not on a loopback host. Click Allow access to let the extension reach that host. Chrome asks you to confirm.
None of them served a connection file. Check that the server of the page mounts the devtools and that the server accepts the request. See Access and redaction.
Open the Components tab first, and check that the overlay is loaded. Elements outside any component select nothing.
No. The overlay still adds the button to the page. Use the button or the panel, whichever you prefer.
The build, the zip and the store package.
Which origins the devtools trust.