level up some UI chops

Hidden Devtools Gem for Working with Media Queries

Mar 13 2017

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:

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:

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

Dead Tired of Looking up Flexbox?

Flexbox is incredibly powerful. But it's also crazy hard to master. So we all end up depending on a cheat sheet and guessing in the dev tools. Enough of that! Time to master it once and for all, in a way that actually sticks, so you can build any layout you can imagine with flexbox.