angular/devtools
Doug Parker e63cd1f405 docs: update Angular DevTools release docs (#62352)
This makes few edits based on feedback and observations from a previous release:
1.  Moves `git pull` command before initial `git log` to make sure we're up to date before checking if a release is necessary.
2.  Updates both `git log` commands to limit to `fix`, `feat`, and `perf` changes. This ignores more than just `refactor`, such as `build`, `ci`, etc. and should be more meaningful to end users.
    *   I considered doing something with `Revert` commits, but opted not to. Instead, it will treat this just like their original commit. This does mean we might send a slightly more complicated changelog than it needs to be, but it's not worth making these commands even weirder.
3.  Removes install step prior to bumping the version numbers, as its just not needed and we have to reinstall later anyways.
4.  Switches PR target from `patch` to `minor`. We only need to merge this to the `main` branch, and it's not worth the effort to keep the `patch` branch in sync.
5.  Switches source code zip command to `git archive`. This is more portable than `zip *`, which depends on the shell configuration to determine what is included in `*` (mainly whether or not that includes dotfiles such as `.nvmrc` and `.bazelrc`).

PR Close #62352
2025-06-30 07:36:19 +00:00
..
cypress refactor(devtools): main nav (#62242) 2025-06-27 13:07:46 +00:00
docs docs: update Angular DevTools release docs (#62352) 2025-06-30 07:36:19 +00:00
projects release: bump Angular DevTools version to 1.0.36 (#62341) 2025-06-27 11:32:40 -07:00
src build: migrate devtools to use new sass ruleset (#62297) 2025-06-27 09:25:43 +00:00
tools build: migrate packages/compiler-cli to ts_project (#61826) 2025-06-03 11:41:52 +02:00
.gitignore refactor(devtools): prepare codebase for migration to angular/angular repo 2021-11-21 20:23:18 -05:00
BUILD.bazel build: migrate adev devtools package to use ts_project (#61210) 2025-05-08 09:38:30 -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 docs: adds --jobs 4 to Firefox release flags (#62015) 2025-06-12 13:48:39 +02:00
tsconfig-test.json build: migrate adev devtools package to use ts_project (#61210) 2025-05-08 09:38:30 -07:00
tsconfig.json build(devtools): fix ng-devtools source maps (#62042) 2025-06-24 14:06:25 +00: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

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

You can also run a standalone version of the demo app with:

yarn devtools:devserver:demo-standalone

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.

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.