Mastering Chrome DevTools

The workshop is divided into multiple sections:

  1. Editing- Changing styles and markup and persisting those changes to disk.
  2. Debugging- Using the step-through debugger to fix a buggy program.
  3. Auditing- Audit a slow page and figure out what's causing its slowness.
  4. Node Debugging- Something is wrong with our Node.js app, can you find out why it's so slow?
  5. Mark and Measure- Use the Performance API to mark and measure real user performance.
  6. Image Srcset- Find images that are too large and use srcsets to provide a better experience.
  7. Page Jank- Try to identify page jank without tooling. Then use the DevTools to fix it!
  8. Memory Leaks- One of these pages has a memory leak. Can you spot which one?