How to set a breakpoint on a minified JS function in Chrome or Safari?
JavascriptDebuggingGoogle ChromeSafariWebkitJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
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 - Javascript
-
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.
-
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.
-
Reproduce the problem again. This time, it should break at the breakpoint before the error occurs.
-
Examine the local variables and call stack to determine what exactly is going wrong.
Solution 4 - Javascript
For chrome users, you'll want to enable automatic pretty print in the experimental features.
setting your breakpoint should work now.
Solution 5 - Javascript
If you have saved the webpage then beautify your js file using jsbeautifier.org which formats your entire script. Then replace your js content with the beautified version. From here you can debug your JS easily