1

It's not unusual for me to stupidly misplace a bracket/brace and cause the entire content script not to load. When this happens there is no error anywhere - the console is empty. This happens with a content.js direct chrome extension and with crossrider's extension.js (also in chrome). Being aware of the result, I know something somewhere in my file is wrong but manually looking for it is quite simply a retardedly stupid dumb way of debugging. The only way I've found to narrow down the problem is...

  1. Create a temporary html file, include the content script directly, wait for that sweet line number to be displayed.

  2. Upload the file to crossrider's web interface and let its JS parser show me the line with the error.

The above is slow and cumbersome and needs to be taken out behind the shed with a shotgun.

Where can I go for chrome to tell me 1. there's a problem with the content script and 2. which line or even just which type of bracket I'm missing?

jozxyqk
  • 16,424
  • 12
  • 91
  • 180
  • 1
    It does not directly answer your question (but is a great advice nonetheless): Use an editor with JS linting support. (E.g. look for a JSHint plugin for the editor you are using - or use a more sophisticated editor if it does not support such stuff.) – gkalpak Dec 17 '13 at 09:27
  • +1 for Editor with linting support. It will save you heaps of time by catching errors early. Personally I'm using the [syntastic vim plugin](https://github.com/scrooloose/syntastic) backed by [jshint](https://github.com/jshint/jshint). – Rob W Dec 17 '13 at 10:18

1 Answers1

0

In your content script add the line debugger; at the beginning of the script. The error messages are printed on the javascript console of the webpage to which your script is injected. So if your content script runs on abcd.html, open abcd.html, and open the Javascript console for this page. Then trigger whatever it is that runs your content script - button clicking etc.

Edit: If your script is to run on background.html, then to catch parse errors in the script,

  1. Open the Extensions page in chrome.
  2. Ensure Developer Mode is enabled.
  3. Load the unpacked extension.
  4. Expand your extension by clicking the arrow on the left, on the chrome extensions page.
  5. Click on the link to background.html given there.
  6. The page opens. If there are errors in the content script, it shows the error message and line number in the console, and fails to open the background.html page.
sanjeev mk
  • 4,276
  • 6
  • 44
  • 69
  • Thanks, `debugger` works great if the js file parses correctly and gets to the point where it *can* run and hit that line. With missing brackets the js file is completely broken. The script doesn't parse and `debugger` doesn't help (even if it's the very first thin in the file). – jozxyqk Dec 17 '13 at 09:43
  • No. Even parse errors are detected. Example, I just got this "Uncaught SyntaxError: Unexpected end of input menuitem.js:100" . I removed a closing brace bracket in the script and got that. You have to be on the target page , with developer tools opened. Alternatively, if you're unable to get that working for some reason, use http://jslint.com/ – sanjeev mk Dec 17 '13 at 09:57
  • For background.html , you've to manually open the background page from the Extensions page. Check answer. – sanjeev mk Dec 17 '13 at 10:02
  • @jozxyqk: JSLint is very unlikely to help (as it will probably find a few dozens more errors. Try **[JSHint](http://www.jshint.com/)** instead. (Just my 2 cents.) – gkalpak Dec 17 '13 at 10:08
  • As I said, `debugger` does not work for me. This is a content script, not background (injected for each loaded page). I've put debugger at the start of a script, removed a `}` brace or the closing `)` from an if statement for example and.. no content script.. no errors. – jozxyqk Dec 17 '13 at 11:05
  • @jozxyqk That's strange really..Actually, there is no different dev environment for chrome extension development. Debugging content script parse errors is done like for any other js code - Developer Tools Console of Chrome. – sanjeev mk Dec 17 '13 at 11:10