Chrome DevTools tips and tricks

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