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.

1. Chrome DevTools
Tips and Tricks
Adam Bankin
Shutterstock NYC
March 26th, 2014

2. Console tab

3. console.log
var obj = {
a: 1,
b: 2,
c: 3
}
console.log(obj);

4. console.warn
var obj = {
a: 1,
b: 2,
c: 3
}
console.warn(obj);

5. console.trace
function firstFunc () {
secondFunc()
}
function secondFunc () {
console.trace()
}
firstFunc();

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

7. console.table
var data = [
{a: 1, b: 2, c: 3},
{a: 4, b: 8, c: 12},
{a: 16, b: 32, c: 48}
];
console.table(data);

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

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

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

11. More console methods
console.group();
console.time();
console.profile();
https://developers.google.com/chrome-developer-tools/docs/console

12. Preserve logs

13. Sources tab

14. Debugger keyword
var body = document.body;
function doStuff (obj) {
var win = window;
var value = 9;
debugger;
}
function callDoStuff () {
doStuff({a: 1, b: 2, c: 3});
}
callDoStuff();

15. Breakpoint types
Standard breakpoint
Conditional breakpoint
DOM/XHR/Event Listener breakpoints
Disabled breakpoint
Deactivated breakpoint

16. Breakpoint steps
Play
Step Over
Step In
Step Out

17. Navigate by breakpoint
Click the text of the breakpoint to go to the corresponding line of code

18. Call stack
Navigate back through your code

19. Call stack [Async]
function doStuff (obj) {
var value = 9;
debugger;
}
function callDoStuff () {
setTimeout(function () {
doStuff({a: 1, b: 2, c: 3});
}, 300);
}
callDoStuff();

20. Replay your code
Right-click the call stack and choose "Restart frame"

21. Editable code
// Literals don't seem to work
doStuff({a: 1, b: 2, c: 3}); // talk1.js
// predefined values DO
var obj = {a: 1, b: 2, c: 3}; // talk2.js
doStuff(obj);

22. (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

23. A LOT more here
We've barely scratched the surface!
Chrome DevTools docs
HTML5Rocks DevTools digest
YouTube DevTools videos

24. Thanks!
abankin@shutterstock.com
@adambankin
Did I mention we're hiring?!