chrome dev tools tips and tricks

Chrome DevToolsTips and Tricks

Adam BankinShutterstock NYCMarch 26th, 2014

Console tab

console.logvar obj = { a: 1, b: 2, c: 3}

console.log(obj);

console.warnvar obj = { a: 1, b: 2, c: 3}

console.warn(obj);

console.tracefunction firstFunc () { secondFunc()}

function secondFunc () { console.trace()}

firstFunc();

console.errortry { doStuff();} catch (e) { console.error("There has been an error, yo");}

console.tablevar data = [ {a: 1, b: 2, c: 3}, {a: 4, b: 8, c: 12}, {a: 16, b: 32, c: 48}];

console.table(data);

console.table [continued]console.table( document.querySelectorAll("#content img"), ["src", "width"]);

console.dir/dirconsole.log(document.querySelectorAll("#content img"));// String representation

console.dir(document.querySelectorAll("#content img"));// JavaScript representation

console.assertconsole.assert( document.querySelectorAll("#content img").length <= 3, "More than 3 images");

More console methodsconsole.group();console.time();console.profile();

https://developers.google.com/chrome-developer-tools/docs/console

Preserve logs

Sources tab

Debugger keywordvar body = document.body;

function doStuff (obj) { var win = window; var value = 9; debugger;}

function callDoStuff () { doStuff({a: 1, b: 2, c: 3});}

callDoStuff();

Breakpoint types

Standard breakpointConditional breakpointDOM/XHR/Event Listener breakpointsDisabled breakpointDeactivated breakpoint

Breakpoint steps

PlayStep OverStep InStep Out

Navigate by breakpoint

Click the text of the breakpoint to go to the corresponding line of code

Call stack

Navigate back through your code

Call stack [Async]function doStuff (obj) { var value = 9; debugger;}

function callDoStuff () { setTimeout(function () { doStuff({a: 1, b: 2, c: 3}); }, 300);}

callDoStuff();

Replay your code

Right-click the call stack and choose "Restart frame"

Editable code// Literals don't seem to workdoStuff({a: 1, b: 2, c: 3}); // talk1.js

// predefined values DOvar obj = {a: 1, b: 2, c: 3}; // talk2.jsdoStuff(obj);

(Mac) Keyboard shortcuts(Cmd + Option + i) Open DevTools(ESC) Open and close the console drawer(Shift + return) Enter a line return in the console(fn + F8) Step over(fn + F11) Step into(Shift + fn + F11) Step out(Cmd + [ or ]) Navigate between tabs

A LOT more hereWe've barely scratched the surface!

Chrome DevTools docsHTML5Rocks DevTools digestYouTube DevTools videos

Thanks!abankin@shutterstock.com@adambankin

Did I mention we're hiring?!