Allow profiling of iframes

[mgechev]

Sometimes different iframes in an Angular app contain Angular apps by themselves. We should support profiling/inspection of individual iframes.

This feature should be relatively easy to implement:

• We observe the page and find the individual iframes (probably mutation observers would be the way to go)
• We send the iframes to the DevTools UI and provide a select, similar to the one in Chrome DevTools
• When the user selects a particular iframe, we inject the backend & its runtime in them and stop handling messages from the main page (we should only handle messages for updates of the page iframes)

[mgechev]

An alternative is to inject the backend to all the iframes and keep track of where a particular event is coming from. We can discuss this during our next meeting.

[colemarkham]

I'm trying to debug our Angular app which runs as an iframe within Microsoft Teams (on the web, not the desktop app). I assume this is currently not supported?

[jdugas]

I have an Angular site I'm creating that will always live as an iframe in a non-Angular site. Is there a way to make angular devtools work in this scenario?

(I can edit the iframe, but not the parent website.)

[yelhouti]

An other use case I am facing is that I want to debug a cypress e2e test (which runs the app inside an iframe) if I had this it would have really helped.