70

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?

Blake Scholl
  • 921
  • 1
  • 7
  • 10
  • Can you unminify the javascript and do it again? http://stackoverflow.com/questions/822119/online-tool-to-unminify-decompress-javascript – Rikon Sep 09 '11 at 18:50

5 Answers5

169

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.

serg
  • 109,619
  • 77
  • 317
  • 330
  • 8
    This tip is awesome, don't think I would have figured this out on my own. – ZenLikeThat Jul 06 '12 at 20:12
  • 27
    No, it doesn't stay prettified –  Apr 01 '14 at 21:18
  • 27
    didn't worked for me. It stays prettified but breakpoints are never reached, the minified script is always executed. – coding_idiot Dec 22 '14 at 11:24
  • 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 :) – Fetchez la vache Apr 01 '15 at 08:17
  • 4
    For some reason this doesn't work for everyone: https://code.google.com/p/chromium/issues/detail?id=415406 – Tony Topper Apr 09 '15 at 18:24
  • Way cool! I was completely unaware of the `{}` function in the first place. Great! – Per Lundberg Jul 23 '15 at 20:26
  • 8
    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 – zod Oct 12 '16 at 07:33
5

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

Mike Samuel
  • 118,113
  • 30
  • 216
  • 245
2

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.

Jerin K Alexander
  • 285
  • 6
  • 16
0

For chrome users, you'll want to enable automatic pretty print in the experimental features.

enabling automatic pretty print

setting your breakpoint should work now.

Eyo Okon Eyo
  • 16,326
  • 2
  • 13
  • 17
-3

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

Harish N
  • 43
  • 1
  • 5
  • 1
    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. – Lucio Mollinedo Dec 12 '17 at 20:34