Option to always show webview developer tools while developing a custom editor extension

[Tyriar]

I have set up this keybinding to lessen the pain of opening up the webview's devtools every time I open an image tab:

{ "key": "ctrl+shift+i",     "command": "workbench.action.webview.openDeveloperTools", "when": "activeCustomEditorId == 'luna.editor' && !isMac" },
{ "key": "cmd+alt+i",        "command": "workbench.action.webview.openDeveloperTools", "when": "activeCustomEditorId == 'luna.editor' &&isMac" },

It would be much nicer if we could have some way while developing an extension to open the webview devtools for a particular webview automatically when the webview is shown. This would probably make the most sense as part of the launch.json, eg:

    {
      "name": "Extension",
      "type": "extensionHost",
      "request": "launch",
      "runtimeExecutable": "${execPath}",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}/..",
        "--autoOpenDevtoolsForWebview=luna.editor"
      ],
      "outFiles": [
        "${workspaceFolder}/out/**/*.js"
      ]
    },

[Tyriar]

@connor4312 is there a better way to do this? I see #96626, is there a way to debug extension contributed webviews within VS Code?

[connor4312]

Yes, you can do this. Check out #101320

[Tyriar]

@connor4312 "webview.experimental.useIframes": true seems to break the extension, there's no errors in the console and debugging doesn't want to work.

Maybe I'm doing something wrong wrt debugging though, I do have a warning in launch.json still:

[connor4312]

Set your launch type to pwa-extensionHost isntead of extensionHost

"webview.experimental.useIframes": true seems to break the extension,

cc @mjbvz

[mjbvz]

Please open a separate issue if something about iframe based webviews is not working

[Tyriar]

It works 😍 I'm having issues getting ts breakpoints bound but that's likely a sourcemaps issue on my end since js breakpoints are hit. Thanks for the help!