Debugging JavaScript with Chrome DevTools

bit.ly/js-debugging

1. Debugger Intro
2. Stepping Through Code
3. Behaviour-based Breakpoints
4. Remote Debugging

JavaScript Debugging

bit.ly/js-debugging

Paused Execution

Add Breakpoint

Debugger Statement

Call Stack

Switch Call Frames

Async Call Stack

Async Call Stack

Return Value

Store As Global Variable

Wrapper Objects

Custom Object Formatters

Immutable DevTools

Stepping Through Code

Stepping Controls

• Resume
• Step Over
• Step Into
• Step Out

Blackboxing Library Code

Blackboxing Library Code

Blackboxing Library Code

Blackboxing Library Code

Restart Frame

Restart Frame

Restart Frame

Restart Frame

Restart Frame

Restart Frame (Limitations)

Behaviour-based Breakpoints

Behaviour-based Breakpoints

DevTools can pause on

• Exceptions
• DOM changes
• DOM events
• Ajax requests

var originalSetItem = localStorage.setItem;
localStorage.setItem = function(){
    debugger;
    return originalSetItem.apply(this, arguments);
}

Calling The Original Function

Custom Breakpoints

Pause on:

• Function Calls
• Object Property Access
  • Cookie Updates
  • ScrollTop Changes

Debugging Snippets

https://github.com/paulirish/devtools-addons/wiki/Snippets

Pause On Exception

Pause On Exception

Pause On Caught Exceptions

Never Pause Here

Disable Debugger Statements

Remote Debugging

Remote Debugging

<=>  WebSockets  <=>

Chrome Desktop

DevTools

(Chrome Debugger Protocol)

Remote Debugging

<=>  WebSockets  <=>

Chrome Desktop

Chrome on Android

Node

DevTools

(Chrome Debugger Protocol)

Node-Inspector

$ node-debug test.js

Remote Debugging

<=>  WebSockets  <=>

Chrome Desktop

DevTools

Sublime Text

WebStorm

IntelliJ IDEA

Visual Studio Code

(Chrome Debugger Protocol)

Sublime WebInspector

Visual Studio Code

Learn More

umaar.com/dev-tips

Thanks

@mattzeunert

bit.ly/js-debugging