Deep Link Performance Panel to Component in Angular DevTools #63960
Description
Which @angular/* package(s) are relevant/related to the feature request?
No response
Description
Chrome is experimenting with deep linking from the Performance Panel custom track to an installed browser extension: https://issues.chromium.org/issues/427430112#comment7
Proposed solution
Thinking through where there might be opportunities for Angular, I think it would be very cool if we could link a performance mark to the specific component instance which was being invoked for anything involving a particular component (ex. ngOnInit). This would be helpful for devs to identify which component instance is slow for situations where there are multiple instances and only one is actually causing performance issues.
This would likely require us to define a route in Angular DevTools and support deep linking to a specific component ID, then creating a deep link to that route with the relevant component ID.
I don't think we really have a stable component ID which would be useful for this mechanism (we have component IDs, but they're more like component class IDs, not component instance IDs). So we'd probably need to create a monotonic counter managed as part of the debug setup and communicated to Angular DevTools.
Alternatives considered
We could attempt to link to the host element in the browser DevTools Elements Panel, which would not require Angular DevTools to be installed. I'm not sure if it's possible to do that today and might be a good fallback behavior and/or second deep link to include?
There's also potentially other use cases for deep linking like redirecting to Angular DevTools Profiler Panel, but I suspect that would be a bit harder to actually land and probably not provide much additional context to users.