Debugging JavaScript with Chrome DevTools

bit.ly/js-debugging

@mattzeunert

Why Use A Debugger?

1. Exploring Program State
2. Stepping Through Code
3. Behaviour-based Breakpoints
4. Debugging Performance
5. Remote Debugging

Paused Execution

Paused Execution

Add Breakpoint

Debugger Statement

Conditional Breakpoints

Exploring Program State

Call Stack

Async Call Stack

Async Call Stack

Switch Call Frames

Return Value

Store As Global Variable

console.table

copy

Custom Data Structures

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)

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 Mapped Code

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

Debugging Performance Issues

Timeline

Timeline Overview

Warnings

Framerate

Type Of CPU Consumption 

Other Threads

Screenshots

function runApp(){
    for (var i=0; i< 1 * 1000000000; i++){}
    doSomething();
}

function doSomething(){
    for (var i=0; i< 2 * 1000000000; i++){}
}

runApp()

Call Stack Depth

Time

function runApp(){
    for (var i=0; i< 1 * 1000000000; i++){}
    doSomething();
}

function doSomething(){
    for (var i=0; i< 2 * 1000000000; i++){}
}

runApp()

Profiles Tab

Paint Profiler

Rendering Settings

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