mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00

Files

T

AleksanderBodurri f9e59007ce fix(devtools): regressions in component tree (#59873 )

This commit solves two cases

Bug: When a directive of the same name is selected, the property view tab would not update properly. This was caused by a signals refactor that changed the behaviour of a string input property to not re-render because the underlying signal did not change (string equality). This is fixed by converting this input into an object.

Bug: When a selected element is removed from the component tree, DevTools would not rerender the component tree properly and deselect that component. Now if DevTools detects that a component is removed, it re-renders the tree and deselects the component.

PR Close #59873

2025-02-12 09:22:30 -08:00

cypress

refactor: update license text to point to angular.dev (#57901 )

2024-09-24 15:33:00 +02:00

docs

docs: fix spelling of "set up" (#58362 )

2025-02-03 13:50:49 -08:00

projects

fix(devtools): regressions in component tree (#59873 )

2025-02-12 09:22:30 -08:00

src

docs: update license URL from angular.io to angular.dev and year of license to 2025 (#59407 )

2025-01-09 10:27:54 -05:00

tools

refactor: update license text to point to angular.dev (#57901 )

2024-09-24 15:33:00 +02:00

.gitignore

…

BUILD.bazel

refactor(devtools): consolidate devtools global styles into 1 file (#49001 )

2023-02-14 20:25:23 +01:00

cypress.json

…

packages.bzl

…

README.md

docs(devtools): update README to be more clear for extension reviewers (#55406 )

2024-04-23 13:02:49 -07:00

styles.scss

refactor(devtools): use dark scrollbars in dark mode (#56225 )

2024-06-10 13:55:43 -07:00

tsconfig.json

refactor(devtools): remove unused imports. (#58057 )

2024-10-04 13:27:34 +00:00

tsconfig.spec.json

fix(devtools): issue where backendReady race condition causes Angular not detected error (#54805 )

2024-03-26 09:19:06 -07:00

tslint.json

…

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

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
yarn devtools:build:firefox

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.