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.
   

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

   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. DevTools UX¬
   

   View Slide

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

   View Slide

10. View Slide

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

    View Slide

12. View Slide

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

    View Slide

14. View Slide

15. We’ve continued to evolve Device Mode
    for mobile webapp testing. More on our
    improvements here a little later.
    

    View Slide

16. View Slide

17. Performance¬
    

    View Slide

18. ACCIDENTAL
    SLOWNESS.
    

    View Slide

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

    View Slide

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

    View Slide

21. RAIL
    

    View Slide

22. RAIL
    Response
    < 100ms
    

    View Slide

23. RAIL
    Animation
    < 16.67ms
    

    View Slide

24. RAIL
    Idle
    < 50ms
    

    View Slide

25. RAIL
    Load
    < 1000ms
    

    View Slide

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

    View Slide

27. NETWORK
    

    View Slide

28. Network: Filmstrip
    

    View Slide

29. View Slide

30. Visualise the progression
    of content being loaded
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

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

    View Slide

35. Network: Throttling
    

    View Slide

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

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

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

    View Slide

42. Network: Custom network throttling
    

    View Slide

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

    View Slide

44. View Slide

45. View Slide

46. Network: Block requests
    

    View Slide

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

    View Slide

48. View Slide

49. View Slide

50. Case Study: imore.com
    

    View Slide

51. View Slide

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

    View Slide

53. View Slide

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

    View Slide

55. View Slide

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

    View Slide

57. View Slide

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

    View Slide

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

    View Slide

60. View Slide

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

    View Slide

62. View Slide

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

    View Slide

64. TIMELINE
    

    View Slide

65. Timeline: long frame times
    

    View Slide

66. View Slide

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

    View Slide

68. View Slide

69. Timeline: Filmstrip
    

    View Slide

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

    View Slide

71. View Slide

72. View Slide

73. View Slide

74. Timeline: Aggregated Details
    

    View Slide

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

    View Slide

76. View Slide

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

    View Slide

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

    View Slide

79. View Slide

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

    View Slide

81. View Slide

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

    View Slide

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

    View Slide

84. View Slide

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

    View Slide

86. View Slide

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

88. View Slide

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

    View Slide

90. View Slide

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

    View Slide

92. View Slide

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

    View Slide

94. Timeline: Paint Profiler
    

    View Slide

95. View Slide

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

    View Slide

97. View Slide

98. View Slide

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

    View Slide

100. View Slide

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

     View Slide

102. View Slide

103. Animation¬
     

     View Slide

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.
     

     View Slide

105. Toggle animation controls from
     Elements > Styles
     

     View Slide

106. View Slide

107. Visualise animations by DOM node
     

     View Slide

108. View Slide

109. Control playback speed
     

     View Slide

110. View Slide

111. Modify the duration of individual
     animations
     

     View Slide

112. View Slide

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

     View Slide

114. View Slide

115. Cubic Bezier Editor
     

     View Slide

116. View Slide

117. DOM Animation Changes
     

     View Slide

118. View Slide

119. DOM & Styles ¬
     

     View Slide

120. ELEMENTS
     

     View Slide

121. Elements: Colors & Palettes
     

     View Slide

122. Eye Dropper tool
     

     View Slide

123. View Slide

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

     View Slide

125. View Slide

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

     View Slide

127. Elements: Search selectors
     

     View Slide

128. View Slide

129. Elements: Event Listeners
     

     View Slide

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

     View Slide

131. View Slide

132. Elements: Framework Event Listeners
     

     View Slide

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

     View Slide

134. Before
     

     View Slide

135. After
     

     View Slide

136. Elements: Edit HTML in Console
     

     View Slide

137. View Slide

138. View Slide

139. JavaScript¬
     

     View Slide

140. $0
     $$(‘header’);
     copy(document.body);
     inspect(document.body.firstChild);
     console.timeStamp(‘Please be super fast, k?’);
     Good old console pro-tips:
     

     View Slide

141. Sources: Inline variables
     

     View Slide

142. View Slide

143. View Slide

144. Sources: Proactive Compilation
     

     View Slide

145. View Slide

146. Blackboxing JS libraries
     

     View Slide

147. View Slide

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.
     

     View Slide

149. View Slide

150. View Slide

151. View Slide

152. Future¬
     

     View Slide

153. Experimental: Accessibility
     Inspection
     

     View Slide

154. View Slide

155. Experimental: Security Panel
     

     View Slide

156. View Slide

157. View Slide

158. LEARN
     MORE
     

     View Slide

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

     View Slide

160. umaar.com/dev-tips
     

     View Slide

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

     View Slide

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

     View Slide

163. http://totallytooling.tips
     

     View Slide

164. Thank you!¬
     +AddyOsmani
     @addyosmani
     

     View Slide