Angular DevTools is a browser DevTools extension for debugging and profiling Angular applications.
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 pnpm:
npm install -g pnpm
Third, install NPM dependencies:
pnpm install --frozen-lockfile
Now you should be ready to build the DevTools extension.
To run the extension in development mode run:
pnpm 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.
Before running end-to-end tests, you need to start the development server using:
pnpm 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:
pnpm devtools:e2e:open
To run Cypress tests headless, use:
pnpm devtools:test:e2e
You can build the release version of Angular DevTools for either Chrome or Firefox with:
pnpm devtools:build:chrome:release
pnpm devtools:build:firefox:release
Either way, the built extension will be at dist/bin/devtools/projects/shell-browser/src/prodapp.
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.