What's new in Chrome DevTools?

96270e4c3e5e9806cf7245475c00b275?s=47 Addy Osmani
September 28, 2015

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.

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

September 28, 2015
Tweet

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

  9. First, we realised the Console panel is used pretty frequently.

    So, it’s now the 2nd tab, right after Elements.
  10. None
  11. Next, we wanted to give you the flexibility to rearrange

    tabs (using drag-and-drop) to suit your workflow. Now supported!
  12. None
  13. Earlier this year, we enabled syntax highlighting in Console too.

    ES2015 code looks so much better there now.
  14. None
  15. We’ve continued to evolve Device Mode for mobile webapp testing.

    More on our improvements here a little later.
  16. None
  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

  29. None
  30. Visualise the progression of content being loaded

  31. None
  32. None
  33. None
  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.
  37. None
  38. None
  39. None
  40. None
  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
  44. None
  45. None
  46. Network: Block requests

  47. Unsure if requests from a URL or domain are slowing

    you down? You can block them.
  48. None
  49. None
  50. Case Study: imore.com

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

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

  55. None
  56. There are a ton of Web fonts in this page.

    All needed? * used the WhatFont extension to inspect
  57. None
  58. ~340 network requests. Majority = 3rd party widgets & ads.

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

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

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

  66. None
  67. Long frame times indicate the presence of jank in your

    page. Watch out for the red triangles.
  68. None
  69. Timeline: Filmstrip

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

  71. None
  72. None
  73. None
  74. Timeline: Aggregated Details

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

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

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

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

  81. None
  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’
  84. None
  85. Here’s a piece of work blowing our frame budget. We

    can attribute part of it to this colorizeAndScaleStories() function.
  86. None
  87. Digging into the source, we’re querying the DOM and making

    style changes to *all* our story tiles every time we scroll. Oops.
  88. None
  89. Is this really necessary? Wouldn’t a jank-free scrolling experience be

    better? Let’s comment it out.
  90. None
  91. A little more work to do, but the overall experience

    is way smoother than it was before.
  92. None
  93. In the real-world, if you really wanted to keep the

    effect schedule this work more appropriately.
  94. Timeline: Paint Profiler

  95. None
  96. Check 'Paint' for detailed paint records. Selecting a paint record

    gets you access to the Paint Profiler for that frame.
  97. None
  98. None
  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'.
  100. None
  101. Click the 'paint profiler' link to see what got painted,

    how long it took and see the individual paint calls.
  102. None
  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

  106. None
  107. Visualise animations by DOM node

  108. None
  109. Control playback speed

  110. None
  111. Modify the duration of individual animations

  112. None
  113. Play back the modified animation. Awesome for testing tweaks before

    updating your source.
  114. None
  115. Cubic Bezier Editor

  116. None
  117. DOM Animation Changes

  118. None
  119. DOM & Styles ¬

  120. ELEMENTS

  121. Elements: Colors & Palettes

  122. Eye Dropper tool

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

    palette support.
  125. None
  126. CSS IS AWESOME FINDING CSS SELECTORS IN THE DOM TREE

    CAN BE TRICKY.
  127. Elements: Search selectors

  128. None
  129. Elements: Event Listeners

  130. Elements > Event Listeners allows you to browse events registered

    on any DOM node
  131. None
  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

  137. None
  138. None
  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

  142. None
  143. None
  144. Sources: Proactive Compilation

  145. None
  146. Blackboxing JS libraries

  147. None
  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.
  149. None
  150. None
  151. None
  152. Future¬

  153. Experimental: Accessibility Inspection

  154. None
  155. Experimental: Security Panel

  156. None
  157. None
  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