How to Use Console Command Line API and Shortcuts in Safari Web Inspector

The interactive Console in Apple Safari Web Inspector is more than a standard JavaScript REPL for printing console.log() messages. Built directly into Safari’s WebKit developer core is the Command Line API—a suite of specialised convenience functions, variable aliases, and debugging utilities designed to accelerate DOM querying, event inspection, and runtime profiling. Rather than writing verbose document.querySelector() calls or attaching temporary event listener boilerplate to DOM nodes, the Command Line API provides instant shortcuts such as $(), $$(), monitorEvents(), and copy() directly at the console prompt.

Enabling the Develop Menu and Opening the Console

To use Command Line API helpers in Safari on macOS, verify that developer features are enabled:

1. Open Safari on your Mac.
2. Go to Safari > Settings (or press Cmd + ,) and select the Advanced tab.
3. Check the box labelled Show features for web developers.
4. Navigate to any target webpage, right-click, and choose Inspect Element.
5. Click the Console tab at the top of the Web Inspector window (or press Cmd + Option + C).

Quick DOM Selection Shortcuts: $(), $$(), and $x()

The Safari Console provides convenient shorthand functions for locating DOM elements without jQuery or verbose query selector methods:

• $(selector, [startNode]): Returns the first DOM element matching the specified CSS selector. Equivalent to document.querySelector().

  $('header.site-header')

• $$(selector, [startNode]): Returns an array of all DOM elements matching the CSS selector. Equivalent to Array.from(document.querySelectorAll()).

  $$('article h2').forEach(heading => console.log(heading.textContent))

• $x(xpath, [startNode]): Evaluates an XPath expression and returns an array of matching XML or HTML nodes:

  $x('//button[contains(text(), "Submit")]')

Inspecting Context and Recent Selections: $0 through $4 and $_

Safari tracks your recent inspection history through indexed positional variables:

• $0: References the DOM element currently selected in the Elements tab tree. This allows you to click an element in the visual tree, switch to the Console, and manipulate it immediately:

  $0.style.backgroundColor = 'yellow'

• $1, $2, $3, $4: Reference previously selected DOM elements in reverse chronological order (where $1 is the second-most recently selected element).
• $_: Evaluates to the result of the most recently executed console expression. For example, if you execute Math.sqrt(144) returning 12, typing $_ * 2 immediately returns 24.

Monitoring DOM Events with monitorEvents() and unmonitorEvents()

Tracking event propagation and verifying that custom events fire with correct payload properties can be tedious with manual event listeners. The monitorEvents() function logs matching events to the console as they occur:

To monitor all events triggered on a button element:

monitorEvents($('#checkout-btn'))

To restrict monitoring to specific event families (such as mouse, key, touch, or control):

monitorEvents($0, 'mouse')

To listen for individual discrete event types:

monitorEvents($0, ['click', 'focus', 'blur'])

To stop event monitoring and restore normal logging:

unmonitorEvents($0)

Tracing Function Calls with monitor() and unmonitor()

When debugging application logic, you can log every time a specific function is invoked along with its passed arguments using monitor():

function calculateTotal(tax, discount) {
  return (100 + tax) - discount;
}
monitor(calculateTotal);
calculateTotal(15, 5);

Whenever calculateTotal executes, Safari outputs: function calculateTotal called with arguments: 15, 5. To stop tracing, run unmonitor(calculateTotal).

Exporting Data to the macOS Clipboard with copy()

When interrogating API responses, state objects, or complex JSON structures in the console, you can copy the data directly to your macOS system clipboard using the copy() helper:

copy(window.__INITIAL_STATE__)

If you pass a DOM node to copy(), Safari copies the node’s complete outer HTML markup. If you pass an object or array, Safari formats it as indented JSON, ready to paste into your code editor.

Inspecting Object Keys, Values, and Prototypes: keys() and values()

To inspect object properties without expanding deeply nested inspector trees:

• keys(object): Returns an array containing the names of all own properties of the target object:

  keys(navigator)

• values(object): Returns an array of the corresponding values for all own properties:

  values(window.themeConfig)

• queryObjects(Constructor): Scans the JavaScript heap and returns an array of all live allocated instances created with the specified constructor function or class:

  queryObjects(Promise)