802

I am working on developing a website and need to work on the print view. Typically when I have layout issues I use Chrome's Element Inspector. However this does not exist in print preview mode.

Is there a Chrome plugin or some other way to change your viewing medium within chrome itself, to view a page as a printer would? I suppose it doesn't have a be a Chrome specific solution, but that is my primary browser so it would be nice to have an in-browser solution.

Right now I'm focused just on the print preview medium, but it would be ideal to be able to change to any of the supported media types (i.e. all/braille/embossed/handheld/print/projection/screen/speech/tty/tv).

1

11 Answers 11

1351

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 v52+

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 v48+

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 v46+ support

Chrome v43+:

  • The drawer icon at step 2 has changed.

Emulate print media query on Chrome v43

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

Emulate print media query on Chrome v42

18
  • 18
    I can confirm this so I made this the approved answer. I'm not sure why they keep insisting on moving it every few releases. Apr 30, 2015 at 17:11
  • 8
    Found it in Chrome 48, but they moved it again: Go to "rendering" in the Drawer, check "Emulate print media".
    – Olemak
    Feb 5, 2016 at 23:56
  • 9
    These frequent changes are the dumbest thing I've seen to come out of google as of yet! Such a waste of my time.
    – isapir
    Apr 5, 2016 at 16:44
  • 16
    Unfortunately this does not always emulate the same thing that print preview shows, so not so great for debugging. It is good for seeing what general layout and styles are though.
    – Confuzing
    Oct 10, 2017 at 21:37
  • 38
    This 'print' emulator is completely useless. It does not properly emulate the page, as in what you see in the browser will be nothing like what you see in the print preview. Does anyone have a working solution?
    – Ian Steffy
    Nov 16, 2017 at 15:24
172

Changed in Chrome 32 35+

(In Chrome 35+ the "Emulation" tab is present by default. Also, the console is available from any primary tab.)

  1. In DevTools, go to settings-> Overrides
  2. enable "Show Emulation view in console drawer"
  3. Close settings, go to 'Elements' tab
  4. Hit Esc to bring up console
  5. Choose tab "Emulation", click "Screen"
  6. Scroll down to "CSS Media", select "print"

This option is not (yet?) available in the console tab.

Enable Overrides

