Chrome Dev Tools

Dustin Tauer

dustin@easelsolutions.com

@dtauer

Elements Panel

  • Inspect & Edit HTML/CSS

Console

  • "Browser Command Line" or REPL
  • Visible independently or with any other panel

Text

Sources Panel

  • Debug JavaScript using breakpoints
  • Connect local files via Workspaces

Network Panel

  • Record & Analyze Network Activity
  • Simulate Network Conditions

Timeline (will be "Performance" in Chrome 58)

  • Record and Explore Performance across metrics like JavaScript, Memory, Network, etc.

Application

  • Inspect and Manage Storage, Databases, and Caches
  • Inspect and Delete Cookies

Security

  • Debug mixed content issues, certificate problems, and more.

Audits

  • Not a standard panel
  • Added with an extension

What's that little phone button?

Other Tools

Resources

Thank You!

dustin@easelsolutions.com

@dtauer

Chrome Developer Tools - Infotec 2017

By Dustin Tauer

Chrome Developer Tools - Infotec 2017

  • 1,247