Chrome DevTools Deep-dive

96270e4c3e5e9806cf7245475c00b275?s=47 Addy Osmani
November 22, 2015

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.

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

November 22, 2015
Tweet

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

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

  13. Device Mode 2.0 NEW!

  14. None
  15. LET’S PUT MOBILE FRONT & CENTRE

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

  20. None
  21. Toggle Element Classes

  22. None
  23. None
  24. None
  25. Security Panel

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

  27. None
  28. None
  29. Service Worker Panel

  30. OLD WORKFLOW USED AN INTERNAL CHROME PAGE

  31. None
  32. NEW & IMPROVED WORKFLOW IN RESOURCES PANEL

  33. None
  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
  37. None
  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.
  43. None
  44. Next, we wanted to give you the flexibility to rearrange

    tabs (using drag-and-drop) to suit your workflow. Now supported!
  45. None
  46. A new main menu greatly simplifies the toolbar. Access docking,

    remote debugging, rendering settings & more.
  47. None
  48. A new overflow menu provides access to panels you don’t

    always need in the drawer. Close and re-open them as needed.
  49. None
  50. Earlier this year, we enabled syntax highlighting in Console too.

    ES2015 code looks so much better there now.
  51. None
  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

  64. None
  65. Visualise the progression of content being loaded

  66. None
  67. None
  68. None
  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.
  72. None
  73. None
  74. None
  75. None
  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
  79. None
  80. None
  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
  83. None
  84. Unsure if requests from a URL or domain are slowing

    you down? You can block them.
  85. None
  86. None
  87. Case Study: imore.com

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

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

  92. None
  93. There are a ton of Web fonts in this page.

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

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

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

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

  103. None
  104. Long frame times indicate the presence of jank in your

    page. Watch out for the red triangles.
  105. None
  106. Timeline: Filmstrip

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

  108. None
  109. None
  110. None
  111. Timeline: Aggregated Details

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

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

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

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

  118. None
  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’
  121. None
  122. Here’s a piece of work blowing our frame budget. We

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

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

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

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

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

  132. None
  133. Check 'Paint' for detailed paint records. Selecting a paint record

    gets you access to the Paint Profiler for that frame.
  134. None
  135. None
  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'.
  137. None
  138. Click the 'paint profiler' link to see what got painted,

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

  143. None
  144. Visualise animations by DOM node

  145. None
  146. Control playback speed

  147. None
  148. Modify the duration of individual animations

  149. None
  150. Play back the modified animation. Awesome for testing tweaks before

    updating your source.
  151. None
  152. Cubic Bezier Editor

  153. None
  154. DOM Animation Changes

  155. None
  156. DOM & Styles ¬

  157. ELEMENTS

  158. Elements: Colors & Palettes

  159. Eye Dropper tool

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

    palette support.
  162. None
  163. CSS IS AWESOME FINDING CSS SELECTORS IN THE DOM TREE

    CAN BE TRICKY.
  164. Elements: Search selectors

  165. None
  166. Elements: Event Listeners

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

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

  174. None
  175. None
  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

  179. None
  180. None
  181. Sources: Proactive Compilation

  182. None
  183. Blackboxing JS libraries

  184. None
  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.
  186. None
  187. None
  188. None
  189. LEARN MORE

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