Echoed from: https://gedd.ski/post/working-with-media-queries/
As I was working on a site that had a lot of quirky stuff going on such that making it mobile responsive is starting to become a PITA. Then I thought, could there be a browser tool or extension that somehow told me which media queries are active at given screen dimension?
A quick Google search with the following parameters: “media query tools” had the answer I was looking for on the fourth line. Adding another browser extension is fine but that would mean an additional resource overhead and something else to manage. The best solution would be something that’s already built in. And yes, that’s exactly what I found out. There’s this handy dandy tool that’s disabled by default with Chrome’s dev tools. Read on…
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!
