Debugging JavaScript with Chrome DevTools

bit.ly/js-debugging

@mattzeunert

Why Use A Debugger?

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

Paused Execution

Paused Execution

Add Breakpoint

Conditional Breakpoints

Conditional Breakpoints

Conditional Breakpoints

Full Text Search

Cmd + Opt + F

Ctrl + Shift + F

Debugger Statement

Debugger Statement

Call Stack

Switch Call Frames

Anonymous Functions

$(document).ready(function(){
    [1, 2, 3, 4].filter(function(n){
        return n > 2
    })
})

Anonymous Functions

$(document).ready(function initApp(){
    [1, 2, 3, 4].filter(function numberIsLargeEnough(n){
        return n > 2
    })
})

Async Call Stack

Async Call Stack

Return Value

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)

Never Pause Here

Compiled Code

function calculateHolidayCost(){var t=0;t+=getFlightCost(
);t+=getHotelCost();t+=getFoodCost();debugger;return t}fu
nction getHotelCost(){return parseFloat("GBP200")}functio
n getFlightCost(){return 300}function getFoodCost(){retur
n 200}function onButtonClick(){var t=document.getElementB
yId("value");t.innerHTML=calculateHolidayCost()}

Prettify Code

Source Maps

Generate Source Maps

uglifyjs all.js
-o all.min.js
--source-map all.min.map
--mangle --compress

Debug Original Code

all.min.map

{
    "version": 3,
    "sources": [
        "calculate-holiday-cost.js",
        "get-hotel-cost.js",
        ...
    ],
    "names": [
        "calculateHolidayCost",
        "cost",
        ...
    ],
    "mappings": "AAAA,QAASA,wBACL,GAAIC,GAAO,CAMX...",
    "file": "all.min.js"
}

all.min.map

{
    "version": 3,
    "sources": [...],
    "names": [...],
    "mappings": [
        [0, 0, 0, 0],
        [8, 0, 9, 9, 0],
        [24, 0, 1, -5],
        ...
    ],
    "file": "all.min.js"
}

function calculateHolidayCost() {
    var t = 0;
    return t += getFlightCost(),
      t += getHotelCost(),
      t += getFoodCost()
}

Minified Variable Names

Babel Import Names

import React from "react"

// ==> Compiled to:

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

{
    "version": 3,
    "sources": [
        "calculate-holiday-cost.js",
        "get-hotel-cost.js",
        ...
    ],
    "names": [
        "calculateHolidayCost",
        "cost",
        ...
    ],
    "mappings": "AAAA,QAASA,wBACL,GAAIC,GAAO,CAMX...",
    "file": "all.min.js"
}

Resolve Variable Names

Blackboxing & Source Maps

Behaviour-based Breakpoints

Behaviour-based Breakpoints

DevTools can pause on

• Exceptions
• DOM changes
• DOM events
• Ajax requests

var originalSetItem = localStorage.setItem;
localStorage.setItem = function(key, value){
    debugger;
    return originalSetItem.call(this, key, value);
}

Calling The Original Function

Custom Breakpoints

Pause on:

• Function Calls
• Object Property Access

Debugging Objects

Pause On:

• Cookie Updates
• ScrollTop Changes

Debugging Objects

Object.defineProperty(document.body, "scrollTop", {
     set: function(){
         debugger;
     }
})

JS Breakpoint Collection

breakpoints.debugPropertySet(document.body, "scrollTop")
// or
breakpoints.debugScroll()

bit.ly/bp-collection

Pause On Exceptions

Pause On Exceptions

Pause On Exceptions

Exception Handlers

Pause On Caught Exceptions

Pause On Caught Exceptions

Never Pause Here

Console Logging

Console Logging

console.log("Post:", post);

Store As Global Variable

Store As Global Variable

Custom Data Structures

Custom Object Formatters

Immutable DevTools

console.trace

console.table

copy

console.time

console.time("Loop");
for (var i=0; i<1000000; i++) { }
console.timeEnd("Loop")

Remote Debugging

Remote Debugging

Chrome Debugging Protocol

Chrome Desktop 

DevTools

Node Inspector

$ node-debug test.js

Chrome Debugging Protocol

Node

DevTools

Node Inspector

V8-Debug Protocol

node --inspect

node --inspect

Chrome Debugging Protocol

Node

DevTools

$ node --inspect test.js

Chrome Debugging Protocol

Chrome Desktop

DevTools

Sublime Text

IntelliJ IDEA

Visual Studio Code

Sublime Web Inspector

Visual Studio Code

Learn More

umaar.com/dev-tips

Thanks

@mattzeunert

bit.ly/js-debugging

Slides