Programmatic Breakpoints with debugger

The debugger statement serves as a programmatic breakpoint. When the browser's developer tools are open, execution will automatically pause at the line where debugger is encountered, allowing you to inspect the current state of the application.

let total = 0;
for (let i = 1; i <= 10; i++) {
    total += i;
    if (total > 15) {
        debugger; // Execution stops here once total exceeds 15
    }
}

The Command Line API Utilities

Modern browser consoles provide a set of convenience functions known as the Command Line API. These functions are designed to speed up DOM manipulation and object inspection during live sessions.

Accessing Execution History: $_

The $_ variable stores the value of the most recently evaluated expression in the console.

Math.pow(2, 10)
// 1024
$_ + 1
// 1025

Recent DOM Elements: $0 - $4

The console maintains a history of the last five elements selected in the "Elemants" panel. $0 refers to the currently selected node, while $1 through $4 refer to previously selected nodes in reverse chronological order.

DOM Query Shortcuts: $(), $$(), and $x()

• $(selector): A shortcut for document.querySelector(). It returns the first element matching the CSS selector.
• $$(selector): A shortcut for document.querySelectorAll(). It returns an array of all matching elements.
• $x(xpath): Returns an array of elements matching a specific XPath expression.

// List all button text on a page
const buttons = $$('button');
buttons.map(btn => btn.innerText);

// Find all paragraphs containing a link via XPath
$x("//p[a]");

Object and Event Inspection

The API provides several functions to look inside JavaScript objects and their associated behaviors:

• keys(object): Returns an array of property names.
• values(object): Returns an array of property values.
• getEventListeners(object): Returns all event listeners registered on a specific DOM element or object.

const config = { theme: 'dark', notifications: true, lang: 'en' };
keys(config);   // ["theme", "notifications", "lang"]
values(config); // ["dark", true, "en"]

Event Monitoring

You can observe events as they fire using monitorEvents(). This is useful for verifying if listeners are triggering correctly.

// Monitor all click events on the window
monitorEvents(window, "click");

// Monitor a specific set of events on the current element
monitorEvents($0, ["mouseenter", "mouseleave"]);

// Stop monitoring
unmonitorEvents(window);

Supported event categories include mouse, key, touch, and control (e.g., resize, scroll).

Performence Profiling

The profile() and profileEnd() methods allow you to start and stop a JavaScript CPU profile session from the command line, which can then be viewed in the "Performance" or "Memory" panels.

profile("DataProcessingTask");
runHeavyLogic();
profileEnd("DataProcessingTask");

Additional Utility Commands

• inspect(object/element): Automatically switches to the appropriate panel (Elements for DOM, Profiles for JS) and selects the item.
• copy(value): Copies the string representation of an object or element to the system clipboard.
• clear(): Wipes the console history, equivalent to console.clear().
• dir(object): Displays an interactive list of an object's properties (alias for console.dir).
• dirxml(object): Displays the XML/HTML representation of an object (alias for console.dirxml).