Upload
asjb
View
304
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Get more out of Chrome DevTools. From simple live page CSS alterations and JavaScript logging, to device emulation and performance profiling, understanding Chrome's Dev Tools has become an indispensable skill for front-end coders. This was a talk delivered on March 26 at Shutterstock's Empire State Building offices for the New York Front End Coders meetup. It covered a wide variety of tips and tricks that developers of all skill levels could use. Adam Bankin is a front-end engineer at Shutterstock's NY office. His days are spent happily modernizing and re-architecting the codebase to make things go zoom.
Citation preview
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