mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00

History

Hryhorii Avcharov a2f366f629 feat(devtools): add transfer state tab (#62465 ) Add transfer state tab, which is taking transfer state script by using APP_ID. Created internal api ɵgetTransferState to retrieve transfer state value from app into devtools app. PR Close #62465		2025-07-22 08:41:10 -04:00
..
cypress	test(devtools): bump cypress timeout to 10 seconds (#62726 )	2025-07-21 16:35:39 -04:00
docs	docs: update Angular DevTools release docs (#62352 )	2025-06-30 07:36:19 +00:00
projects	feat(devtools): add transfer state tab (#62465 )	2025-07-22 08:41:10 -04:00
src	fix(devtools): add event tagging to prevent DDOS (#62645 )	2025-07-21 10:09:03 -04:00
tools	refactor(devtools): Migrate the devtools app to zoneless. (#62454 )	2025-07-17 13:55:36 -04:00
.gitignore	refactor(devtools): prepare codebase for migration to angular/angular repo	2021-11-21 20:23:18 -05:00
BUILD.bazel	build: move all rule/macro loading into devtools/defaults.bzl (#62627 )	2025-07-14 15:47:05 -07:00
cypress.json	refactor(devtools): bring the angular devtools directory into the root bazel workspace	2022-01-26 16:35:31 -05:00
README.md	test(devtools): revive cypress tests (#61972 )	2025-07-11 10:33:50 -07:00
tsconfig-test.json	refactor(devtools): use signal inputs for split component (#62550 )	2025-07-11 10:37:50 -07:00
tsconfig.json	build: set paths for devtools & adev (#62574 )	2025-07-14 14:11:09 -07:00
tslint.json	build(devtools): disable the "Rebase PR on target branch" circleci job so that the PR that merges the unrelated history of rangle/angular-devtools can be successfully merged into angular/angular	2022-01-26 16:35:30 -05:00

README.md

Angular DevTools

Angular DevTools is a browser DevTools extension for debugging and profiling Angular applications.

Developing Locally

Set up

Follow the instructions below to set up your Angular DevTools development environment. Note that all commands should be executed in the repository root, not devtools/. All file paths are also relative to the repository root.

Debian Linux, MacOS, and Windows via WSL should build successfully. Building natively on Windows without WSL is not supported at the moment.

To set up your development environment, first install the correct version of Node. If you have nvm set up, this can be done with:

nvm install

Second, install Yarn:

npm install -g yarn@1

Third, install NPM dependencies:

yarn --frozen-lockfile

Now you should be ready to build the DevTools extension.

Dev builds

To run the extension in development mode run:

yarn devtools:devserver

This would start a development server that you can access on http://localhost:4200. In development, Angular DevTools uses a "development shell." This is different from "chrome shell" in a way, that it runs the user's app in an iframe. DevTools then communicate with the user's app via message passing.

Running End-to-End Tests

Before running end-to-end tests, you need to start the development server using:

yarn devtools:devserver

You have two options for running cypress, you can use the interactive cypress UI or you can run Cypress in headless mode.

To open Cypress for Angular DevTools in interactive mode, run:

yarn devtools:e2e:open

To run Cypress tests headless, use:

yarn devtools:test:e2e

Release builds

You can build the release version of Angular DevTools for either Chrome or Firefox with:

yarn devtools:build:chrome:release
yarn devtools:build:firefox:release

Either way, the built extension will be at dist/bin/devtools/projects/shell-browser/src/prodapp.

Installation

For Chrome, you can install the extension from dist/bin/devtools/projects/shell-browser/src/prodapp by following the guide from here.

For Firefox, to load the extension, you can go to the about:debugging page, click the "This Firefox" option and then click the Load Temporary Add-on button. You'll have to select the manifest file in dist/bin/devtools/projects/shell-browser/src/prodapp directly.