What's new in Chrome DevTools?

📹Video: https://www.youtube.com/watch?v=XpGa6IzmmQg

Presented at FITC Web Unleashed 2015, Toronto.

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