Debugging JavaScript with Chrome DevTools

 
  1. Debugging Basics
  2. Stepping Through Code
  3. Behaviour-based Breakpoints
  4. Console Logging
  5. Integrating With Other Tools

JavaScript Debugging

 

Paused Execution

 

Call Stack

 

Reason For Pausing

 

Switch Call Frames

 

Async Call Stack

Async Call Stack

Scope Panel

 

Searching For Code

 

Cmd + O

Cmd + Opt + F

Windows: Ctrl + O, Ctrl + Shift + F
 

Stepping Through Code

Stepping Controls

 
  • Resume
  • Step Over
  • Step Into
  • Step Out

Long Resume

 

Long Resume

 

Blackboxing Library Code

 

Blackboxing Library Code

 

Blackboxing Library Code

 

Blackboxing Library Code

 

Restart Frame

 

Restart Frame

 

Restart Frame

 

Restart Frame

 

Restart Frame (Limitations)

 

Behaviour-Based Breakpoints

Behaviour-based Breakpoints

 

DevTools can pause on

 
  • Exceptions
  • DOM changes
  • DOM events
  • Ajax requests

demo

var originalSetItem = localStorage.setItem;
localStorage.setItem = function(){
    debugger;
    return originalSetItem.apply(this, arguments);
}

Calling The Original Function

 

Debugging Snippets

 

Break on

  • Function calls
  • Object property access

Break On Scroll Change

 

​Pause on:

  • body.scrollTop access
  • window.scrollTo calls
  • window.scrollBy calls

Snippets

 

paul  irish snippet collection

Snippets

 

hard to understand snippets just from this screenshot

Snippets

 

extension?

Pause On Exception

Pause On Caught Exceptions

Never Pause Here

Disable Debugger Statements

Console Logging

Console Logging

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

Custom Object Formatters

Custom Object Formatters

Immutable DevTools

console.trace

 

console.group

 

console.table

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

console.time

 

Store As Global Variable

 

Scope Pane Values

$_

copy

Integrating With Other Tools

Framework Extensions

React Developer Tools

Source Maps (will likely cut for jsconf version)

 
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()}

Source Maps

 

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

--mangle --compress

Source Maps

 
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()}
//# sourceMappingURL=all.min.map

Source Maps

 

Source Maps

 

Source Maps

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

Source Maps

 

Remote Debugging

 

<=>  WebSockets  <=>

 

 

 

Chrome Desktop

DevTools

 

 

(Chrome Debugger Protocol)

 

Remote Debugging

 

<=>  WebSockets  <=>

 

 

 

Chrome Desktop

Chrome on Android

Node

DevTools

 

(Chrome Debugger Protocol)

 

Node-Inspector

$ node-debug test.js

Virtual Android Device

Remote Debugging

 

<=>  WebSockets  <=>

 

 

 

Chrome Desktop

DevTools

Sublime Text

WebStorm

IntelliJ IDEA

Visual Studio Code


 

(Chrome Debugger Protocol)

 

Sublime WebInspector

 

Visual Studio Code

Learn More

https://umaar.com/dev-tips/

Thanks

 

@mattzeunert

 

bit.ly/js-debugging

Made with Slides.com