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?

Answer 1

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

Answer 2

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.