19

I'm trying to set the media query in chrome to go to print. I tried to follow this post - Using Chrome's Element Inspector in Print Preview Mode?

However, I can't find the Emulate CSS media option under overrides.

enter image description here

Has it been moved? Where should I look for it?

I tried in the Emulation in the console drawer. It's not in their either -

enter image description here

Community
  • 1
  • 1
Madhu
  • 1,019
  • 4
  • 10
  • 24

3 Answers3

41

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)

    screenshot

  2. Open the Rendering panel from the dropdown

  3. Select Emulate print media

    screenshot

fregante
  • 29,050
  • 14
  • 119
  • 159
  • This has changed under the latest version of Chrome. It is now under the Media side-tab. [Image link](https://www.evernote.com/shard/s5/sh/520a3361-98d1-4f3e-8290-36a2585739bb/636aee7d5d5265ababf40fdd436b9f4d/res/cc9fc497-1aba-45eb-83fd-ef9c615d602f/skitch.png?resizeSmall&width=832) – Ustice Jan 19 '15 at 21:22
  • 2
    [Updated again](http://stackoverflow.com/a/29962072/641833). You need to toggle "Device Mode" (smartphone icon on tools menu bar), then go to the Emulation tab in the console, then go to the media tab. – Trisped May 01 '15 at 00:38
  • 2
    Now under More Tools > Rendering – developius Mar 16 '17 at 10:51
5

For emulating print CSS, it looks like this now, as of Chrome 49, April 2016.

It looks like this now.

michael
  • 686
  • 2
  • 11
  • 21
3

It's under any of the tabs where you can open the console in the dev tools (pretty much all of them except for the Console tab). For example under Sources, go to the upper right hand of the tools and click the Show Console icon (the icon that looks like a greater than sign with three vertical bars). That should open the console and you should see the Emulation options.

j08691
  • 204,283
  • 31
  • 260
  • 272