Learning Chrome Web Developer Tools

notes from the Lynda.com course by Sasha Vodnik


  1. To open: ctrl + shift + I on linux
  2. Customize default configuration: three dots on top right
  3. Toggle Console drawer: Esc
  4. Close Shortcuts Modal Esc

Elements Panel

  1. Lets you examine the current web page as rendered by the browser
    • HTML DOM
    • CSS
  2. Rendered HTML not the HTML that was loaded
  3. User filters in the Styles panel to toggle states of elements
  4. Persistence Option
    • navigate to sources
    • right-click the folder and select add folder to workspace
    • find and select the folder on the local machine
    • click allow if information is not sensitive
    • right-click on desired css resource to synchronize
    • note: persistence only works for external css, not for anything in the DOM

Console Panel

  1. Shows Error messages thrown by the parser
  2. Allows you to log your own custom messages
  3. Command Line for javascript
  4. To open: ctrl + shift + I on linux
  5. Google Console Stuff
  6. $ is similar to query selector to return a specific DOM element in the command line
  7. $_(.classname) will inspect the previously displayed command line element in the inspector
  8. $_(.classname) will return an array of all of the instances of the class

Sources Panel

  1. Provides tools to open sources in the current page
  2. Breakpoints
    • Insert debugger command anywhere I want the debugger to stop
    • Graphical with clicking the line number of the code line

Network Panel

  1. Visualize HTTP requests and responses
  2. shift + reload to force the browser to re-download all the assets and bypass cache
  3. throttling to emulate poor connections
Learning Chrome Web Developer Tools
Share this