Hidden Dev Tools: Chrome's Command Menu

The Chrome DevTools Command Menu is a lesser-known feature that reveals all of the hidden features. There are quite a few features here that you might have downloaded a plugin to handle, but Chrome can do it if you know where to look.

How to Open the Command Menu

With Chrome DevTools open and selected, type Ctrl + Shift + P.

A screenshot of the Chrome DevTools Command Palette

If you forget this keyboard shortcut, you can always click the three vertical dots on the top right and choose Run Command.

The fuzzy search of the command menu includes the category, so typing rendering will show everything in the Rendering category.

Here’s a few of the commands I like to use, grouped by their category in the Command Menu.

Rendering Commands

Disable local fonts ⭐
This one is wonderful for checking that your web font setup is actually working.
Emulate CSS prefers-color-scheme: light/dark
Great for testing your color scheme styles.
Show frames per second (FPS) meter
Excellent for checking performance of animations
Emulate CSS prefers-reduced-motion: reduce
See how your site appears when users ask for reduced motion in order to keep it accessible.
Emulate blurred vision / deuteranopia / tritanopia / protanopia / achromatopsia
See your site the way that people with vision impairments or disabilities might.
Show Core Web Vitals Overlay
Turning this on puts the information at the top right of your window. Now you can navigate around your site and quickly see which pages are your worst offenders.
Screenshot of the core web vitals overlay
Disable AVIF / JPEG XL / WebP format
Easily test if your fallback image formats work.

Screenshot Commands

Some of these add capabilities to your operating system’s screenshot tools.

Capture screenshot
Capture the window without the scrollbar or the rest of the browser’s UI.
Capture full size screenshot ⭐
Capture the entire webpage from top to bottom with this one quick command. Super useful.
Capture node screenshot
Take a screenshot of the currently selected DOM element.
Capture area screenshot
This one is the least useful of the bunch. Screenshot a custom area of the page.

Debugger Commands

There’s only one here I want to call out, as it’s important to test how usable your site is if JavaScript fails to load for some reason.

Disable JavaScript
Make sure you’re using JavaScript to enhance your site, not run every aspect of it.
There are many reasons why your JS might not run.

Using a Developer Browser

While the Command Palette is now an essential tool when I’m developing in Chrome, I still prefer to use a developer browser like Polypane to get easier access to these features and much more.

Any Suggestions?

These are the commands I’ve found a use for in my own workflow, but which am I overlooking? Drop me a DM and let me know.

Read more about the Chrome DevTools Command Menu here.