Chrome DevTools tips and tricks

Chrome DevTools tips and tricks

94c767fbe5e2ce7ba74e9833c8e03d45?s=128

Damian Nicholson

July 06, 2017
Tweet

Transcript

  1. Chrome DevTools @damian

  2. 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
  3. Reload Click and hold refresh icon

  4. Console convenice methods $(‘selector’) = document.querySelector('selector'); $$(‘selector’) = document.querySelectorAll('selector');

  5. Console magic variables $0 - 4 $_ = reference to

    last expression
  6. Console copy(variable) = copy to clipboard inspect(element) = open element

    in Elements panel
  7. 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
  8. 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
  9. console.assert(expression, “A failed assertion message”); console.dir(element) === console.log('%o', element); console

    methods
  10. console.count(label); console.count(string)

  11. 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)
  12. 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
  13. command + shift + m = toggle device mode Mobile

    device testing
  14. blue = maximum width green = range beige = minimum

    width Media queries
  15. Landed in Chrome 59!!! Full page screenshots

  16. Network throttling CPU throttling Mobile device testing - Performance panel

  17. method:GET status-code: 200 -method:OPTIONS -.png block network request(Chrome 59) Network

    panel
  18. The end