CODEWITHSUNDEEP
google-chrome-extensiongoogle-chrome-devtools
user1340531
user1340531

Reputation: 740

Chrome devtools extension console

I included this in my chrome extension manifest 

"devtools_page": "devtools.html"

And in devtools.html I include a devtools.js file which creates a panel

chrome.devtools.panels.create("Panel", "icon.png", "panel.html", function(panel){});

The panel is indeed created. And in panel.html I include a panel.js file in which I added a listener

chrome.devtools.network.onRequestFinished.addListener(function(details){
    console.log(details);
});

But where can I see the console output of the panel? Or how can I redirect it to the devtools console?

Upvotes: 12

Views: 5741

Answers (2)

Rob W
Rob W

Reputation: 348982

This message will be logged in the console of the developer tools. To view this console, detach the developer tools from the window, and press Ctrl + Shift + J.

Here's an picture:

1. Page (http://host/)
2. + Devtools instance for http://host
3.   + Devtools instance for chrome-devtools://devtools/devtools.html?... )

Your message is currently logged to 3 (the console of the devtools instance) instead of 2 (the console of the page). To log the string to the page, use the chrome.experimental.devtools.console API.

An alternative is to JSON-serialize your object, and use chrome.devtools.inspectedWindow.eval to log the result:

var obj = ...;
var str = JSON.stringify( obj );
chrome.devtools.inspectedWindow.eval('console.log(' + str + ');');

Upvotes: 25

Ciprian Mocanu
Ciprian Mocanu

Reputation: 2196

Another way to do it is to open the chrome devtools in a separate window (not on the side of the browser) and then press CMD + Option + i (for Mac) and then you get another devtools for that devtools. There you can debug and see console logs easier :)

Upvotes: 3

Related Questions