Chrome Dev Tools
Dustin Tauer
dustin@easelsolutions.com
@dtauer
https://slides.com/dtauer/infotec2017-devtools
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
What does my site cost?
Chrome Accessibility Extension
Other Browser Developer Tools
Microsoft Edge
Firefox
Opera
Safari
Resources
Developer Tips by Umaar Hansa
Chrome Dev Tools Overview
Thank You!
dustin@easelsolutions.com
@dtauer
https://slides.com/dtauer/infotec2017-devtools
Made with Slides.com