How to test media queries with Chrome

How to test media queries with Chrome:

Whether you want it to or not, modern web development is directly tied to responsive design. There are media queries everywhere, even Bootstrap and Tailwind use some sort of breakpoints related to that.

Media Query Viewer

Sometimes we think it’s hard to test it, but Chrome DevTools has a hidden gem to deal and handle easily with those breakpoints. I will show you how to activate this superpower.

  1. Open Chrome DevTools
  2. Enable Mobile view
  3. Ensure select “Responsive” on the device list.
  4. Select “show media queries”

Query Bars

Depending on media queries defined on the page you would see 4 bars in different colors.

Preset sizes (Gray):

Max width (Blue):

Max and Min width (Green):

Min width (Orange)

Example

The Bootstrap page it’s an excellent opportunity to see this feature in action because has multiple types of media queries.

Source Code

You can also right-click over a selected media query and see it directly on the source code.

Bonus Track

If you want to see all media queries in action at the same time I’ll recommend you take a look at Responsively.

It’s an amazing and open source project that will make your job easier as a developer.

from Tumblr https://generouspiratequeen.tumblr.com/post/635755158277586944

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s