Chapter 4:  Optimization Auditing: A Deep Dive into Chrome's Dev Console

by Ahmed Bouchefra

Chrome DevTools incorporates many sub-tools for debugging web applications on the client side — like recording performance profiles and inspecting animations — most of which you've likely been using since your early days of learning web development, mostly through the DevTools console.

Let's look at some of those tools, focusing particularly on the console and the performance metrics.

To access Chrome's DevTools:

  • right click anywhere on a page, click Inspect from the context menu
  • use the keyboard shortcuts Ctrl + Shift + I on Windows and Linux systems or Alt + Command + I on macOS
  • use the keyboard shortcuts Ctrl + Shift + J on Windows and Linux systems ...

Get Performance Tools now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial