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

ditch the minified code while debugging and use the full-blown original code. — Marc B
– Marc B, Commented May 8, 2013 at 15:46
Expand your minified code with jsbeautifier.org, then check the line number of the error, if you can't look at the original source. — Elliot Bonneville
– Elliot Bonneville, Commented May 8, 2013 at 15:49
Further to this, if you only have the minified code for some reason, you can stick it through JSBeautifier to make it readable: jsbeautifier.org — MasNotsram
– MasNotsram, Commented May 8, 2013 at 15:49
I assume you've read sites like this and this. The screenshots in both those pages show Chrome giving column numbers for errors and thus making Source Maps work, so it clearly is possible. However I note that they describe Source Maps as being an experimental feature you need to enable explicitly in Chrome Canary, so perhaps that's what you're missing. — Spudley
– Spudley, Commented May 8, 2013 at 15:55

dumbmatter · Accepted Answer · 2013-10-05 18:21:44Z

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.

answered Oct 5, 2013 at 18:21

dumbmatter

9,7137 gold badges46 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Carey Over a year ago

Interesting, thanks for commenting. I ultimately ended up preserving line numbers, it seemed a reasonable compromise.

Spudley · Accepted Answer · 2013-05-08 16:15:38Z

0

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

answered May 8, 2013 at 16:15

Spudley

169k39 gold badges240 silver badges309 bronze badges

1 Comment

Paul Carey Over a year ago

Source maps work just fine for me locally - my issue arises when I try to debug an error that occurred for a user. The window.onerror handler is called with just three params, none of which is the column. developer.mozilla.org/en-US/docs/DOM/window.onerror

RandomUs1r · Accepted Answer · 2013-05-08 16:39:56Z

0

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.

answered May 8, 2013 at 16:39

RandomUs1r

4,2182 gold badges27 silver badges47 bronze badges

Collectives™ on Stack Overflow

How do I debug client errors in JavaScript?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related