Slide 1
Slide 1 text
Chrome DevTools
@damian
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Reload
Click and hold refresh icon
Slide 4
Slide 4 text
Console convenice methods
$(‘selector’) = document.querySelector('selector');
$$(‘selector’) = document.querySelectorAll('selector');
Slide 5
Slide 5 text
Console magic variables
$0 - 4
$_ = reference to last expression
Slide 6
Slide 6 text
Console
copy(variable) = copy to clipboard
inspect(element) = open element in Elements panel
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
console.assert(expression, “A failed assertion message”);
console.dir(element) === console.log('%o', element);
console methods
Slide 10
Slide 10 text
console.count(label);
console.count(string)
Slide 11
Slide 11 text
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)
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
command + shift + m = toggle device mode
Mobile device testing
Slide 14
Slide 14 text
blue = maximum width
green = range
beige = minimum width
Media queries
Slide 15
Slide 15 text
Landed in Chrome 59!!!
Full page screenshots
Slide 16
Slide 16 text
Network throttling
CPU throttling
Mobile device testing - Performance panel
Slide 17
Slide 17 text
method:GET
status-code: 200
-method:OPTIONS
-.png
block network request(Chrome 59)
Network panel
Slide 18
Slide 18 text
The end