CHROME DEVTOOLS
DEEP-DIVE
#FULLSTACKCON 2015
EXTENDED VERSION
Slide 2
Slide 2 text
@addyosmani
+AddyOsmani
Slide 3
Slide 3 text
The
90s
Slide 4
Slide 4 text
Browser developer tools were a
mix of bookmarklets, debuggers,
extensions & duct-tape.
Slide 5
Slide 5 text
Today?
Slide 6
Slide 6 text
We’re building increasingly ambitious
web-apps with a focus on mobile,
performance and better UX.
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Fresh¬
Chrome 48 & 49+
Slide 9
Slide 9 text
72% of mobile users say it’s
important that websites are
mobile-friendly. 96% have
visited a site that isn’t
Slide 10
Slide 10 text
Device Mode 1.0
OLD
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
GOOD, BUT MOBILE
TESTING IS STILL
OFTEN AN
AFTERTHOUGHT
Slide 13
Slide 13 text
Device Mode 2.0
NEW!
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
LET’S PUT MOBILE
FRONT & CENTRE
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Navigation bar
above viewport
Device
Orientation
Device Pixel
Ratio
Switch between
Responsive mode
and Devices
Toggle between
Mobile & Desktop
Show CSS Media
Queries
Slide 18
Slide 18 text
Device chrome for
some devices
Slide 19
Slide 19 text
CONTROL WHICH DEVICES ARE
DISPLAYED IN THE EMULATION
DROP-DOWN
Shift + Hover to trigger
Green is the parent
Red is the child
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Custom Object Formatters
Slide 39
Slide 39 text
Control how the value
of a JavaScript object
appears in Chrome's
debugger
Slide 40
Slide 40 text
https://goo.gl/kfx5sX for more details
Enable via DevTools Settings
Slide 41
Slide 41 text
UX¬
Slide 42
Slide 42 text
First, we realised the Console panel is
used pretty frequently. So, it’s now the
2nd tab, right after Elements.
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Next, we wanted to give you the flexibility
to rearrange tabs (using drag-and-drop)
to suit your workflow. Now supported!
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
A new main menu greatly simplifies the
toolbar. Access docking, remote
debugging, rendering settings & more.
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
A new overflow menu provides access to
panels you don’t always need in the
drawer. Close and re-open them as
needed.
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Earlier this year, we enabled syntax
highlighting in Console too. ES2015
code looks so much better there now.
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Performance¬
Slide 53
Slide 53 text
ACCIDENTAL
SLOWNESS.
Slide 54
Slide 54 text
WAITING FOR THIS PAGE TO FINISH LOADING.
ANY DAY NOW.
Slide 55
Slide 55 text
We need a better way to frame the
performance conversation.
Something that quantifies each stage
of the user experience.
Slide 56
Slide 56 text
RAIL
Slide 57
Slide 57 text
RAIL
Response
< 100ms
Slide 58
Slide 58 text
RAIL
Animation
< 16.67ms
Slide 59
Slide 59 text
RAIL
Idle
< 50ms
Slide 60
Slide 60 text
RAIL
Load
< 1000ms
Slide 61
Slide 61 text
Let’s first look at new ways to help
with Load profiling in the Network
panel.
Slide 62
Slide 62 text
NETWORK
Slide 63
Slide 63 text
Network: Filmstrip
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Visualise the progression
of content being loaded
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
Good for optimising first
meaningful paint & priority
content being loaded
Slide 70
Slide 70 text
Network: Throttling
Slide 71
Slide 71 text
Simulate slow network
connections your users are
likely to experience on mobile.
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Before you marry a person
you should first make them
use a computer with slow
Internet to see who they
really are.
Slide 77
Slide 77 text
Network: Custom network throttling
Slide 78
Slide 78 text
Settings > Throttling
Add your own custom profiles for
simulating slow connections
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
Network: Block requests
Slide 82
Slide 82 text
1. about:flags -> Enable DevTools Experiments
2. Relaunch Chrome
3. Open DevTools > Settings > Experiments
4. Hit Shift 6 times
Enable Hidden Experiments
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
Unsure if requests from a URL
or domain are slowing you
down? You can block them.
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
Case Study: imore.com
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
3G: First meaningful paint
occurs ~ 9s in
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
3G: Web fonts start getting
applied ~ 22s in
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
There are a ton of Web fonts
in this page. All needed?
* used the WhatFont extension to inspect
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
~340 network requests.
Majority = 3rd party widgets & ads.
Slide 96
Slide 96 text
What’s the performance
impact of these on the page?
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
What’s the performance
impact of these on the page?
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
3G: First meaningful paint
now ~ 5.6s in
* this was a quick test and may not be indicative of the
real possible gains. They’re likely nuanced :)
Slide 101
Slide 101 text
TIMELINE
Slide 102
Slide 102 text
Timeline: long frame times
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
Long frame times indicate the
presence of jank in your page.
Watch out for the red triangles.
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
Timeline: Filmstrip
Slide 107
Slide 107 text
Screenshots for visualising
content being rendered are
also now available.
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
Timeline: Aggregated Details
Slide 112
Slide 112 text
Focus on costly features by
domain, sub-domain or URL.
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
Super useful for attributing
slow-down to third party
scripts & embeds
Slide 115
Slide 115 text
Case Study: HackerNews app
* https://github.com/udacity/news-aggregator
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
Record a new Timeline profile
and scroll through the app.
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
We’re seeing lots of red-
triangle indications of jank as
we scroll. Hmm.
Slide 120
Slide 120 text
On scroll, new stories are
loaded in and a colorisation
effect is applied depending on
load ‘state’
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
Here’s a piece of work blowing our
frame budget.
We can attribute part of it to this
colorizeAndScaleStories() function.
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
Digging into the source, we’re
querying the DOM and making style
changes to *all* our story tiles
every time we scroll. Oops.
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
Is this really necessary? Wouldn’t a
jank-free scrolling experience be
better? Let’s comment it out.
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
A little more work to do, but the
overall experience is way smoother
than it was before.
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
In the real-world, if you really
wanted to keep the effect schedule
this work more appropriately.
Slide 131
Slide 131 text
Timeline: Paint Profiler
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
Check 'Paint' for detailed paint
records. Selecting a paint record
gets you access to the Paint
Profiler for that frame.
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
Rotate, zoom or drag layers to
explore their content. Hovering over
a layer reveals the current position
on the page. Right-click to jump to
the node in 'Elements'.
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
Click the 'paint profiler' link to see
what got painted, how long it took
and see the individual paint calls.
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
Animation¬
Slide 141
Slide 141 text
Animation Inspection
* Note this feature is behind an experiment atm.
Enable DevTools experiments in about:flags, relaunch & then turn this on via Settings > Experiments.
Slide 142
Slide 142 text
Toggle animation controls from
Elements > Styles
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
Visualise animations by DOM node
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
Control playback speed
Slide 147
Slide 147 text
No content
Slide 148
Slide 148 text
Modify the duration of individual
animations
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
Play back the modified animation.
Awesome for testing tweaks before
updating your source.
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
Cubic Bezier Editor
Slide 153
Slide 153 text
No content
Slide 154
Slide 154 text
DOM Animation Changes
Slide 155
Slide 155 text
No content
Slide 156
Slide 156 text
DOM & Styles ¬
Slide 157
Slide 157 text
ELEMENTS
Slide 158
Slide 158 text
Elements: Colors & Palettes
Slide 159
Slide 159 text
Eye Dropper tool
Slide 160
Slide 160 text
No content
Slide 161
Slide 161 text
Color palettes for the page, Material
Design palette & custom palette
support.
Slide 162
Slide 162 text
No content
Slide 163
Slide 163 text
CSS
IS
AWESOME
FINDING CSS SELECTORS IN THE DOM TREE CAN BE TRICKY.
Slide 164
Slide 164 text
Elements: Search selectors
Slide 165
Slide 165 text
No content
Slide 166
Slide 166 text
Elements: Event Listeners
Slide 167
Slide 167 text
Elements > Event Listeners allows
you to browse events registered on
any DOM node
Slide 168
Slide 168 text
No content
Slide 169
Slide 169 text
Elements: Framework Event Listeners
Slide 170
Slide 170 text
View event listeners registered on
DOM nodes even if they’re using a
JavaScript framework.
Slide 171
Slide 171 text
Before
Slide 172
Slide 172 text
After
Slide 173
Slide 173 text
Elements: Edit HTML in Console
Slide 174
Slide 174 text
No content
Slide 175
Slide 175 text
No content
Slide 176
Slide 176 text
JavaScript¬
Slide 177
Slide 177 text
$0
$$(‘header’);
copy(document.body);
inspect(document.body.firstChild);
console.timeStamp(‘Please be super fast, k?’);
Pro-tips have come a long way since..
Slide 178
Slide 178 text
Sources: Inline variables
Slide 179
Slide 179 text
No content
Slide 180
Slide 180 text
No content
Slide 181
Slide 181 text
Sources: Proactive Compilation
Slide 182
Slide 182 text
No content
Slide 183
Slide 183 text
Blackboxing JS libraries
Slide 184
Slide 184 text
No content
Slide 185
Slide 185 text
ES2015 Promises Inspector
* Note this feature is behind an experiment atm.
Enable DevTools experiments in about:flags, relaunch & then turn this on via Settings > Experiments.