88

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.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
gdanko
  • 1,922
  • 4
  • 20
  • 31

1 Answers1

203

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.. :)

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
Sandeep Raju Prabhakar
  • 18,652
  • 8
  • 35
  • 44
  • 1
    Is there a way to send it to the background page's JS debugger? I tried doing this: chrome.extension.getBackgroundPage().logIt("test log entry"); but nothing happens. – gdanko Feb 13 '13 at 17:41
  • 1
    @gdanko check out the answer to this question. It has the solution i guess http://stackoverflow.com/questions/3829150/google-chrome-extension-console-log-from-background-page – Sandeep Raju Prabhakar Feb 13 '13 at 17:46
  • 8
    @gdanko `chrome.extension.getBackgroundPage().console.log(...)` works, except that you'll also need to send exceptions to your background page. `try {} catch {}` them and `throw` into your background page at least to know that they happened. – polkovnikov.ph Jan 31 '14 at 11:32
  • Thanks a lot! I was looking at the page developer tools rather than the dev tools for popup which I did not know has separate dev tools. – Chi Apr 15 '21 at 08:10
  • how silly we can be sometimes, we still doing mistakes like this in 2022 xD – OMi Shah Jul 25 '22 at 19:47
  • 1
    How would anyone easily know this, without seeing this SO post? ;( – Kalnode Dec 17 '22 at 17:40