How to Find "Emulate CSS Media" in Google Chrome

Not able to find Emulate CSS media in Google Chrome

They move it every so often. At the moment it's in the Rendering panel. To find it:

1. Open the lower panel (press Esc while in the Developer Tools)

   

2. Open the Rendering panel from the dropdown

3. Select Emulate print media

   

---

Using Chrome's Element Inspector in Print Preview Mode?

Note: This answer covers several versions of Chrome, scroll to see v52, v48, v46, v43 and v42 each with their updated changes.

Chrome v52+:

• Open the Developer Tools (Windows: F12 or Ctrl+Shift+I, Mac: Cmd+Opt+I)
• Click the Customize and control DevTools hamburger menu button and choose More tools > Rendering settings (or Rendering in newer versions).
• Check the Emulate print media checkbox at the Rendering tab and select the Print media type.

Chrome v48+ (Thanks Alex for noticing):

• Open the Developer Tools (CTRLSHIFTI or F12)
• Click the Toggle device mode button in the left top corner (CTRLSHIFTM).
• Make sure the console is shown by clicking Show console in menu at (1) (ESC key toggles the console if Developer Toolbar has focus).
• Check Emulate print media at the rendering tab which can be opened by selecting Rendering in menu at (2).

Chrome v46+:

• Open the Developer Tools (CTRLSHIFTI or F12)
• Click the Toggle device mode button in the left top corner (1).
• Make sure the console is shown by clicking the menu button (2) > Show console (3) or pressing the ESC key to toggle the console (only works when Developer Toolbar has the focus).
• Open the Emulation (4) > Media (5) tabs, check CSS media and select print (3).

Chrome v43+:

• The drawer icon at step 2 has changed.

Chrome v42:

• Open the Developer Tools (CTRLSHIFTI or F12)
• Click the Toggle device mode button in the left top corner (1).
• Make sure the drawer is shown by clicking the Show drawer button (2) or pressing the ESC key to toggle the drawer.
• Under Emulation > Media check CSS media and select print (3).

How can I emulate prefers-color-scheme media query in Chrome?

Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel

1. Open Developer tools (otherwise the key combination below opens the print dialog)
2. Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac)
3. Type "Show rendering"
4. Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug

Chrome Developer Tools - Emulate CSS Media no Checkbox

I found out, that they changed the user experience in chrome. So there is no checkbox, since you just don't need it. Just change the selectbox under the "Emulate CSS media" and it works.

IMHO: I think this UI change is not very consistent, but ok.

EDIT: You might have to reload your site.

How to view media queries with Google chrome dev tool or Firefox dev tool?

Chrome Dev Tools has some great features built in to their responsive testing (the mobile icon at the top left of Dev Tools).

One of these is viewing a graphical representation of all media queries. It can be enabled by clicking on the vertical ellipses, and selecting "Show Media Queries". From there, you'll be able to see all your current breakpoints. Finally, right-clicking on the breakpoint where you notice your change (as you resize the responsive window) allows you to see the source CSS for that query, using "Reveal in source code".

In your case, clicking on the media query for (max-width: 950px) brings you to the following place in your source code:

@media all and ( max-width: 950px ) {
.mobile-button { display:block; }
.main-menu { display:none; }
.photo-slider { height:300px; }
.top-wrapper .slider .center-wrapper { left:80px; right:80px; bottom:150px !important;  }
.top-wrapper h1 { line-height:52px; }
}

Where .main-menu is being set to display:none. Dev tools will also show you the line of the source code; in this case, line 743 (just as Jonas Giuro pointed out in his comment).

Chrome Device Mode Emulation Media Queries Not Working

I fixed this problem by adding a meta tag to my page:

 <meta name="viewport" content="width=device-width">

UPDATE (December 2019):

It looks like you may also need to set the initial scale and minimum scale, like so:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?

about:config hack on Firefox

You actually can using Firefox:

1. Go to "about:config"
2. Find "layout.css.devPixelsPerPx
3. Change it to your desired ratio (1 for normal, 2 for retina, etc.)

Refresh your page - boom, your media query has now kicked in! Hats off to Firefox for being awesome for web developing!

This was done on Windows 7 with Firefox 21.0.

Zooming on Firefox & Edge

Currently on Firefox and Edge, if you zoom it triggers dppx-based media queries. So this easier approach may be sufficient, but be aware that the functionality is reported as a "won't fix" bug for Firefox, so this could change.

Css to emulate scaling in Chrome

Finally found the answer.

It is because of the bootstrap css.

I implemented the fix below and it seems to work for now.

https://github.com/twbs/bootstrap/issues/12078

Working With Media Queries In Chrome Dev 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.

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

For a Better explaination:

---

Related Topics