Mastering Chrome Dev Tools v2

Resources

History of Debugging

Developer Tool Panels

The tools panels are as follows:

Elements

There was a specificity website to see CSS specifity in action.

Sources

Debugging

Step Through Debugging

In the example, the debugger keyword is inserted into a file under the Sources tab that can be used to force a breakpoint.

When a break point is triggered, it shows you the current Call Stack, Scope and more.

There are navigation options for stepping over things.

How the Debugger stepping works:

In the example run, we are adding variables to the watch value in source and watching them change.

Networking

This is a general overview of the status, type, initiator, size etc.

There are also filters to check file type, XHR request etc.

Network Timing

Queueing

A request being queued indicates:

Screenshots

You can enable capture screenshots (using the "camera" icon on the Network tab) which will show all the repaints as they happen.

Auditing

Begins with importance on speed decrease and adverse affect to large companies.

Auditing resources:

The auditing tab itself uses lighthouse to check SEO, a11y etc.

Check Lighthouse for more information, but there has been a lot of work on the metrics and opportunities.

Another great website shown was Webhinto.io (Sonarwhal) which gives some great depth on things as well.

Node.js Profiling

Using node --inspect path/to/file we can use a Node.js icon on the Chrome dev tools that gives you some capabilities as well!

Do the profiling as quick as possible in order to be able to drill down without too many hassles.

Performance Monitoring

Using the Performance API to measure metrics.

We can use mark and measure.

function usePerformanceEntryMethods() {
  log('PerformanceEntry tests ...');

  if (performance.mark === undefined) {
    log('... performance.mark Not supported');
    return;
  }

  // Create some performance entries via the mark() method
  performance.mark('Begin');
  doWork(50000);
  performance.mark('End');
  performance.mark('Begin');
  doWork(100000);
  performance.mark('End');
  doWork(200000);
  performance.mark('End');

  // Use getEntries() to iterate through the each entry
  var p = performance.getEntries();
  for (var i = 0; i < p.length; i++) {
    log('Entry[' + i + ']');
    checkPerformanceEntry(p[i]);
  }

  // Use getEntries(name, entryType) to get specific entries
  p = performance.getEntries({ name: 'Begin', entryType: 'mark' });
  for (var i = 0; i < p.length; i++) {
    log('Begin[' + i + ']');
    checkPerformanceEntry(p[i]);
  }

  // Use getEntriesByType() to get all "mark" entries
  p = performance.getEntriesByType('mark');
  for (var i = 0; i < p.length; i++) {
    log(
      'Mark only entry[' +
        i +
        ']: name = ' +
        p[i].name +
        '; startTime = ' +
        p[i].startTime +
        '; duration  = ' +
        p[i].duration,
    );
  }

  // Use getEntriesByName() to get all "mark" entries named "Begin"
  p = performance.getEntriesByName('Begin', 'mark');
  for (var i = 0; i < p.length; i++) {
    log(
      'Mark and Begin entry[' +
        i +
        ']: name = ' +
        p[i].name +
        '; startTime = ' +
        p[i].startTime +
        '; duration  = ' +
        p[i].duration,
    );
  }
}
copy

Image Performance

We can use <img srcset="large.jpg 800w, small.jpg 300w" src="large.jpg" /> to use source sets for images.

The example used is using via.placholder.com to show how the different srcset works.

Page Jank

An article on JS startup Performance.

"Jumping" or "gittering" is consider page jank. Things that contribute this include layout thrashing.

A geat website to test paint flashing from the Chrome Dev Tools is Koalas to the max.

The Performance Panel

A useful link here is Chrome Dev Tools - Evaluate Performance.

Memory

Common causes of memory leaks:

Accidental Global

function foo() {
  bar = 'This is probably not what you mean';
}
copy

The Forgotten Timer

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

The DOM and not the DOM

// this reference needs to be removed
const button = document.getElementById('button');

function removeButton() {
  document.body.removeChild(document.getElementById('button'));
}
copy

Chrome Task Manager & Snapshots

There is a website here that you can use to practice snapshots for memory leaks!

Experiments

To check experimental code, if you go to chrome://flags and turn on the experimental flag, you can then go to settings and turn on experiments.

Chrome Canary

The bleeding edge version of Chrome.