"Open webview developer tools" not working in VS Code 1.56+?

Question

I'm developing a VS Code extension that uses a webview . Previously I could inspect and debug my webview using the Developer: Open webview developer tools command, which would open a new window with the Webview developer tools.

In VS Code 1.56 however, this command no longer opens a new window. What's going on and how can I debug my webview?

Answer 1

VS Code 1.56 updates the majority of webviews to use normal <iframe> elements instead of Electron's <webview> tag. This lets you use VS Code's standard, top-level developer tools ( which can be opened with the Developer: Toggle developer tools command) to debug and inspect your webviews:

This has a few benefits over Developer: Open webview developer tools :

• You can inspect multiple webviews from the same developer tools instance
• The developer tools no longer close when the webview goes away
• Errors and console messages from webviews are clearly printed in the standard developer console

Caveat

In VS Code 1.56, Webviews that enable search (with .enableFindWidget ) are still implemented using a <webview> tag, so you must still use the Developer: Open webview developer tools command to debug and inspect them.

We plan on migrating all webviews to use iframes sometime after 1.56