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