Debugging JavaScript with Chrome DevTools

bit.ly/js-debugging

Debugger Intro
Stepping Through Code
Behaviour-based Breakpoints
Remote Debugging

JavaScript Debugging

bit.ly/js-debugging

Paused Execution

Add Breakpoint

Debugger Statement

Call Stack

Switch Call Frames

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

Restart Frame

Restart Frame (Limitations)

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 Caught Exceptions

Never Pause Here

Disable Debugger Statements

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