Inspecting a webview


#1

Is there a way to use devtools to inspect the contents of a webview in electron? Opening the devtools shows the top-level DOM. I can see the webview tag, but can’t see inside that.

Chrome/Chromimum provides a mechanism for switching to an iframe, but not a webview.

Googling for it brings up lots of stuff about remote bugging, Android, etc.


#2

You can use the <webview>.openDevTools() method. Calling this method will open a new dev tools window that’s specific to that webview, which you can use to inspect the DOM of the webview.

Be sure to call the method after the ‘dom-ready’. As is shown in the example under the webview methods.


#3

Many thanks, @asa. Note to self: RTFM better! I missed that in my readings.

For the record, <webview>.openDevTools() works. I used IPC to tell the renderer to open DevTools from main, since the renderer is the one that can see/find the webview.

So:

label: 'Toggle Developer Tools',
    accelerator: ( function() {
        if ( process.platform == 'darwin' )
             return 'Alt+Command+I';
        else
             return 'Ctrl+Shift+I';
        })(),
    click: function( item, focusedWindow ) {
         if ( focusedWindow )
               focusedWindow.webContents.send( 'openDevTools' );
         }
    }
]

Then in js that’s loaded by the page with the webview:

ipcRenderer.on( 'openDevTools', function() {
    document.querySelector( 'webview' ).openDevTools();
});

This works but I’m not sure it is correct.