• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Chrome dev tools tips and tricks
 

Chrome dev tools tips and tricks

on

  • 104 views

Get more out of Chrome DevTools. ...

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.

Statistics

Views

Total Views
104
Views on SlideShare
104
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Chrome dev tools tips and tricks Chrome dev tools tips and tricks Presentation Transcript

    • Chrome DevTools Tips and Tricks Adam Bankin Shutterstock NYC March 26th, 2014
    • Console tab
    • console.log var obj = { a: 1, b: 2, c: 3 } console.log(obj);
    • console.warn var obj = { a: 1, b: 2, c: 3 } console.warn(obj);
    • console.trace function firstFunc () { secondFunc() } function secondFunc () { console.trace() } firstFunc();
    • console.error try { doStuff(); } catch (e) { console.error("There has been an error, yo"); }
    • 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);
    • console.table [continued] console.table( document.querySelectorAll("#content img"), ["src", "width"] );
    • console.dir/dir console.log(document.querySelectorAll("#content img")); // String representation console.dir(document.querySelectorAll("#content img")); // JavaScript representation
    • console.assert console.assert( document.querySelectorAll("#content img").length <= 3, "More than 3 images" );
    • More console methods console.group(); console.time(); console.profile(); https://developers.google.com/chrome-developer-tools/docs/console
    • Preserve logs
    • Sources tab
    • 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();
    • Breakpoint types Standard breakpoint Conditional breakpoint DOM/XHR/Event Listener breakpoints Disabled breakpoint Deactivated breakpoint
    • Breakpoint steps Play Step Over Step In Step 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 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);
    • (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 here We've barely scratched the surface! Chrome DevTools docs HTML5Rocks DevTools digest YouTube DevTools videos
    • Thanks! abankin@shutterstock.com @adambankin Did I mention we're hiring?!