d26a91fddc
This change is a proof of concept of how the new Chrome DevTools Performance extension API (https://bit.ly/rpp-e11y) can be used to surface Angular runtime data directly in the Chrome DevTools Performance panel. Specifically, it implements the following changes: 1. Use the profiling status notification API to toggle the Timing API: The notification API is implemented under the chrome.devtools.performance extension namespace and consits of two events: ProfilingStarted and ProfilingStopped, dispatched when the Performance panel has started and stopped recording, respectively. This API is used to enable the Timings API when the recording has started in the Performance panel and disable it when recording has stopped. 2. Use the User Timings `detail` field format specification of the Performance extension API (https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/User_timing) to inject data collected by the Angular Profiler into the Performance panel timeline. Angular Profiler uses several hooks to measure framework tasks like change detection. With this change, this measurements are visible in the same context as the runtime data collected by the browser in the Performance Panel timeline. Note: to enable the user timings to be collected in the first place, one needs to open the Angular DevTools panel so that the related artifacts are loaded in the page. This shortcoming can be fixed in a follow up so that the extra step isn't necessary. PR Close #55805 |
||
|---|---|---|
| .. | ||
| cypress | ||
| docs | ||
| projects | ||
| src | ||
| tools | ||
| .gitignore | ||
| BUILD.bazel | ||
| cypress.json | ||
| packages.bzl | ||
| README.md | ||
| styles.scss | ||
| tsconfig.json | ||
| tsconfig.spec.json | ||
| tslint.json | ||
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.