How do I debug client errors in JavaScript?

Question

I have a window.onerror handler that sends JavaScript errors to our server. I was hoping to analyse these by using source maps to link errors in the minified source back to the original code, but it seems Chrome and Firefox only provide line numbers on error. As far as I can see, source maps are not useful without a column number.

So, given a line number of minified source and an error message of the form x is undefined , what steps can I take to debug?

(If it makes any difference, I'm using the asset pipeline in Rails 3.2).

Answer 1

Chrome (and IE10) will now give you the column number as the fourth argument in the window.onerror callback. Here's the Firefox bug for adding column numbers , but it doesn't look too promising.

Answer 2

If you want to use Source Maps, you'll need to download Chrome Canary (ie the pre-release dev version of Chrome).

It's an experimental feature and isn't in the main Chrome release yet. (even in Canary it has to be switched on explicitly in the browser options).

Answer 3

I recommend using firebug with firefox, here's a tutorial to get you started:

http://thecodecentral.com/2007/08/01/debug-javascript-with-firebug

I've used this a few times to debug really bad JS, however I usually just do this:

Firefox drop down > Web developer > Web console. This will show you the line # and the error being thrown (most important), which I find is typically sufficient without going through the debugging effort.