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?
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.