Cannot get Chrome popup.js to use console.log

Javascript Problem Overview

I use console.log heavily to debug when writing JS. I am trying to use it in writing chrome extensions but it is not working. Is there some trickery involved here???

popup.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.10.0.custom.min.css" />
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
	<script type="text/javascript" src="js/popup.js"></script>
</head>

<body style="width: 200px">
</body>

popup.js

console.log('test1');
$(document).ready(function() {
	console.log('test2');
});

Neither of these appear in the JS debugger.

Javascript Solutions

Solution 1 - Javascript

I had this problem as well initially! Make sure you have correct developer tools window opened... I mean, you might have opened the developer tools window for the main page rather than the extension's page (ie. popup.html).

To open the developer tools window for inspecting the popup, right click on the popup and then click 'inspect element'... That opens the right developer tools window.

I had made this stupid mistake initially and was stuck.. :)

Attributions