Hidden Devtools Gem for Working with Media Queries

Chrome dev tools has a hidden little gem that makes working with CSS media queries a lot nicer. It's a tool that lets you visualize, jump to, and locate all the media queries in your project. I discovered it while working on the flexbox zombies responsive gameboard.

Activate Media Query Tool

The tool isn't enabled by default. To enable it:

• go into responsive design mode
• click the three dots menu in the top right of the screen
• click "show media queries"

Switching Media Queries

Once enabled, this tool lets you view a visualization of all the media queries in your project. It also highlights the one(s) that are currently in effect. An awesome thing about this is it lets you quickly jump back and forth between your queries by clicking on them. This can save a lot of time compared to constantly resizing the responsive controls manually.

Locating Media Queries in Code

Often when working with media queries you'll come across something you need to tweak to make things look nicer on various screen resolutions. This thing's got us covered again! We can easily jump to the media query source code:

• right click the media query visualization you want to change
• click "Reveal in Source Code"
• select the source location (there may be more than one place that same query is used) and the source panel opens straight to it

So that's it! I love finding little gems like this in the devtools that make devlife a little bit better. Enjoy!