Appendix B: Debugger Command Reference

This reference covers the essential commands you'll use daily when debugging at the terminal or in various debugging tools. Memorizing these core commands dramatically speeds up your debugging workflow.

Python pdb Commands

Starting the debugger:

# In Python 3.7+, use the built-in breakpoint()

breakpoint()  # Starts pdb at this line



# In older Python or to use specific debuggers

import pdb; pdb.set_trace()  # Classic approach



# Debug a script from the command line

python -m pdb script.py

Navigation Commands (where you spend 80% of your time):

| Command | Shortcut | Purpose | Example Use Case |

| ---------- | -------- | ----------------------------------------- | --------------------------------------------------- |

| next | n | Execute current line, step over functions | Moving through a function without diving into calls |

| step | s | Execute current line, step into functions | Following execution into a helper function |

| continue | c | Continue execution until next breakpoint | You've seen what you need, let it run |

| return | r | Continue until current function returns | Jumped too deep, want to get back up |

| until | unt | Continue until line greater than current | Skip to end of a loop |

This is crucial: The difference between next and step trips up beginners. If you're on line 10, which calls process_data():

9: user = get_user(user_id)

10: result = process_data(user)  # You're here

11: return result

• Press n (next): Executes process_data() completely and stops at line 11

• Press s (step): Jumps into the process_data() function definition

Use next when you trust the function. Use step when you're tracing execution into unfamiliar code.

Inspection Commands:

| Command | Shortcut | Purpose | Example |

| ------------------- | --------- | ---------------------------------- | ----------------- |

| print expr | p expr | Evaluate and print expression | p user.email |

| pretty-print expr | pp expr | Pretty-print complex structures | pp request.POST |

| list | l | Show 11 lines around current line | l |

| longlist | ll | Show entire current function | ll |

| args | a | Print current function's arguments | a |

| whatis expr | | Print type of expression | whatis user |

| where | w | Print stack trace | w |

Example debugging session to illustrate usage:

def process_order(order_id):

    order = Order.objects.get(id=order_id)

    breakpoint()  # Execution stops here

    # (Pdb) p order

    # <Order: Order object (5)>

    # (Pdb) p order.total

    # 150.75

    # (Pdb) n  # Step to next line

    # (Pdb) s  # Step into calculate_tax()

    items = order.items.all()

    tax = calculate_tax(items, order.shipping_state)

    return order.total + tax

Breakpoint Management:

| Command | Purpose | Example |

| ----------------------- | ---------------------------------------- | ---------------------------------- |

| break or b | Set breakpoint | b 42 (line 42), b module.py:15 |

| break function | Break when entering function | b process_order |

| break expr, condition | Conditional breakpoint | b 42, order.total > 100 |

| tbreak | Temporary breakpoint (removed after hit) | tbreak 42 |

| clear | Clear breakpoint | clear 1 (breakpoint number) |

| disable | Disable breakpoint | disable 1 |

| enable | Enable breakpoint | enable 1 |

| commands | Execute commands when breakpoint hit | See below |

Conditional breakpoints are incredibly powerful. Instead of hitting a breakpoint 1000 times in a loop, condition it:

# Stop only when processing high-value orders

(Pdb) b process_order, order.total > 1000



# Stop only for specific users

(Pdb) b send_email, user_id == 42

Commands on breakpoints (advanced but incredibly useful):

(Pdb) b 42

Breakpoint 1 at /app/views.py:42

(Pdb) commands 1

(com) print f"Processing order {order.id}"

(com) print f"Total: {order.total}"

(com) continue

(com) end

Now whenever breakpoint 1 is hit, it prints those values and continues automatically. This is like smart logging without modifying code.

Other Essential Commands:

| Command | Purpose | When to Use |

| ------------- | ------------------------------ | --------------------------------------- |

| quit or q | Exit debugger | You're done debugging |

| help [cmd] | Get help | help break shows breakpoint syntax |

| interact | Start interactive Python shell | When you need to explore objects deeply |

| restart | Restart program | Testing a fix without leaving pdb |

| !statement | Execute Python statement | Modify variables: !order.total = 200 |

The interact command is underused but powerful. It drops you into a full Python REPL with access to all local variables:

(Pdb) interact

>>> # Now you have full Python

>>> for item in order.items.all():

...     print(item.name, item.price)

>>> # Press Ctrl+D to return to pdb

Common workflow pattern:

1. Set breakpoint where problem occurs: b views.py:42

2. Run program: c

3. Hit breakpoint, inspect variables: p order, pp request.POST

4. Step through suspicious code: n, n, s

