Chrome extension: debugging dev tools tab or how to make console.log

As you may guess

console.log

doesn't work in the code of your new dev tools tab. Instead of that I used alert. If the thing which you want to see is something primitive, it's easy. Just pass it to alert function. If not you can use

alert(JSON.stringify(obj));

Anyway, using alert is not the coolest thing, mainly because you have to comment those lines or manually remove them. Also, it's a little bit irritating from user experience point of view. What I did is to send a message to the background page. That's in one of my dev tools scripts:

	// console.log in the background page
	var bglog = function(obj) {
		if(chrome && chrome.runtime) {
			chrome.runtime.sendMessage({type: "bglog", obj: obj});
		}
	}
	

Then in the background page:

	var onMessageListener = function(message, sender, sendResponse) {
	    switch(message.type) {
	        case "bglog":
	            console.log(message.obj);
	        break;
	    }
	    return true;
	}
	chrome.runtime.onMessage.addListener(onMessageListener);
	

Really simple, but the background script could be easily inspected. Open chrome://extensions, find your extension and you will see:

Inspect views: _generated_background_page.html

Click on that link and a new dev tools will be opened. The console there accepts logs from the background script.