Debugging JavaScript with Chrome DevTools

bit.ly/js-debugging

Stepping Through Code
- Closer look at the call stack
Debugging code you don't know
Remote Debugging

DevTools Debugging

Logging
Run Code Line By Line

Paused Execution

Call Stack

Switch Call Frames

Restart Frame

Call Stack

Search for Code

Cmd + O

Ctrl + O

Search for Code

Cmd + Opt + F
Ctrl + Shift + F

Advanced Breakpoints

Pause on exception
DOM breakpoints
Event listener breakpoints
XHR breakpoints
Make your own with the debugger statement

Bundled Code (SKIP)

function addFour(num) {
    return num + 4;
}

function calculateValue() {
    ...
}

function multiplyByThree(num) {
    ...
}

function subtractTwo(num) {
    ...
}

function onButtonClick() {
    ...
}

Bundled and Minified Code (SKIP)

function addFour(t){return t+4}function calculateValue
(){var t=6;return t=subtractTwo(t),t=multiplyByThree(t)
,t=addFour(t),console.assert(16===t,"Value wasn't 16.")
,t}function multiplyByThree(t){return 4*t}function
subtractTwo(t){return t-2}function onButtonClick(){var
t=document.getElementById("value");t.innerHTML="Value:
"+calculateValue()}

Prettify Code (SKIP)

Source Maps (SKIP)

function calculateValue() {
    var t = 6;
    return t = subtractTwo(t),
        t = multiplyByThree(t),
        t = addFour(t),
        console.assert(16 === t, "Value wasn't 16."),
        t
}

Source Maps (SKIP)

{
    "version": 3,
    "sources": ["add-four.js", "on-click.js",...],
    "names": ["addFour", "num", "value",...],
    "mappings": "AAAA,QAASA,SAAQC,GACb,...",
    "file": "bundle.js"
}

Source Maps (SKIP)

todo: pic of visualizer

"all source maps do is map a position in the compiled source to a position in the original source"

Remote Debugging

<=> WebSockets <=>

Chrome Desktop

DevTools

(Chrome Debugger Protocol)

Debugging DevTools

Remote Debugging

<=> WebSockets <=>

Chrome Desktop

Chrome on Android

Node

DevTools

Sublime Text

WebStorm

Visual Studio Code

IntelliJ IDEA

(Chrome Debugger Protocol)

Node-Inspector

node-debug test.js

Remote Debugging

<=> WebSockets <=>

Chrome Desktop

Chrome on Android

Node

DevTools

Sublime Text

WebStorm

Visual Studio Code

IntelliJ IDEA

(Chrome Debugger Protocol)

Sublime WebInspector

DevTools Extensions (SKIP)

Thanks

bit.ly/js-debugging

@mattzeunert