5. Check call stack: w

6. Continue or quit: c or q

Node.js Inspector Commands

When debugging Node.js through Chrome DevTools or VS Code, you typically use GUI controls, but understanding the equivalent commands helps when using the CLI inspector or understanding what the GUI is doing.

Chrome DevTools Shortcuts (when connected via chrome://inspect):

| Action | Keyboard Shortcut | Purpose |

| ----------------- | ----------------- | ------------------------------------------- |

| Continue | F8 or Cmd+\ | Resume execution |

| Step over | F10 | Execute current line, don't enter functions |

| Step into | F11 | Execute current line, enter functions |

| Step out | Shift+F11 | Continue until current function returns |

| Pause | F8 or Cmd+\ | Pause execution |

| Toggle breakpoint | Cmd+B | Set/remove breakpoint at current line |

VS Code Debugger Shortcuts:

| Action | Keyboard Shortcut | Purpose |

| --------- | ----------------- | ---------------------------- |

| Continue | F5 | Resume execution |

| Step over | F10 | Execute current line |

| Step into | F11 | Enter function calls |

| Step out | Shift+F11 | Return from current function |

| Restart | Cmd+Shift+F5 | Restart debugging session |

| Stop | Shift+F5 | Stop debugging |

Console debugging commands (when using Node inspector via CLI):

// In your code, trigger the debugger

debugger; // Execution pauses here when inspector connected

// Console commands when paused:

// repl - Starts a REPL in current context

// exec <expression> - Evaluate expression

// restart - Restart the script

// kill - Kill the script

// cont, c - Continue execution

// next, n - Step over

// step, s - Step into

// out, o - Step out

// backtrace, bt - Print backtrace

Example Node.js debugging workflow:

// server.js

app.post("/order", async (req, res) => {
  const { userId, items } = req.body;

  debugger; // Execution pauses when inspector attached

  const user = await User.findById(userId);

  const order = await processOrder(user, items);

  res.json({ orderId: order.id });
});

Start with inspector:

node --inspect-brk server.js

Connect Chrome DevTools or VS Code. When the debugger; line is hit:

1. Inspect userId and items in the Scope panel

2. Press F10 to execute User.findById(userId)

3. Inspect the returned user object

4. Press F11 to step into processOrder()

5. Continue tracing or press F5 to resume

Watch expressions (available in both Chrome and VS Code):

Instead of repeatedly typing p some.nested.property in pdb, you can watch expressions continuously:

1. Open the Watch panel

2. Click "+"

3. Enter expression: user.email, items.length, etc.

4. Values update automatically as you step through code

Conditional breakpoints (GUI approach):

Right-click a breakpoint → Edit Breakpoint → Enter condition:

order.total > 1000;

user.role === "admin";

items.length > 10;

Logpoints (Chrome DevTools and VS Code):

Instead of adding console.log, create a logpoint:

1. Right-click line number

2. "Add Logpoint"

3. Enter message: User {user.email} processing order

4. Code executes without stopping, but logs the message

This is essentially automatic breakpoint commands like pdb's commands feature.

Browser DevTools Keyboard Shortcuts

These shortcuts work in Chrome, Firefox, and Edge DevTools. Memorizing them dramatically speeds up debugging front-end code.

Opening DevTools:

| Action | Windows/Linux | macOS |

| ------------------ | ------------------- | ------------ |

| Open DevTools | F12 or Ctrl+Shift+I | Cmd+Option+I |

| Open Console | Ctrl+Shift+J | Cmd+Option+J |

| Open Elements | Ctrl+Shift+C | Cmd+Shift+C |

| Open to last panel | Ctrl+Shift+I | Cmd+Option+I |

Sources Panel (Debugging):

| Action | Shortcut | Purpose |

| ----------------- | --------------------------- | ----------------------------------- |

| Pause/Resume | F8 or Ctrl+\ | Stop/start execution |

| Step over | F10 or Ctrl+' | Execute line, don't enter functions |

| Step into | F11 or Ctrl+; | Enter function calls |

| Step out | Shift+F11 or Ctrl+Shift+; | Exit current function |

| Continue to here | Ctrl+Click line number | Run until clicked line |

| Toggle breakpoint | Ctrl+B or click line number | Set/remove breakpoint |

| Edit breakpoint | Ctrl+Click breakpoint | Make conditional |

Console Panel:

| Action | Shortcut | Purpose |

| ---------------- | ----------- | ---------------------- |

| Clear console | Ctrl+L | Clear output |

| Multi-line input | Shift+Enter | Write multi-line code |

| Evaluate | Enter | Run current command |

| Previous command | Up arrow | Cycle through history |

| Search console | Ctrl+F | Find in console output |

Network Panel:

| Action | Shortcut | Purpose |

| -------------- | ------------------ | --------------------------- |

| Record network | Ctrl+E | Start/stop recording |

| Clear | Ctrl+L | Clear network log |

| Search | Ctrl+F | Search request/response |

| Filter | Type in filter box | Show only matching requests |

| Preserve log | Checkbox | Keep log across page loads |

Elements Panel:

| Action | Shortcut | Purpose |

| -------------- | ------------------------------ | -------------------------- |

| Edit as HTML | F2 | Modify element's HTML |

| Hide element | H | Toggle visibility |

| Force state | Right-click → Force state | Test :hover, :active, etc. |

| Scroll to view | Right-click → Scroll into view | Find element on page |

Performance Panel:

| Action | Shortcut | Purpose |

| -------------------- | -------- | -------------------------- |

| Start/stop recording | Ctrl+E | Record performance profile |

| Save profile | Ctrl+S | Export profile data |

| Load profile | Ctrl+O | Import profile data |

Cross-Panel Shortcuts:

| Action | Shortcut | Purpose |

| ---------------- | -------------------------------------- | ---------------------------- |

| Command menu | Ctrl+Shift+P (Win) / Cmd+Shift+P (Mac) | Access all DevTools features |

| Next panel | Ctrl+] | Switch to next tab |

