$30 off During Our Annual Pro Sale. View Details »

Chrome DevTools Deep-dive

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.

Addy Osmani

November 22, 2015
Tweet

More Decks by Addy Osmani

Other Decks in Programming

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