Python Full Stack Web Developer Course

Sources Panel: Debugging JavaScript

The Sources panel (or Debugger in Firefox) is a powerful JavaScript debugger that allows you to set breakpoints, step through code, and inspect variables at runtime.

Code Navigator

The Sources panel shows all code loaded by the page:

• Page files (HTML, CSS, JavaScript)
• Framework files (React, Vue, Angular, etc.)
• Extension scripts
• Generated sources (Webpack bundles, etc.)

The navigator is organized in a tree structure that varies by browser but typically includes:

• Main domain files
• Third-party scripts (from CDNs or other domains)
• Content scripts (from browser extensions)

This file navigator is like a library catalog for your web application—it helps you locate specific scripts and modules for detailed examination.

Setting Breakpoints

Breakpoints pause code execution at specific lines, allowing you to inspect the state at that moment:

• Line Breakpoints: Click the line number to set/remove
• Conditional Breakpoints: Right-click a line number → "Add conditional breakpoint" → Enter a condition
• DOM Breakpoints: In the Elements panel, right-click an element → "Break on..." → Choose modification type
• XHR/Fetch Breakpoints: Break when a URL contains a specified string
• Event Listener Breakpoints: Break when specific events (click, load, etc.) are triggered

// Example of where you might set breakpoints
function calculateTotal(items) {
  // Line breakpoint here to inspect items array
  let total = 0;
  
  for (const item of items) {
    // Conditional breakpoint here: item.price > 100
    total += item.price * item.quantity;
  }
  
  // Line breakpoint here to check final total
  return total;
}
            

Breakpoints are like pause buttons in a complex machine—they let you stop the execution process at critical points to see what's happening inside.

Debugging Controls

When execution is paused at a breakpoint, several controls allow you to navigate through code:

• Resume: Continue execution until the next breakpoint
• Step Over: Execute the current line and move to the next one
• Step Into: If the current line contains a function call, move into that function
• Step Out: Complete the current function and pause at the calling code
• Step: Move to the next statement (regardless of line)

These controls are like having a time machine for code execution—allowing you to move forward at your own pace and examine each step in detail.

Watching Variables

While execution is paused, you can inspect the current state:

• Scope Variables: View local, closure, and global variables
• Watch Expressions: Add custom expressions to monitor
• Call Stack: See the nested function calls that led to the current line
• Breakpoints List: View and manage all breakpoints

This state inspection is like being able to X-ray your code at a specific moment—revealing the internal values and structures that would otherwise be invisible.

Console Integration

While paused at a breakpoint, you can use the Console to interact with the current scope:

• Type variable names to see their values
• Modify variables to test different scenarios
• Call functions to see their effects
• Use temporary variables for complex calculations

This integration makes debugging interactive—like having a discussion with your code while it's frozen in time.

Source Maps

Source maps connect minified or transpiled production code back to the original source files:

• Debug TypeScript, JSX, or ES6+ in their original form
• Set breakpoints in the original source files
• View meaningful variable names instead of minified ones

Source maps are like translation dictionaries between production code and developer code—they help you work with readable, familiar code even when the browser is executing something quite different.

Practical Exercise: JavaScript Debugging

1. Find a website with interactive JavaScript features (form validation, interactive widgets, etc.)
2. Open the Sources panel and locate a JavaScript file
3. Set a breakpoint at an interesting location (event handler, function definition)
4. Trigger the action that would execute that code
5. When execution pauses, examine the call stack and variables
6. Use the stepping controls to move through the code
7. Try modifying a variable in the Console and resuming execution to see the effect