/mastering-chrome-devtools

:fire: Website for teaching Chrome DevTools

Primary LanguageJavaScriptMIT LicenseMIT

Mastering Chrome DevTools

A web app for teaching people about Chrome DevTools.

How to use

git clone https://github.com/jkup/mastering-chrome-devtools.git
cd mastering-chrome-devtools
npm install
node server.js

About

This site is designed as teaching aid for my "Mastering Chrome DevTools" workshops but I hope it will stand fine on its own.

The workshop is divided into multiple sections:

  • Editing - Changing styles and markup and persisting those changes to disk
  • Debugging - Using the step-through debugger to fix a buggy program
  • Profiling - Audit a slow page. Run a JavaScript CPU profile and figure out what's causing slowness.
  • Timing - See how long each function on your sites takes and figure out which one is the longest!
  • Page Jank - Try to identify page jank without tooling. Then use the DevTools to fix it!
  • Memory Leaks - Learn about the common causes of JS memory leaks. Then find the one on the page and fix it!