Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chrome DevTools tips and tricks

Chrome DevTools tips and tricks

Damian Nicholson

July 06, 2017

More Decks by Damian Nicholson

Other Decks in Programming


  1. right click + inspect = show DevTools command + option

    + i = toggle DevTools command + option + j = toggle DevTools with Console focussed command + shift + c = toggle DevTools in Inspect Element mode escape = toggle console Opening DevTools
  2. console.log(as, many, args, can, go, here, as, you, like); console.log('%cChrome

    dev tools', 'background: red;'); console.log('%cChrome dev tools', 'background: red; font-size: 50px;'); console.log
  3. console.log(‘Today is %s %ith’, ‘July’, 6); Format specifiers Specifier Output

    %s String %i or %d Integer %f Float %o Expandable DOM element %O Expandable JavaScript object %c Applies CSS rules
  4. function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName =

    lastName; this.age = age; } var family = {}; family.mother = new Person("Susan", "Doyle", 32); family.father = new Person("John", "Doyle", 33); family.daughter = new Person("Lily", "Doyle", 5); family.son = new Person("Mike", "Doyle", 8); console.table(family, ['firstName']); console API reference console.table(array | object)
  5. shift + click to toggle between hex, rgb and hsl

    shift + click style rule to see CSS in Source panel shift + up to increment a unit by 10 alt + up to increment a unit by 0.1 CSS tips - Styles panel