Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What's new in Chrome DevTools?

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.

Addy Osmani

September 28, 2015
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

  1. What’s new in
    Chrome DevTools?¬
    FITC Web Unleashed 2015
    September 2015, Toronto.

    View full-size slide

  2. @addyosmani¬
    +AddyOsmani

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. DevTools UX¬

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Performance¬

    View full-size slide

  11. ACCIDENTAL
    SLOWNESS.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. RAIL
    Response
    < 100ms

    View full-size slide

  15. RAIL
    Animation
    < 16.67ms

    View full-size slide

  16. RAIL
    Idle
    < 50ms

    View full-size slide

  17. RAIL
    Load
    < 1000ms

    View full-size slide

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

    View full-size slide

  19. Network: Filmstrip

    View full-size slide

  20. Visualise the progression
    of content being loaded

    View full-size slide

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

    View full-size slide

  22. Network: Throttling

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Network: Custom network throttling

    View full-size slide

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

    View full-size slide

  27. Network: Block requests

    View full-size slide

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

    View full-size slide

  29. Case Study: imore.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

  37. Timeline: long frame times

    View full-size slide

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

    View full-size slide

  39. Timeline: Filmstrip

    View full-size slide

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

    View full-size slide

  41. Timeline: Aggregated Details

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. Timeline: Paint Profiler

    View full-size slide

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

    View full-size slide

  55. 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 full-size slide

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

    View full-size slide

  57. 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 full-size slide

  58. Toggle animation controls from
    Elements > Styles

    View full-size slide

  59. Visualise animations by DOM node

    View full-size slide

  60. Control playback speed

    View full-size slide

  61. Modify the duration of individual
    animations

    View full-size slide

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

    View full-size slide

  63. Cubic Bezier Editor

    View full-size slide

  64. DOM Animation Changes

    View full-size slide

  65. DOM & Styles ¬

    View full-size slide

  66. Elements: Colors & Palettes

    View full-size slide

  67. Eye Dropper tool

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. Elements: Search selectors

    View full-size slide

  71. Elements: Event Listeners

    View full-size slide

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

    View full-size slide

  73. Elements: Framework Event Listeners

    View full-size slide

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

    View full-size slide

  75. Elements: Edit HTML in Console

    View full-size slide

  76. JavaScript¬

    View full-size slide

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

    View full-size slide

  78. Sources: Inline variables

    View full-size slide

  79. Sources: Proactive Compilation

    View full-size slide

  80. Blackboxing JS libraries

    View full-size slide

  81. 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 full-size slide

  82. Experimental: Accessibility
    Inspection

    View full-size slide

  83. Experimental: Security Panel

    View full-size slide

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

    View full-size slide

  85. umaar.com/dev-tips

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  88. http://totallytooling.tips

    View full-size slide

  89. Thank you!¬
    +AddyOsmani
    @addyosmani

    View full-size slide