mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
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 |
||
|---|---|---|
| .. | ||
| dependency-injection | ||
| diffing | ||
| directive-explorer | ||
| injector-tree | ||
| profiler | ||
| router-tree | ||
| tab-update | ||
| BUILD.bazel | ||
| devtools-tabs.component.html | ||
| devtools-tabs.component.scss | ||
| devtools-tabs.component.ts | ||
| devtools-tabs.spec.ts | ||