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

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


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.


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


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.