A Quick Tour of Your Browser's Dev Tools

Topics covered

• Brief history of dev tools
• Main tool tabs

Pre-requisites

For this talk, I’m assuming have a high-level understanding of:

1. front-end technologies,
2. browser interface, and
3. different web browsers

Outline

1. Brief history
   • Inspect source
   • IE Dev Tools
   • Firebug
2. Open dev tools
   • Mac: command + option + I
   • Windows: control + shift + I
3. Elements/Inspector
   • DOM
     • Selecting an element
     • Searching for an element
     • Changing attributes
     • Removing an element
   • Styling
     • Changing a style
     • Adding a style
     • Creating a new selector
     • Computed styles
     • Box model
4. Console
   • Execute JavaScript
   • Filter messages
   • Manipulate DOM
5. Source/Debugger
   • Breakpoints
     • Play
     • Step, over, in, out
     • Deactivate
   • Callstack
   • Scope
   • Watch
     • Variables in console
6. Network
   • Filtering by request type
   • Filtering by string
   • Response
   • Preserve/Persist Logs
   • Throttling
7. Performance
   • Recording
   • Waterfall
8. Application/Storage
   • Cookies
   • Local storage
   • Session storage
9. Browser specific:
   • Chrome
     • Audits
     • Animations
   • Firefox
     • Accessibility