Chrome dev tools tips and tricks

672 views

Published on

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.

Published in: Internet, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
672
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chrome dev tools tips and tricks

  1. 1. Chrome DevTools Tips and Tricks Adam Bankin Shutterstock NYC March 26th, 2014
  2. 2. Console tab
  3. 3. console.log var obj = { a: 1, b: 2, c: 3 } console.log(obj);
  4. 4. console.warn var obj = { a: 1, b: 2, c: 3 } console.warn(obj);
  5. 5. console.trace function firstFunc () { secondFunc() } function secondFunc () { console.trace() } firstFunc();
  6. 6. console.error try { doStuff(); } catch (e) { console.error("There has been an error, yo"); }
  7. 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. 8. console.table [continued] console.table( document.querySelectorAll("#content img"), ["src", "width"] );
  9. 9. console.dir/dir console.log(document.querySelectorAll("#content img")); // String representation console.dir(document.querySelectorAll("#content img")); // JavaScript representation
  10. 10. console.assert console.assert( document.querySelectorAll("#content img").length <= 3, "More than 3 images" );
  11. 11. More console methods console.group(); console.time(); console.profile(); https://developers.google.com/chrome-developer-tools/docs/console
  12. 12. Preserve logs
  13. 13. Sources tab
  14. 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. 15. Breakpoint types Standard breakpoint Conditional breakpoint DOM/XHR/Event Listener breakpoints Disabled breakpoint Deactivated breakpoint
  16. 16. Breakpoint steps Play Step Over Step In Step Out
  17. 17. Navigate by breakpoint Click the text of the breakpoint to go to the corresponding line of code
  18. 18. Call stack Navigate back through your code
  19. 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. 20. Replay your code Right-click the call stack and choose "Restart frame"
  21. 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. 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. 23. A LOT more here We've barely scratched the surface! Chrome DevTools docs HTML5Rocks DevTools digest YouTube DevTools videos
  24. 24. Thanks! abankin@shutterstock.com @adambankin Did I mention we're hiring?!

×