Cannot see console log from webview


#1

I create main window containing webview

mainWindow = new BrowserWindow({width: 1200, height: 700});
mainWindow.loadUrl('file://' + __dirname + '/index.html');

index.html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <webview src="webview.html"></webview>
</body>
</html>

webview.html:

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <script>
        console.log('foobar');
    </script>
</head>
<body>
    <p>Webview content</p>
</body>
</html>

Why I cannot see the message ‘foobar’ in dev tools’ console window?


#2

#3

As described here: http://electron.atom.io/docs/v0.30.0/api/web-view-tag/ you will have to register to a specific DOM event from your webview:

webview.addEventListener('console-message', function(e) {
  console.log('Guest page logged a message:', e.message);
});

#4

To improve upon the current answer, the following code will put out log/error messages that trace back to the origin JS file and line, as well as the logged message.

webview.addEventListener('console-message', function(e) {
	var srcFile = e.sourceId.replace(/^.*[\\\/]/, '');
	console.log('webview logged from ' + srcFile +'(' + e.line + '): ' + e.message);
});