9
  • 1
    To reflect this update, I've gone ahead and marked this as the correct answer now. Feb 10, 2014 at 20:27
  • 3
    The Overrides tab is no longer there in Chrome 36 (I don't know when that was changed). The Emulation tab is present by default.
    – ebruchez
    Apr 18, 2014 at 0:11
  • 1
    Is it just me or is the CSS media option gone in Chrome 36? Now can only select based on specific mobile device. UPDATE: doh. As per above instructions, literally have to click on "Screen". Not immediately obvious that it's clickable.
    – Ted
    Aug 12, 2014 at 21:06
  • 1
    The only problem I have found, now that I am using it, is that it isn't actually what Chrome prints out. This is extremely evident with Bootstrap 3.x where the media will use grid-md whereas the print preview uses grid-sm
    – Sammaye
    Oct 24, 2014 at 15:29
  • 3
    Chrome 39 this is under "media". you must enable the device emulation by clicking on the little phone icon on the left of the devtools top bar first, and then click the 3 dots in the top right of the device emulator. Dec 29, 2014 at 11:19
76
+50

Since Chrome 32 you have the CSS media option in the Screen section of the drawer Emulation tab.

Just enable it, select print as the target media type, and - behold - your page is rendered [almost] the way it will be printed.

Use Esc to bring up the drawer if it's not visible.

5
  • I was hoping it'd be simpler than this, but I suppose it will have to do for now. It would be nice if this eventually was built into one of the tools automatically. Mar 14, 2012 at 18:58
  • When I get the chance, I'll have to give that a try. I may just stick with @Jon-YYC's method until then. Dec 26, 2012 at 22:28
  • Im using version 28 on mac and do not see this option... anyone else have this problem?
    – Aaron Hill
    Jul 19, 2013 at 17:08
  • 2
    @AaronHill I am using version 28 on a Mac and have no problem with it. Although perhaps you didn't actually get into the settings dialog. You can find this by clicking the gear icon in the bottom right hand corner of Element Inspector. Aug 5, 2013 at 17:41
  • 2
    This answer is now out-of-date.
    – Flimm
    Jan 19, 2017 at 9:59
29

With shortcuts available, the quickest way is to

  1. Open the Developer Tools

    • Windows: F12 or Ctrl+Shift+I
    • Mac: Cmd+Opt+I
  2. Open the Command Menu

    • Windows: Ctrl+Shift+P
    • Mac: Cmd+Shift+P
  3. Type print and select Emulate CSS print media type from the context menu

    Change Media Type Emulation Via Command Menu

Looking at the excellent and currently most-upvoted answer by lmeurs, I think this solution might also remain stable over time.

1
  • 1
    Doing the same thing via DevTools GUI: Menu -> More tools -> Rendering. See "Rendering tab" and scroll down to "Emulate CSS media type" pull-down.
    – chrism
    Dec 11, 2020 at 15:31
24

As of Chrome 48 (and perhaps a few versions earlier), the function seems to have moved yet again:

The first few steps are unchanged:

  1. Press F12 to bring up the developer tools

  2. Press ESC to open the console

According to the previous answers, the setting could then be found under the "Emulation" tab. As shown in the images below, it has now been moved to the "Rendering" tab, which can be brought up by clicking on the three dots to the left of the "Console" tab.

Tab selection

Setting selection

20

Please see This article

Open chrome dev tools inspector

Then goto the "overrides" tab

Open config/Settings

1
  • 5
    This answer is now out-of-date.
    – Flimm
    Jan 19, 2017 at 9:59
15

As of Chrome 48+, you can access the print preview via the following steps:

  1. Open dev tools – Ctrl/Cmd + Shift + I or right click on the page and choose 'Inspect'.

  2. Hit Esc to open the additional drawer.

  3. If 'Rendering' isn't already being show, click the 3 dot kebab and choose 'rendering'.

  4. Check the 'Emulate print media' checkbox.

From there Chrome will show you a print version of your page and you can inspect element and troubleshoot like you would the browser version.

Image of Chrome 49+ Print Preview option in Dev Tools

2
13

Chrome v67 (mac):

  1. Hold down Cmd+opt+j to open dev tools
  2. click the ... on the righthand side, and choose: More Tools >> Rendering
  3. When the Rendering window shows up at the bottom of the screen, Emulate CSS Media section and choose: "Screen" from the dropdown.
  4. Go to "File >> Print" and you should see the view you want printing.

Images of the above description for Chrome v67 on a mac:

Where to find the Rendering tab: Click the ... on the righthand side, and choose: More Tools >> Rendering

screenshot 1

How to get the "screen" view to print: When the Rendering window shows up at the bottom of the screen, Emulate CSS Media section and choose: "Screen" from the dropdown.

screenshot 2

Hope it helps.

9

If you are debugging your CSS using Print As PDF in Google Chrome and your CSS element background colors are not showing, then make sure the 'Background graphics' checkbox is ticked. I spent almost 30 minutes debugging my CSS and wondering what is causing my CSS background being ignored.

Google Chrome Print background color ignored

0
6

Under Chrome v51 on a Mac, I found the rendering settings by clicking in the upper right corner, choosing More tools > Rendering settings and checking the Emulate media button in the options offered at the bottom of the window.

Chrome v51 Mac Emulate media selector appears in the bottom

Thank you to all the other posters that led me to this, and credit to those that provided the answer without the images.

1
2

Chrome v50:

Way 1:

  1. Menu > More Tools > Rendering settings (see image)
  2. Down: Rendering Tab > Emulate media "print"

Way 2:

  1. Open Console [esc]
  2. Console Menu > rendering
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.