Mastering Chrome DevTools

I'm Jon Kuperman

I work at Adobe

I'm @jkup on Twitter

https://github.com/jkup/ama

We'll learn how to

  • Use the DevTools as an IDE
  • Debug complex applications
  • Analyze network traffic
  • Audit a website
  • Monitor real user performance
  • Profile CPU usage
  • Analyze Node.js performance
  • Find and fix memory leaks
  • Tips and tricks!

A brief history

In the beginning...

Advanced Debugging

The Live DOM Viewer

https://software.hixie.ch/utilities/js/live-dom-viewer/

Firebug

Official Documentation

https://developers.google.com/web/tools/chrome-devtools/

Our Sample App

http://bit.ly/devtools-app

or

https://masteringdevtools.com/

These Slides

http://bit.ly/devtools-slides

A walk through the panels

Editing

Debugging

Networking

Queuing

A request being queued indicates that:

  • The request was postponed by the rendering engine because it's considered lower priority than critical resources (such as scripts/styles). This often happens with images.
  • The request was put on hold to wait for an unavailable TCP socket that's about to free up.
  • The request was put on hold because the browser only allows six TCP connections per origin on HTTP 1.
  • Time spent making disk cache entries (typically very quick.)

Stalled / Blocking

Time the request spent waiting before it could be sent. It can be waiting for any of the reasons described for Queueing. Additionally, this time is inclusive of any time spent in proxy negotiation.

Proxy Negotiation

Time spent negotiating with a proxy server connection.

DNS Lookup

Time spent performing the DNS lookup. Every new domain on a page requires a full roundtrip to do the DNS lookup.

Initial Connection / Connecting

Time it took to establish a connection, including TCP handshakes/retries and negotiating a SSL.

SSL

Time spent completing a SSL handshake.

Request Sent / Sending

Time spent issuing the network request. Typically a fraction of a millisecond.

Waiting (TTFB)

Time spent waiting for the initial response, also known as the Time To First Byte. This time captures the latency of a round trip to the server in addition to the time spent waiting for the server to deliver the response.

Content Download / Downloading

 

Time spent receiving the response data.

Auditing

  • Google.com: +500 ms (speed decrease) -> -20% traffic loss

  • Yahoo.com: +400 ms (speed decrease) -> -5-9% full-page traffic loss (visitor left before the page finished loading)

  • Amazon.com: +100 ms (speed decrease) -> -1% sales loss

https://developers.google.com/web/progressive-web-apps/checklist

The Audit Panel

Common Audit Problems

  • Combine external CSS and JS

  • Enable gzip compression ( Apache, Node, WordPress )

  • Compress images

  • Leverage Browser Caching

  • Put CSS in document head

  • Unused CSS rules ( Old CSS that can be pruned )

Node.js Debugging

Performance Monitoring

Controlled vs. User Monitoring

The Performance API

https://developer.mozilla.org/en-US/docs/Web/API/Performance

const start = new Date().getTime();

// Do some work...

const end = new Date().getTime();

const time = end - start;

The old approach

performance.mark('start');

// Do some work...

performance.mark('end');

performance.measure('Our Measurement', 'start', 'end');

performance.getEntriesByType('measure');

Using Performance

Image Performance

A basic image

<img src="large.jpg" />

Image srcset

<img srcset="large.jpg, 800w" />

Image srcset

<img
  srcset="small.jpg 300w,
  medium.jpg 800w,
  large.jpg, 1200w"
/>

Image srcset

(with fallback)

<img
  src="large.jpg"
  srcset="small.jpg 300w,
  medium.jpg 800w,
  large.jpg, 1200w"
/>

Profiling

How browsers work

Page Jank

60

Frames Per Second

Most devices today refresh their screens 60 times a second. The browser needs to match the device’s refresh rate and put up 1 new picture, or frame, for each of those screen refreshes.

Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). In reality, however, the browser has housekeeping work to do, so all of your work needs to be completed inside 10ms.

window.requestAnimationFrame()

http://www.koalastothemax.com/

Memory Leaks

Common Causes

of JavaScript Memory Leaks

The Accidental Global

function foo() {
  bar = "This is probably not what you meant";
}

The Forgotten Timer

const data = getData();
setInterval(() => {
  document.body.innerHTML = JSON.stringify(data);
}, 1000);

The DOM and not the DOM

const button = document.getElementById("button");
// Then Later
function removeButton() {
  document.body.removeChild(
    document.getElementById("button")
  );
}

Experiments!

Where do we go from here?

Let's Audit Some Websites!

Copy of Mastering Chrome DevTools

By Mark Lozano

Source: Jon Kuperman

Copy of Mastering Chrome DevTools

  • 922

More from Mark Lozano