/dev tips

🎊   Announcing the new DevTools Pre Launch ModernDevTools.com - A discount, and no subscription fees during this pre-launch period   🎊

(49) Shortcut to cycle through panels Add a new device (51)

Chrome DevTools: Inspect and trigger CSS media queries, also locate them in code

10 Jun 2015
Inspect and trigger CSS media queries, also locate them in code

Use the Media Query Inspector to inspect and trigger the registered breakpoints on a page. In Device Mode, click the icon which looks like staggered bars in the upper left corner of the page, the MQI opens.

You can trigger the various breakpoints with a click on a bar. If you right click on a bar, you can reveal its position within the source code.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.