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. 3.
  2. 5.
  3. 7.
  4. 9.

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

    So, it’s now the 2nd tab, right after Elements.
  5. 10.
  6. 11.

    Next, we wanted to give you the flexibility to rearrange

    tabs (using drag-and-drop) to suit your workflow. Now supported!
  7. 12.
  8. 13.

    Earlier this year, we enabled syntax highlighting in Console too.

    ES2015 code looks so much better there now.
  9. 14.
  10. 15.

    We’ve continued to evolve Device Mode for mobile webapp testing.

    More on our improvements here a little later.
  11. 16.
  12. 20.

    We need a better way to frame the performance conversation.

    Something that quantifies each stage of the user experience.
  13. 21.
  14. 26.
  15. 27.
  16. 29.
  17. 31.
  18. 32.
  19. 33.
  20. 37.
  21. 38.
  22. 39.
  23. 40.
  24. 41.

    Before you marry a person you should first make them

    use a computer with slow Internet to see who they really are.
  25. 44.
  26. 45.
  27. 47.
  28. 48.
  29. 49.
  30. 51.
  31. 53.
  32. 55.
  33. 56.

    There are a ton of Web fonts in this page.

    All needed? * used the WhatFont extension to inspect
  34. 57.
  35. 60.
  36. 62.
  37. 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 :)
  38. 64.
  39. 66.
  40. 67.

    Long frame times indicate the presence of jank in your

    page. Watch out for the red triangles.
  41. 68.
  42. 71.
  43. 72.
  44. 73.
  45. 76.
  46. 79.
  47. 81.
  48. 83.

    On scroll, new stories are loaded in and a colorisation

    effect is applied depending on load ‘state’
  49. 84.
  50. 85.

    Here’s a piece of work blowing our frame budget. We

    can attribute part of it to this colorizeAndScaleStories() function.
  51. 86.
  52. 87.

    Digging into the source, we’re querying the DOM and making

    style changes to *all* our story tiles every time we scroll. Oops.
  53. 88.
  54. 90.
  55. 91.

    A little more work to do, but the overall experience

    is way smoother than it was before.
  56. 92.
  57. 93.

    In the real-world, if you really wanted to keep the

    effect schedule this work more appropriately.
  58. 95.
  59. 96.

    Check 'Paint' for detailed paint records. Selecting a paint record

    gets you access to the Paint Profiler for that frame.
  60. 97.
  61. 98.
  62. 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'.
  63. 100.
  64. 101.

    Click the 'paint profiler' link to see what got painted,

    how long it took and see the individual paint calls.
  65. 102.
  66. 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.
  67. 106.
  68. 108.
  69. 110.
  70. 112.
  71. 114.
  72. 116.
  73. 118.
  74. 120.
  75. 123.
  76. 125.
  77. 128.
  78. 131.
  79. 134.
  80. 135.
  81. 137.
  82. 138.
  83. 142.
  84. 143.
  85. 145.
  86. 147.
  87. 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.
  88. 149.
  89. 150.
  90. 151.
  91. 152.
  92. 154.
  93. 156.
  94. 157.
  95. 158.