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

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. 72% of mobile users say it’s important that websites are

    mobile-friendly. 96% have visited a site that isn’t
  2. Navigation bar above viewport Device Orientation Device Pixel Ratio Switch

    between Responsive mode and Devices Toggle between Mobile & Desktop Show CSS Media Queries
  3. First, we realised the Console panel is used pretty frequently.

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

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

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

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

    ES2015 code looks so much better there now.
  8. We need a better way to frame the performance conversation.

    Something that quantifies each stage of the user experience.
  9. Let’s first look at new ways to help with Load

    profiling in the Network panel.
  10. Before you marry a person you should first make them

    use a computer with slow Internet to see who they really are.
  11. 1. about:flags -> Enable DevTools Experiments 2. Relaunch Chrome 3.

    Open DevTools > Settings > Experiments 4. Hit Shift 6 times Enable Hidden Experiments
  12. There are a ton of Web fonts in this page.

    All needed? * used the WhatFont extension to inspect
  13. 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 :)
  14. Long frame times indicate the presence of jank in your

    page. Watch out for the red triangles.
  15. On scroll, new stories are loaded in and a colorisation

    effect is applied depending on load ‘state’
  16. Here’s a piece of work blowing our frame budget. We

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

    style changes to *all* our story tiles every time we scroll. Oops.
  18. A little more work to do, but the overall experience

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

    effect schedule this work more appropriately.
  20. Check 'Paint' for detailed paint records. Selecting a paint record

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

    how long it took and see the individual paint calls.
  23. Animation Inspection * Note this feature is behind an experiment

    atm. Enable DevTools experiments in about:flags, relaunch & then turn this on via Settings > Experiments.
  24. 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.