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
Recommended
