Lightning Talk: A Quick Tour of Your Browser's Dev Tools

Overview

In this talk, we will take a quick tour through the features of your browser’s dev tools and learn how to use them to do the work of a front-end engineer more effectively.

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