Lesson 2 - What can DevTools do?

In this lesson we'll learn

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
  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
  5. Security 🔒
    • Check that requests use HTTPS
    • View certificates
    • View any TLS/SSL issues
  6. Sources 📘
    • A full IDE
    • Step through debugger
    • Persist changes to disk
  7. Application 💼
    • Application storage
    • Check PWA features
    • Clear cache
  8. Memory 🤔
    • Generate memory snapshots
    • Find and fix memory leaks
  9. Lighthouse 🚢
    • Full website audit
    • Check Performance, SEO, Accessibility
  10. 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)

Course format

We're going to break the course down into:

  1. Editing - Elements, Console, Sources
  2. Debugging - Elements, Console, Sources
  3. Profiling - Network, Performance, Memory
  4. Auditing - Network, Lighthouse

Next Lesson

Let's begin by learning how to edit websites