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.
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.
: 
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.