How to View JavaScript Errors in Google Chrome

In the slim and clean Google Chrome (beta) interface JavaScript issues are not easily detectable unless your page or site is visually broken. Much like FireFox and Safari, a tester must open the “JavaScript console” and keep it in visible view while they test in order to catch JavaScript errors. Chrome’s Javascript console is a lot like Safari’s, but is a tad worse (see the gotchas at the bottom of this post).


My fellow testers, here is how to get to that JavaScript console and monitor for JavaScript errors while you test:
 


Click the page icon to the right of the URL bar. Select “Developer” and then “JavaScript console” from the menu:


image



In the top of the JavaScript console window click the “Resources” button:


image



Start testing. When an error occurs you’ll see a red icon with a number in it next to the page that the error occurs:


image



You’ll also see a log of the error in the bottom of the JavaScript console window, if you click the provided link it will take you to the line of code where the error occurs:


image


Also, if you click the page in the “Resources” section the offending line of JavaScript and the error will be displayed:


image



As of now, I see two gotchas in Google Chrome Beta when attempting to detect/find JavaScript errors:



  1. The “JavaScript Console” reports more than JavaScript issues which makes sorting/distinguishing JavaScript errors from other reported HTML style of formatting errors tough. A cheesy visual helper is to also open up the “Debug JavaScript” window (found in the same Page > Developer menu to the right of the URL bar) and watch for new line items to show up in the log. Those line entries are associated with JavaScript errors, unless..
  2. You changes sites/domain, in this case the previously opened JavaScript windows won’t display data for the new site. You have to close those instances and re-open them to monitor the new site.  You know that the monitoring has stopped when you see in the “Debug JavaScript” window the following log entry: “lost connection to tab”

One Response to How to View JavaScript Errors in Google Chrome

  1. If you love Chrome’s stripped down Web Inspector, you will love the full featured version in the WebKit nightlies. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *