angular/devtools/projects/ng-devtools-backend
Andres Olivares d26a91fddc refactor(devtools): Use Chrome DevTools Performance extension API (#55805)
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
2024-07-31 16:04:52 +00:00
..
src refactor(devtools): Use Chrome DevTools Performance extension API (#55805) 2024-07-31 16:04:52 +00:00
BUILD.bazel refactor(devtools): bring the angular devtools directory into the root bazel workspace 2022-01-26 16:35:31 -05:00
index.ts refactor(devtools): run tslint --fix on devtools codebase 2022-01-26 16:35:31 -05:00
README.md docs: update the Angular DevTools auto-generated READMEs (#45884) 2022-05-05 15:29:27 -07:00
tslint.json refactor(devtools): prepare codebase for migration to angular/angular repo 2021-11-21 20:23:18 -05:00

Angular DevTools Backend

This directory contains the "backend" of Angular DevTools. This module interacts with the framework debugging APIs and responses to requests from the Angular DevTools extension.