Commits on Jul 18, 2024

1. feat(devtools): Use Chrome DevTools Performance extension API …

   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.

   

   and-oli committed Jul 18, 2024
   Configuration menu

   • View commit details
   • Copy full SHA for 5cf1a83
   • Browse repository at this point

   Copy the full SHA

   5cf1a83 View commit details

   Browse the repository at this point in the history