| Previous panel | Ctrl+[ | Switch to previous tab |

| Settings | F1 | Open DevTools settings |

| Search all files | Ctrl+Shift+F | Search across all sources |

The Command Menu is crucial: Press Ctrl+Shift+P (Cmd+Shift+P on Mac) and you can:

• Type "Screenshot" → Capture full page screenshot

• Type "Sensor" → Override geolocation

• Type "Coverage" → See unused CSS/JS

• Type "Rendering" → Show paint flashing, FPS meter

• Type anything → Discover features you didn't know existed

Console Utilities (available in console, not in regular JavaScript):

$0  // Currently selected element in Elements panel

$1  // Previously selected element

$$('div')  // Shorthand for document.querySelectorAll('div')

$x('//div')  // XPath selector

inspect(object)  // Open element in Elements panel

monitor(function)  // Log when function is called

monitorEvents(element, 'click')  // Log events on element

copy(object)  // Copy value to clipboard

Example debugging workflow with shortcuts:

1. Open page, press F12 to open DevTools

2. Press Ctrl+Shift+P, type "block", select "Show Request blocking"

3. Block API endpoint to test offline behavior

4. Press Ctrl+Shift+F to search all sources for "fetch"

5. Click result, press Ctrl+B to set breakpoint

6. Trigger action, debugger pauses

7. Press F10 to step through, inspect variables in Scope

8. Press F11 to step into suspicious function

9. Press Shift+F11 when you want to exit back up

10. Press F8 to continue execution

React-specific shortcuts (when React DevTools installed):

| Action | Shortcut | Purpose |

| ----------------- | ------------------------- | ------------------------------ |

| Highlight updates | Click "Highlight updates" | See which components re-render |

| Select component | Click in Components tree | Inspect props/state/hooks |

| Start profiling | Click record in Profiler | Record render performance |

| Stop profiling | Click stop | Analyze what rendered |

Vue-specific shortcuts (when Vue DevTools installed):

| Action | Shortcut | Purpose |

| ------------------- | ------------------------------ | ------------------------- |

| Inspect component | Click in component tree | See data, computed, props |

| Force refresh | Click refresh icon | Re-render component |

| Scroll to component | Right-click → Scroll into view | Find component on page |

| Edit state | Click value in state | Modify reactive data live |

Key insight: The most powerful debugging workflow combines shortcuts with the Console Utilities. For example:

// In console, select element

inspect($$("button")[2]); // Opens third button in Elements

// Monitor all clicks on a component

monitorEvents($0, "click");

// Step through with F11, evaluate in console

// No need to leave debugger to check values

Common mistake: Developers often use console.log for everything because they don't know the shortcuts. But:

• console.log requires code changes and reloads

• Breakpoints + stepping + console inspection requires no code changes

• Keyboard shortcuts make the debugger faster than logging

Memorize these core shortcuts:

• F12: Open DevTools

• F8: Pause/Resume

• F10: Step over

• F11: Step into

• Shift+F11: Step out

• Ctrl+Shift+P: Command menu (your discovery tool)

With these six shortcuts, you can debug 90% of front-end issues faster than with logging.