Slide 1
Slide 1 text
What’s new in
Chrome DevTools?¬
FITC Web Unleashed 2015
September 2015, Toronto.
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
2015?
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
DevTools UX¬
Slide 9
Slide 9 text
First, we realised the Console panel is
used pretty frequently. So, it’s now the
2nd tab, right after Elements.
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Next, we wanted to give you the flexibility
to rearrange tabs (using drag-and-drop)
to suit your workflow. Now supported!
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Earlier this year, we enabled syntax
highlighting in Console too. ES2015
code looks so much better there now.
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
We’ve continued to evolve Device Mode
for mobile webapp testing. More on our
improvements here a little later.
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Performance¬
Slide 18
Slide 18 text
ACCIDENTAL
SLOWNESS.
Slide 19
Slide 19 text
WAITING FOR THIS PAGE TO FINISH LOADING.
ANY DAY NOW.
Slide 20
Slide 20 text
We need a better way to frame the
performance conversation.
Something that quantifies each stage
of the user experience.
Slide 21
Slide 21 text
RAIL
Slide 22
Slide 22 text
RAIL
Response
< 100ms
Slide 23
Slide 23 text
RAIL
Animation
< 16.67ms
Slide 24
Slide 24 text
RAIL
Idle
< 50ms
Slide 25
Slide 25 text
RAIL
Load
< 1000ms
Slide 26
Slide 26 text
Let’s first look at new ways to help
with Load profiling in the Network
panel.
Slide 27
Slide 27 text
NETWORK
Slide 28
Slide 28 text
Network: Filmstrip
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Visualise the progression
of content being loaded
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Good for optimising first
meaningful paint & priority
content being loaded
Slide 35
Slide 35 text
Network: Throttling
Slide 36
Slide 36 text
Simulate slow network
connections your users are
likely to experience on mobile.
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Before you marry a person
you should first make them
use a computer with slow
Internet to see who they
really are.
Slide 42
Slide 42 text
Network: Custom network throttling
Slide 43
Slide 43 text
Settings > Throttling
Add your own custom profiles for
simulating slow connections
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Network: Block requests
Slide 47
Slide 47 text
Unsure if requests from a URL
or domain are slowing you
down? You can block them.
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Case Study: imore.com
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
3G: First meaningful paint
occurs ~ 9s in
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
3G: Web fonts start getting
applied ~ 22s in
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
There are a ton of Web fonts
in this page. All needed?
* used the WhatFont extension to inspect
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
~340 network requests.
Majority = 3rd party widgets & ads.
Slide 59
Slide 59 text
What’s the performance
impact of these on the page?
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
What’s the performance
impact of these on the page?
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 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 64
Slide 64 text
TIMELINE
Slide 65
Slide 65 text
Timeline: long frame times
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
Long frame times indicate the
presence of jank in your page.
Watch out for the red triangles.
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
Timeline: Filmstrip
Slide 70
Slide 70 text
Screenshots for visualising
content being rendered are
also now available.
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
Timeline: Aggregated Details
Slide 75
Slide 75 text
Focus on costly features by
domain, sub-domain or URL.
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
Super useful for attributing
slow-down to third party
scripts & embeds
Slide 78
Slide 78 text
Case Study: HackerNews app
* https://github.com/udacity/news-aggregator
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Record a new Timeline profile
and scroll through the app.
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
We’re seeing lots of red-
triangle indications of jank as
we scroll. Hmm.
Slide 83
Slide 83 text
On scroll, new stories are
loaded in and a colorisation
effect is applied depending on
load ‘state’
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
Here’s a piece of work blowing our
frame budget.
We can attribute part of it to this
colorizeAndScaleStories() function.
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 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 88
Slide 88 text
No content
Slide 89
Slide 89 text
Is this really necessary? Wouldn’t a
jank-free scrolling experience be
better? Let’s comment it out.
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
A little more work to do, but the
overall experience is way smoother
than it was before.
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
In the real-world, if you really
wanted to keep the effect schedule
this work more appropriately.
Slide 94
Slide 94 text
Timeline: Paint Profiler
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Check 'Paint' for detailed paint
records. Selecting a paint record
gets you access to the Paint
Profiler for that frame.
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 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 100
Slide 100 text
No content
Slide 101
Slide 101 text
Click the 'paint profiler' link to see
what got painted, how long it took
and see the individual paint calls.
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Animation¬
Slide 104
Slide 104 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 105
Slide 105 text
Toggle animation controls from
Elements > Styles
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
Visualise animations by DOM node
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
Control playback speed
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
Modify the duration of individual
animations
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
Play back the modified animation.
Awesome for testing tweaks before
updating your source.
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
Cubic Bezier Editor
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
DOM Animation Changes
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
DOM & Styles ¬
Slide 120
Slide 120 text
ELEMENTS
Slide 121
Slide 121 text
Elements: Colors & Palettes
Slide 122
Slide 122 text
Eye Dropper tool
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
Color palettes for the page, Material
Design palette & custom palette
support.
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
CSS
IS
AWESOME
FINDING CSS SELECTORS IN THE DOM TREE CAN BE TRICKY.
Slide 127
Slide 127 text
Elements: Search selectors
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
Elements: Event Listeners
Slide 130
Slide 130 text
Elements > Event Listeners allows
you to browse events registered on
any DOM node
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
Elements: Framework Event Listeners
Slide 133
Slide 133 text
View event listeners registered on
DOM nodes even if they’re using a
JavaScript framework.
Slide 134
Slide 134 text
Before
Slide 135
Slide 135 text
After
Slide 136
Slide 136 text
Elements: Edit HTML in Console
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
JavaScript¬
Slide 140
Slide 140 text
$0
$$(‘header’);
copy(document.body);
inspect(document.body.firstChild);
console.timeStamp(‘Please be super fast, k?’);
Good old console pro-tips:
Slide 141
Slide 141 text
Sources: Inline variables
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
Sources: Proactive Compilation
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
Blackboxing JS libraries
Slide 147
Slide 147 text
No content
Slide 148
Slide 148 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.
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
Future¬
Slide 153
Slide 153 text
Experimental: Accessibility
Inspection
Slide 154
Slide 154 text
No content
Slide 155
Slide 155 text
Experimental: Security Panel
Slide 156
Slide 156 text
No content
Slide 157
Slide 157 text
No content
Slide 158
Slide 158 text
LEARN
MORE
Slide 159
Slide 159 text
developers.google.com/web/tools/chrome-devtools
Slide 160
Slide 160 text
umaar.com/dev-tips
Slide 161
Slide 161 text
http://www.paulirish.com/2015/advanced-performance-audits-with-devtools/
https://github.com/reddit/reddit-mobile/issues/247
Slide 162
Slide 162 text
https://www.udacity.com/course/browser-rendering-optimization--ud860
Slide 163
Slide 163 text
http://totallytooling.tips
Slide 164
Slide 164 text
Thank you!¬
+AddyOsmani
@addyosmani