Debugging JavaScript

Overview

• What problem is DevTools solving?
  • Common problems
    • Check that program is executing in correct order
    • Check that values are set as expected
• Common strategies
  • Logging
  • Debugging with Sources panel

Console shortcuts

• Open DevTools and jump to Console
  • Control+Shift+J
  • Command+Option+J (Mac)
• Open the Console in the Drawer
  • Escape

Logging methods

Sometimes inefficient but very reliable. See Console API Reference.

Filtering logs

• Console Sidebar

Debugging with Sources panel

• Better suited for tricky bugs
• Keeping track of code execution order
  • Code stepping
  • Call stack
  • Code folding
    • January 2019 (Chrome 73)
• Keeping track of values
  • Values printed inline after a line of code executes
  • Scope pane
  • Run JavaScript contextually in the Drawer
  • Live Expressions
  • Logpoints
  • Storing the output of Logpoints as global variables

Navigating source code

• Global search and network search
• Go to line

Snippets

• CMD+D

More breakpoints

• DOM mutation breakpoints
• Event listener breakpoints
  • Blackboxing framework scripts
• Breakpoints Guide

Live Expressions

1. Open Console
2. Click the Eye Of Sauron Create Live Expression button
3. Right-click Reveal In Elements Panel

Monitor the values of arbitrary expressions in the Console.