Webview with iframes debugging/inspecting partially broken

[vidorteg]

• VSCode Version: 1.48.2
• OS Version: Windows

Steps to Reproduce:

The "VS Code - Microsoft Edge (Chromium) Tools" extension development is partially broken, previously we were able to see console errors and associated resources but after we migrated to the new webview protocol it does not work anymore. Webview content gets redendered correctly but debugging/inspecting is broken. I think this is associated to using iframes inside a webview, I set up a small repro app that shows what I'm seeing.

1. Clone the following repository which contains a Simple Repro App (Based on the sample-webview cat application):
   https://github.com/vidorteg/webview-context-lost
2. npm install && npm run compile
3. Open VSCode > Debug > Run Extension
4. Run the Cat Coding: Start cat coding session to create the webview.link to image
5. Verify that the view also shows an iframe embedded in the webview (with some content)link to image
6. Open Developer Tools to debug the webview. link to image

Expected

1. Should be able to select HTML elements inside the iframe
2. Should be able to see console context (errors and warnings)
3. Should be able to see resources associated with the iframe
   All this is expected based on what is stated in here:
   https://code.visualstudio.com/api/extension-guides/webview#inspecting-and-debugging-webviews

Actual

1. Cannot see HTML components in the Elements View or select them using the overlay.link to image
2. An error is thrown inside the script loaded in the webview but it is not shown on the Devtools Console (or anywhere) link to image
3. Resource associated with the iframe (inspector.html) is not shown in the Devtools link to image

Does this issue occur when all extensions are disabled?: Yes

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• feature request: API to set URL of WebView (#70339)
• Using iframe based webviews on desktop (#83188)
• Support search in iframe based webview (#96307)

[mjbvz]

You need to use the Developer: open webview developer tools command to debug webviews:

The normal developer tools do not show webview content in much detail

[vidorteg]

Hi Matt,
Yes, that is exactly what I'm using on Repro steps #6, please let me know if you need more details :)

[vidorteg]

Just realized that this is now closed,I think that it still requires some follow up as I'm still seeing the broken behavior on the latest stable. @mjbvz is there any more information I can help with?

[mjbvz]

Are you sure because the description sounds like the wrong developer tools? Can you share a screenshot of when its not working

[vidorteg]

Hi @mjbvz,

I added some images to the steps on the original post, please let me me know if there is anymore information I can provide.

[mjbvz]

Thanks. That is the correct dev tools. I suspect the issue is related to using an iframe in a webview (which should be avoided when possible)

The dev tools come from Chrome (by way of electron) so this is not in the scope of VS Code itself. Marking as upstream