How to set a breakpoint on a minified JS function in Chrome or Safari?

Question

I'd like to set a breakpoint in a "Cart.add" function in the Chrome or Safari JavaScript debuggers. Problem is, this function is defined in a large minified JS file, and doesn't exist on a line by itself.

Some documentation says that the WebKit-based debuggers support "break" or "debug" commands in the debug console, but those don't seem to work in newer versions of the debugger.

Setting a breakpoint on that line of the JS file doesn't work either, since there are lots of functions on that line.

Any suggestions?

Solution 1

In Chrome when you open Scripts tab you can prettify selected file by clicking on { } button ("Pretty print") at the bottom. After that you can find your line and set a breakpoint. The code will remain prettified with breakpoints in place after a page refresh.

Solution 2

The debugger statement is probably what you're looking for.

Evaluating the DebuggerStatement production may allow an implementation to cause a breakpoint when run under a debugger. If a debugger is not present or active this statement has no observable effect.

The production DebuggerStatement : debugger ; is evaluated as follows:

1. If an implementation defined debugging facility is available and enabled, then

   a. Perform an implementation defined debugging action.

   b. Let result be an implementation defined Completion value.

2. Else

   a. Let result be (normal, empty, empty).

3. Return result.

The break statement is for exiting loops and switch statements and has nothing to do with debugging.

The real solution though is to not bugger your code in the first place :)

Solution 3

1) The error message should give you a link to the source code in the Sources tab. Click on that link to get taken to the transpiled code.

2) Click the "{ }" icon at the bottom of the source code in the Sources tab to format the transpiled code for easier debugging.

3)Stick a breakpoint at the line that is failing.

4) Reproduce the problem again. This time, it should break at the breakpoint before the error occurs.

5) Examine the local variables and call stack to determine what exactly is going wrong.

Comments

[ZenLikeThat]

This tip is awesome, don't think I would have figured this out on my own.

[Admin]

No, it doesn't stay prettified

[coding_idiot]

didn't worked for me. It stays prettified but breakpoints are never reached, the minified script is always executed.

[Fetchez la vache]

Working as @serg described in chrome v 41.0.2272.101 m which at the time of writing chrome thinks is up to date. Great tip :)

[Tony Topper]

For some reason this doesn't work for everyone: code.google.com/p/chromium/issues/detail?id=415406

[Per Lundberg]

Way cool! I was completely unaware of the {} function in the first place. Great!

[zod]

This feature used to work, but these days (53.0.2785.143) I can no longer get it to work. Would love to know if its a bug / loss of functionality in chrome, or a setting I have broken / something I am doing wrong

[Lucio Mollinedo]

Please take into account that when you're dealing with minified js files, it usually means you're debugging something in production. Most of the time you don't have access to that environment to replace the script with the beautified version, or even if you do, you should not do it.