Chrome dev tools tips and tricks

  • Published on
    10-May-2015

  • View
    290

  • Download
    1

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.

Transcript

<ul><li>1.ChromeDevTools TipsandTricks Adam Bankin Shutterstock NYC March 26th, 2014 </li></ul> <p>2. Consoletab 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</p>

Recommended

View more >