Mastering the Sources Tab in Safari Web Inspector

This article provides a quick overview of how developers can streamline their debugging workflow using the Sources tab in the Safari Web Inspector. Specifically, it explains how the Sources tab supports setting event breakpoints to pause on specific browser interactions, utilizing symbolic breakpoints to track function calls by name, and using JavaScript pretty-printing to transform minified code into a readable format.

Event Breakpoints

Event breakpoints allow you to pause JavaScript execution whenever a specific DOM or browser event is triggered, without needing to know where the event listener is defined in the code.

To use event breakpoints in the Sources tab:

  1. Locate the Breakpoints section in the left navigation sidebar.
  2. Click the + (plus) button at the top right of the Breakpoints section.
  3. Select Event Breakpoint... from the dropdown menu.
  4. Choose the type of event you want to intercept. You can pause on broad categories—such as all Animation Frame, Interval, Listener, or Timeout events—or choose Event to type in a specific DOM event name, like click, submit, or keydown.

Once set, Safari will automatically pause code execution the moment that event fires, jumping directly to the line of JavaScript handling the event. You can right-click the breakpoint to edit it, allowing you to add specific conditions, ignore counts, or custom actions like logging a message to the console instead of pausing.

Symbolic Breakpoints

Symbolic breakpoints are designed for situations where you know the name of the function you want to debug, but you do not know which file it resides in, or the function is loaded dynamically. Instead of attaching a breakpoint to a specific line number, a symbolic breakpoint attaches to the function name itself.

To configure a symbolic breakpoint in the Sources tab:

  1. Go to the Breakpoints section in the left sidebar and click the + button.
  2. Select Symbolic Breakpoint... from the menu.
  3. Type the exact name of the function (the symbol) into the input field.
  4. Toggle the Case Sensitive or Regular Expression options if you need to broaden or narrow the match criteria.

Whenever any function matching your specified symbol is called anywhere in the application—whether in your own scripts, third-party libraries, or native Web APIs—the Web Inspector will pause execution right as the function is invoked.

JavaScript Pretty-Printing

Production websites usually serve minified JavaScript, which strips out whitespace, removes comments, and crams thousands of lines of code onto a single line. This makes reading the code and setting standard line-of-code breakpoints nearly impossible. The Sources tab solves this with built-in JavaScript pretty-printing.

To use JavaScript pretty-printing:

  1. Select the minified JavaScript file from the file tree in the Sources tab sidebar so it opens in the central code editor pane.
  2. Locate the { } (curly braces) icon in the action bar at the top of the editor pane.
  3. Click the { } icon to format the file.

Safari will instantly parse the minified script and reformat it with proper indentation, spacing, and line breaks. Once a file is pretty-printed, you can easily read the logic, search through the file, and click the line numbers in the gutter to set standard breakpoints just as you would with unminified source code.