Debugging JavaScript with Chrome DevTools
@mattzeunert
Why Use A Debugger?
Fix Bugs
Understand Code
- Debugger Intro
- Stepping Through Code
- Behaviour-based Breakpoints
- Console Logging
- Remote Debugging
Paused Execution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2750709/Screen_Shot_2016-06-15_at_11.31.09.png)
Paused Execution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2709343/next-line.gif)
Add Breakpoint
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2433416/add-breakpoint-to-line.gif)
Conditional Breakpoints
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2827970/Screen_Shot_2016-07-08_at_17.52.15.png)
Conditional Breakpoints
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2827981/not-cond-bp.gif)
Conditional Breakpoints
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2832791/cond-bp-no-looping.gif)
Full Text Search
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2817709/333.png)
Cmd + Opt + F
Ctrl + Shift + F
Debugger Statement
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2433427/Screen_Shot_2016-04-06_at_09.08.13.png)
Debugger Statement
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2832814/Screen_Shot_2016-07-11_at_14.17.30.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2827804/debugger.gif)
Call Stack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2297370/Screen_Shot_2016-03-02_at_08.53.13.png)
Switch Call Frames
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2297383/FNilX41vaA.gif)
Anonymous Functions
$(document).ready(function(){
[1, 2, 3, 4].filter(function(n){
return n > 2
})
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2832965/Screen_Shot_2016-07-11_at_14.55.13.png)
Anonymous Functions
$(document).ready(function initApp(){
[1, 2, 3, 4].filter(function numberIsLargeEnough(n){
return n > 2
})
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2832979/Screen_Shot_2016-07-11_at_14.55.54.png)
Async Call Stack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2392373/Screen_Shot_2016-03-27_at_09.52.56.png)
Async Call Stack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2392375/Screen_Shot_2016-03-27_at_09.53.13.png)
Return Value
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2307188/Screen_Shot_2016-03-04_at_07.30.12.png)
Stepping Through Code
Stepping Controls
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2325612/Screen_Shot_2016-02-02_at_06.30.50.png)
- Resume
- Step Over
- Step Into
- Step Out
Blackboxing Library Code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2325541/Screen_Shot_2016-03-09_at_06.55.09.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2325543/Screen_Shot_2016-02-02_at_06.30.50_copy.png)
Blackboxing Library Code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2325532/Screen_Shot_2016-03-09_at_06.55.32.png)
Blackboxing Library Code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2325539/Screen_Shot_2016-03-09_at_06.55.56.png)
Blackboxing Library Code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2325535/Screen_Shot_2016-03-09_at_06.56.53.png)
Restart Frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2297403/Screen_Shot_2016-03-02_at_08.58.38.png)
Restart Frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2307227/Screen_Shot_2016-03-04_at_07.40.14.png)
Restart Frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2460440/rf.gif)
Restart Frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2460520/rf2.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2460539/rf3.gif)
Restart Frame
Restart Frame (Limitations)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2307277/uzPmK9lfXp.gif)
Never Pause Here
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2381245/Screen_Shot_2016-03-23_at_08.13.11.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2547652/Screen_Shot_2016-04-29_at_08.44.03.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2440990/prettify.gif)
Source Maps
Generate Source Maps
uglifyjs all.js
-o all.min.js
--source-map all.min.map
--mangle --compress
Debug Original Code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2427878/Screen_Shot_2016-04-05_at_08.54.38.png)
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"
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2427894/source-maps-position.gif)
function calculateHolidayCost() {
var t = 0;
return t += getFlightCost(),
t += getHotelCost(),
t += getFoodCost()
}
Minified Variable Names
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2547703/source-map-vars-not-mapped.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2574412/Screen_Shot_2016-05-06_at_08.55.38.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2574413/Screen_Shot_2016-05-06_at_09.23.24.png)
Blackboxing & Source Maps
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2574431/Screen_Shot_2016-05-06_at_09.33.46.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2833443/Screen_Shot_2016-07-11_at_17.31.02.png)
Behaviour-based Breakpoints
Behaviour-based Breakpoints
DevTools can pause on
- Exceptions
- DOM changes
- DOM events
- Ajax requests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2456358/10.png)
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()
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2708750/Screen_Shot_2016-06-05_at_00.15.13.png)
Pause On Exceptions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2433579/why-pause.png)
Pause On Exceptions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2646430/Screen_Shot_2016-05-22_at_13.29.48.png)
Pause On Exceptions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2433579/why-pause.png)
Exception Handlers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2381214/Screen_Shot_2016-03-23_at_08.06.47.png)
Pause On Caught Exceptions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2433579/why-pause.png)
Pause On Caught Exceptions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2381222/nph-before.gif)
Never Pause Here
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2586076/nph-continue-no-loop.gif)
Console Logging
Console Logging
console.log("Post:", post);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2386528/Screen_Shot_2016-03-24_at_14.16.47.png)
Store As Global Variable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2838037/Screen_Shot_2016-07-12_at_22.39.20.png)
Store As Global Variable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2827877/store-as-global.gif)
Custom Data Structures
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2409325/Screen_Shot_2016-03-31_at_11.53.32.png)
Custom Object Formatters
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2409328/Screen_Shot_2016-03-31_at_12.04.49.png)
Immutable DevTools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2389250/console-trace.png)
console.trace
console.table
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2722828/console-table__1_.png)
copy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2727567/Screen_Shot_2016-06-09_at_12.31.30.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2727584/Screen_Shot_2016-06-09_at_12.36.57.png)
console.time
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2751847/ttttttt.png)
console.time("Loop");
for (var i=0; i<1000000; i++) { }
console.timeEnd("Loop")
Remote Debugging
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2817724/66666.png)
Remote Debugging
Chrome Debugging Protocol
Chrome Desktop
DevTools
Chrome on Android
Node
Node Inspector
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2292270/Screen_Shot_2016-03-01_at_08.37.04.png)
$ node-debug test.js
Chrome Debugging Protocol
Node
DevTools
Node Inspector
V8-Debug Protocol
node --inspect
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2708722/Screen_Shot_2016-06-04_at_23.48.37.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2286165/Screen_Shot_2016-02-28_at_23.03.06.png)
Visual Studio Code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2484805/visual-studio-code.png)
Learn More
![](https://s3.amazonaws.com/media-p.slid.es/uploads/98145/images/2307341/Screen_Shot_2016-03-04_at_08.24.11.png)
Thanks
Slides
JavaScript Debugging - FullstackJS June 2016
By Matt Zeunert
JavaScript Debugging - FullstackJS June 2016
- 1,013