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
- Google PageSpeed Insights
- Web Page Test
- Chrome Accessibility Extension
- Other Browser Developer Tools
Resources
Thank You!
dustin@easelsolutions.com
@dtauer