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
   

   View Slide

2. @addyosmani
   +AddyOsmani
   

   View Slide

3. The
   90s
   

   View Slide

4. Browser developer tools were a
   mix of bookmarklets, debuggers,
   extensions & duct-tape.
   

   View Slide

5. Today?
   

   View Slide

6. We’re building increasingly ambitious
   web-apps with a focus on mobile,
   performance and better UX.
   

   View Slide

7. View Slide

8. Fresh¬
   Chrome 48 & 49+
   

   View Slide

9. 72% of mobile users say it’s
   important that websites are
   mobile-friendly. 96% have
   visited a site that isn’t
   

   View Slide

10. Device Mode 1.0
    OLD
    

    View Slide

11. View Slide

12. GOOD, BUT MOBILE
    TESTING IS STILL
    OFTEN AN
    AFTERTHOUGHT
    

    View Slide

13. Device Mode 2.0
    NEW!
    

    View Slide

14. View Slide

15. LET’S PUT MOBILE
    FRONT & CENTRE
    

    View Slide

16. View Slide

17. Navigation bar
    above viewport
    Device
    Orientation
    Device Pixel
    Ratio
    Switch between
    Responsive mode
    and Devices
    Toggle between
    Mobile & Desktop
    Show CSS Media
    Queries
    

    View Slide

18. Device chrome for
    some devices
    

    View Slide

19. CONTROL WHICH DEVICES ARE
    DISPLAYED IN THE EMULATION
    DROP-DOWN
    

    View Slide

20. View Slide

21. Toggle Element Classes
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. Security Panel
    

    View Slide

26. LET’S MAKE IT EASIER
    TO DEBUG HTTPS
    CONNECTIONS
    

    View Slide

27. View Slide

28. View Slide

29. Service Worker Panel
    

    View Slide

30. OLD WORKFLOW USED
    AN INTERNAL
    CHROME PAGE
    

    View Slide

31. View Slide

32. NEW & IMPROVED
    WORKFLOW IN
    RESOURCES PANEL
    

    View Slide

33. View Slide

34. Emulate Push
    notification
    events
    Delete SW
    Update SW
    

    View Slide

35. Visualize Fetch Dependencies
    

    View Slide

36. Shift + Hover to trigger
    Green is the parent
    Red is the child
    

    View Slide

37. View Slide

38. Custom Object Formatters
    

    View Slide

39. Control how the value
    of a JavaScript object
    appears in Chrome's
    debugger
    

    View Slide

40. https://goo.gl/kfx5sX for more details
    Enable via DevTools Settings
    

    View Slide

41. UX¬
    

    View Slide

42. First, we realised the Console panel is
    used pretty frequently. So, it’s now the
    2nd tab, right after Elements.
    

    View Slide

43. View Slide

44. Next, we wanted to give you the flexibility
    to rearrange tabs (using drag-and-drop)
    to suit your workflow. Now supported!
    

    View Slide

45. View Slide

46. A new main menu greatly simplifies the
    toolbar. Access docking, remote
    debugging, rendering settings & more.
    

    View Slide

47. View Slide

48. A new overflow menu provides access to
    panels you don’t always need in the
    drawer. Close and re-open them as
    needed.
    

    View Slide

49. View Slide

50. Earlier this year, we enabled syntax
    highlighting in Console too. ES2015
    code looks so much better there now.
    

    View Slide

51. View Slide

52. Performance¬
    

    View Slide

53. ACCIDENTAL
    SLOWNESS.
    

    View Slide

54. WAITING FOR THIS PAGE TO FINISH LOADING.
    ANY DAY NOW.
    

    View Slide

55. We need a better way to frame the
    performance conversation.
    Something that quantifies each stage
    of the user experience.
    

    View Slide

56. RAIL
    

    View Slide

57. RAIL
    Response
    < 100ms
    

    View Slide

58. RAIL
    Animation
    < 16.67ms
    

    View Slide

59. RAIL
    Idle
    < 50ms
    

    View Slide

60. RAIL
    Load
    < 1000ms
    

    View Slide

61. Let’s first look at new ways to help
    with Load profiling in the Network
    panel.
    

    View Slide

62. NETWORK
    

    View Slide

63. Network: Filmstrip
    

    View Slide

64. View Slide

65. Visualise the progression
    of content being loaded
    

    View Slide

66. View Slide

67. View Slide

68. View Slide

69. Good for optimising first
    meaningful paint & priority
    content being loaded
    

    View Slide

70. Network: Throttling
    

    View Slide

71. Simulate slow network
    connections your users are
    likely to experience on mobile.
    

    View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. Before you marry a person
    you should first make them
    use a computer with slow
    Internet to see who they
    really are.
    

    View Slide

77. Network: Custom network throttling
    

    View Slide

78. Settings > Throttling
    Add your own custom profiles for
    simulating slow connections
    

    View Slide

79. View Slide

80. View Slide

81. Network: Block requests
    

    View Slide

82. 1. about:flags -> Enable DevTools Experiments
    2. Relaunch Chrome
    3. Open DevTools > Settings > Experiments
    4. Hit Shift 6 times
    Enable Hidden Experiments
    

    View Slide

83. View Slide

84. Unsure if requests from a URL
    or domain are slowing you
    down? You can block them.
    

    View Slide

85. View Slide

86. View Slide

87. Case Study: imore.com
    

    View Slide

88. View Slide

89. 3G: First meaningful paint
    occurs ~ 9s in
    

    View Slide

90. View Slide

