Lesson - What can DevTools do?

Chrome DevTools can do so many things. Sometimes it's more important to know what a tool can do than knowing exactly how to do it!

💡 Note: Chrome extensions often mess with the DevTools data, leading to inaccurate reporting! If you're going to run any important audits, make sure you have all of your extensions disabled or use an Incognito tab!

A walk through the panels

  1. Elements 🧪
    • View HTML and CSS
    • Add/Change classes and IDs
    • Update Styles
    • Color Picker
    • Simulate Events
  2. Network 🌐
    • View all files sent from server
    • Measure page load performance
    • Watch your site load in real time
    • Inspect request / response data
  3. Performance 🙀
    • The scary one!
    • Record CPU and Memory usage
    • Inspect threads
    • Spot page jank
  4. Console 🎮
    • The friendly one!
    • JavaScript REPL
    • Interact with the DOM
    • Most recent DOM selection
  5. Sources 📘
    • A full IDE
    • Step through debugger
  6. Application 💼
    • Application storage
    • Check PWA features
    • Clear cache
  7. Memory 🤔
    • Generate memory snapshots
    • Find and fix memory leaks
  8. Lighthouse 🚢
    • Full website audit
    • Check Performance, SEO, Accessibility
  9. Also ➕
    • Emulate devices
    • Simulate network conditions

(It's worth noting that Chrome DevTools also allows you to Remote debug web apps on any Android* device. You can find information on how to do that here)