devTools for @media queries inspector

Question

Am I missing something? Because I try to use Chrome devTools and here it gives a description of where/how to access @media queries Inspector but I do not see it where it is supposed to be... GOOGLE CHROME DEVTOOLS MEDIA QUERIES INSPECTOR

If someone has a recommendation to inspect media queries then also much appreciated. Maybe this is a silly question and not SO "worthy", but I appreciate any help here (I can close/delete this question upon your request also). Thanks a lot.

Answer 1

As mentioned in other answers, this is what you should see.. Though the documentation doesn't yet say what the bar colors mean I've come to decode it as: when a media query is active (all query clause is true) then

• Blue = max-width query
• Green = min-width AND max-width query
• Orange = min-width query

so for example a query like

@media screen and (max-width: 767px) { .. }  //shows up as blue
@media (min-width 400px) and (max-width: 800px) { .. } //green
@media (min-width: 767px) { .. } //orange

Answer 2

Viewing media query breakpoints is hidden by default.

When in "responsive mode" after pressing the "Toggle Device Toolbar" button, you turn it on with the three vertical dots icon menu in the viewing window (not the devtools window), then "Show media queries":

This then gives you a visual representation of all media queries in your CSS:

• Left click to resize the device simulator to that size
• Right click then "Reveal in source code" to jump to the file and line that defines it

Answer 3

When you open the dev tools, you need to click a small button in the top left-hand corner of the dev-tools window to enable responsive testing.