91. 3G: Web fonts start getting
    applied ~ 22s in
    

    View Slide

92. View Slide

93. There are a ton of Web fonts
    in this page. All needed?
    * used the WhatFont extension to inspect
    

    View Slide

94. View Slide

95. ~340 network requests.
    Majority = 3rd party widgets & ads.
    

    View Slide

96. What’s the performance
    impact of these on the page?
    

    View Slide

97. View Slide

98. What’s the performance
    impact of these on the page?
    

    View Slide

99. View Slide

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 :)
     

     View Slide

101. TIMELINE
     

     View Slide

102. Timeline: long frame times
     

     View Slide

103. View Slide

104. Long frame times indicate the
     presence of jank in your page.
     Watch out for the red triangles.
     

     View Slide

105. View Slide

106. Timeline: Filmstrip
     

     View Slide

107. Screenshots for visualising
     content being rendered are
     also now available.
     

     View Slide

108. View Slide

109. View Slide

110. View Slide

111. Timeline: Aggregated Details
     

     View Slide

112. Focus on costly features by
     domain, sub-domain or URL.
     

     View Slide

113. View Slide

114. Super useful for attributing
     slow-down to third party
     scripts & embeds
     

     View Slide

115. Case Study: HackerNews app
     * https://github.com/udacity/news-aggregator
     

     View Slide

116. View Slide

117. Record a new Timeline profile
     and scroll through the app.
     

     View Slide

118. View Slide

119. We’re seeing lots of red-
     triangle indications of jank as
     we scroll. Hmm.
     

     View Slide

120. On scroll, new stories are
     loaded in and a colorisation
     effect is applied depending on
     load ‘state’
     

     View Slide

121. View Slide

122. Here’s a piece of work blowing our
     frame budget.
     We can attribute part of it to this
     colorizeAndScaleStories() function.
     

     View Slide

123. View Slide

124. Digging into the source, we’re
     querying the DOM and making style
     changes to *all* our story tiles
     every time we scroll. Oops.
     

     View Slide

125. View Slide

126. Is this really necessary? Wouldn’t a
     jank-free scrolling experience be
     better? Let’s comment it out.
     

     View Slide

127. View Slide

128. A little more work to do, but the
     overall experience is way smoother
     than it was before.
     

     View Slide

129. View Slide

130. In the real-world, if you really
     wanted to keep the effect schedule
     this work more appropriately.
     

     View Slide

131. Timeline: Paint Profiler
     

     View Slide

132. View Slide

133. Check 'Paint' for detailed paint
     records. Selecting a paint record
     gets you access to the Paint
     Profiler for that frame.
     

     View Slide

134. View Slide

135. View Slide

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'.
     

     View Slide

137. View Slide

138. Click the 'paint profiler' link to see
     what got painted, how long it took
     and see the individual paint calls.
     

     View Slide

139. View Slide

140. Animation¬
     

     View Slide

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.
     

     View Slide

142. Toggle animation controls from
     Elements > Styles
     

     View Slide

143. View Slide

144. Visualise animations by DOM node
     

     View Slide

145. View Slide

146. Control playback speed
     

     View Slide

147. View Slide

148. Modify the duration of individual
     animations
     

     View Slide

149. View Slide

150. Play back the modified animation.
     Awesome for testing tweaks before
     updating your source.
     

     View Slide

151. View Slide

152. Cubic Bezier Editor
     

     View Slide

153. View Slide

154. DOM Animation Changes
     

     View Slide

155. View Slide

156. DOM & Styles ¬
     

     View Slide

157. ELEMENTS
     

     View Slide

158. Elements: Colors & Palettes
     

     View Slide

159. Eye Dropper tool
     

     View Slide

160. View Slide

161. Color palettes for the page, Material
     Design palette & custom palette
     support.
     

     View Slide

162. View Slide

163. CSS
     IS
     AWESOME
     FINDING CSS SELECTORS IN THE DOM TREE CAN BE TRICKY.
     

     View Slide

164. Elements: Search selectors
     

     View Slide

165. View Slide

166. Elements: Event Listeners
     

     View Slide

167. Elements > Event Listeners allows
     you to browse events registered on
     any DOM node
     

     View Slide

168. View Slide

169. Elements: Framework Event Listeners
     

     View Slide

170. View event listeners registered on
     DOM nodes even if they’re using a
     JavaScript framework.
     

     View Slide

171. Before
     

     View Slide

172. After
     

     View Slide

173. Elements: Edit HTML in Console
     

     View Slide

174. View Slide

175. View Slide

176. JavaScript¬
     

     View Slide

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..
     

     View Slide

178. Sources: Inline variables
     

     View Slide

179. View Slide

180. View Slide

181. Sources: Proactive Compilation
     

     View Slide

182. View Slide

183. Blackboxing JS libraries
     

     View Slide

184. View Slide

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.
     

     View Slide

186. View Slide

187. View Slide

188. View Slide

189. LEARN
     MORE
     

     View Slide

190. View Slide

191. developers.google.com/web/tools/chrome-devtools
     

     View Slide

192. umaar.com/dev-tips
     

     View Slide

193. http://www.paulirish.com/2015/advanced-performance-audits-with-devtools/
     https://github.com/reddit/reddit-mobile/issues/247
     

     View Slide

194. https://www.udacity.com/course/browser-rendering-optimization--ud860
     

     View Slide

195. http://totallytooling.tips
     

     View Slide

196. Thank you!¬
     +AddyOsmani
     @addyosmani
     

     View Slide