Debugging JavaScript with Chrome DevTools
@mattzeunert
Why Use A Debugger?
Fix Bugs
Understand Code
- Exploring Program State
- Stepping Through Code
- Behaviour-based Breakpoints
- Debugging Performance
- 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()
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
Chrome on Android
Node
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
Thanks
Slides
JavaScript Debugging - EnterJS June 2016
By Matt Zeunert
JavaScript Debugging - EnterJS June 2016
- 1,233