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.
The tool isn't enabled by default. To enable it:
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.
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!
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.Master Flexbox