Down and Dirty with Chrome Developer Tools

Navigation

Load the developer tools by pressing F12.

The developer tools are separated into eight tabs in addition to a settings dialog:

  • Elements - Inspect and manipulate the DOM tree and associated styles and event listeners.
  • Network - Monitor and examine network requests.
  • Sources - Examine, edit, and debug source code.
  • Timeline - Display and record activity as it runs, including events, script activity, page rendering, and memory usage.
  • Profiles - Record CPU and memory profiles.
  • Resources - Examine cookies, local storage, indexedDB, and web sql.
  • Audits - Execute page performance and CSS usage audits.
  • Console

Navigate between the separate tabs by pressing ctr + [ and ctr + ]

The Console is available at from any tab by pressing the escape key or ctr + ~

More keyboard shortcuts