Chrome DevTools Deep-dive

Talk from Fullstack Conf London, 2015.

Video: https://skillsmatter.com/skillscasts/6890-keynote-chrome-devtools-deep-dive

As the complexity of the web apps you build keeps moving, so do the Chrome DevTools.

In this session, Addy will give you the latest update on your favourite companion; exploring new features in performance profiling, JavaScript debugging and animation inspection. You’ll walk out of the session with a huge advantage in productivity, speed, and precision when developing, debugging, and improving your web applications.

Transcript

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