CODEWITHSUNDEEP
javascriptsource-maps
Paul Carey
Paul Carey

Reputation: 1798

How do I debug client errors in JavaScript?

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

Upvotes: 2

Views: 383

Answers (3)

dumbmatter
dumbmatter

Reputation: 9673

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.

Upvotes: 1

RandomUs1r
RandomUs1r

Reputation: 4190

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.

Upvotes: 0

Spudley
Spudley

Reputation: 168715

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

Upvotes: 0

Related Questions