CODEWITHSUNDEEP
htmlcssgoogle-chromegoogle-chrome-devtools
wuno
wuno

Reputation: 9875

Working With Media Queries In Chrome Dev Tools

I have searched everywhere and the problem might be that what I am looking for does not exist.

I am constantly chasing down media queries when working updating websites. Is there a way to show all media queries for an element?

I know I can change the emulator to a certain device but it does not show me the media queries for that element based on that device size?

I was thinking maybe there is a setting for this but I cannot find it.

How can I easily see all media queries effecting an element I am working with in the DOM using Google Chrome Tools?

enter image description here

Upvotes: 2

Views: 2209

Answers (1)

paolobasso
paolobasso

Reputation: 2018

You can, just follow this steps:

1- Open chrome web tools,

2- Press the emulator icon,

3- Press the Option button ⋮ in the very top-right of the page (in the black bar under the bookmarks bar),

4- Press "Show media queries",

5- There you can see all media breakpoints,

6- Right-click on the breakpoints that you want and press "Reveal in source code" to see the CSS.

Reference: https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#media-queries

For a Better explaination: How see all media queries chrome

Upvotes: 5

Related Questions