Using Chrome's Element Inspector in Print Preview Mode?

Question

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

related: https://stackoverflow.com/questions/2452713/suggestions-for-debugging-print-stylesheets , https://stackoverflow.com/questions/726825/how-do-you-debug-printable-css — , Dec 05 '17 at 03:18

score 1338 · Accepted Answer · edited Jun 20 '20 at 09:12

1338

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.

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 30 '15 at 07:53

lmeurs

16,111
4
27
30

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. – David Stinemetze Apr 30 '15 at 17:11
1

Sadly largely broken in v46.0.2490.80, doesn't correctly apply it (does partially apply it) when you're not emulating some device. Seems like one should be able to enable media emulation without disappearing down a rabbit hole of mobile device emulation and rulers and such. – T.J. Crowder Nov 07 '15 at 14:19
8

Found it in Chrome 48, but they moved it again: Go to "rendering" in the Drawer, check "Emulate print media". – Olemak Feb 05 '16 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 05 '16 at 16:44
1

Still working in V51, but you don't need to toggle the device mode. The "Rendering" options is always available. – DanielH Jun 14 '16 at 14:11
Note that sometimes Chrome hides the content BENEATH the bottom menu. You have to drag this bar (that has the words Rendering and Console in it) up with your mouse to expose those settings (Emulate Print Media etc.) you see below them. – sameers Aug 02 '16 at 21:46
Even in the newest Chrome, it looks like sometimes the page stays in print mode, even after you uncheck the box. Not sure which exact combo of events caused this, but I did pop up print preview & come back. – trysis Oct 03 '16 at 16:16
2

That's not a hamburger menu, it's a kebab menu https://twitter.com/lukew/status/591296890030915585 — yay, mystery meat! – Erics Dec 02 '16 at 02:43
It seems that a css property: page-break-before doesn't got pick up by this emulator. – harryfeng May 09 '17 at 13:30
15

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 '17 at 21:37
36

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 '17 at 15:24
@imueurs, you may want to update the screenshots again as there is no checkbox anymore. – grappler Nov 24 '17 at 08:25
2

I'm also finding that emulator styles behave more desirably than actual print preview (Windows 10 Pro) - i wish it looked the way the emulator displayed it! – user1063287 Oct 30 '18 at 13:44
2

Emulate CSS media Type - Print does not show me the same thing as in the print preview, so this is useless to me. – Jean-François Beauchamp Aug 27 '21 at 14:37
Is it possible to define the orientation mode? Landscape or portrait. – GarfieldKlon Mar 08 '22 at 15:49
@GarfieldKlon: that should be defined in your CSS, see https://stackoverflow.com/q/138422 – lmeurs Mar 09 '22 at 06:13
3

Absolutely NOT a good answer - this does NOT do the same thing as print preview in Chrome. Have you actually tried this with a print preview? One simple example: Try putting "overflow: none" on your Body tag with scrollable content inside it (some div with overflow: auto) - then try print-previewing that. See? 1 page. Then emulate print media using this answer - same thing? Nope, not even close. This DOES NOT ANSWER THE QUESTION – Josiah Bryan May 23 '22 at 16:02
It's pretty frustrating that this question and set of answers is so highly upvoted - they literally all cite the same `CSS media: print` emulation path, but like many have pointed out now, THAT WAS NOT THE QUESTION. Has anyone at all come up with a way to inspect what is actually shown in the print preview pane? – bsplosion Jun 14 '23 at 15:59

score 171 · Answer 2 · edited Mar 30 '18 at 20:00

171

Changed in Chrome 32 35+

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

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

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

Enable Overrides

edited Mar 30 '18 at 20:00

K.Dᴀᴠɪs

9,945
11
33
43

answered Jan 16 '14 at 08:38

Noco

1,737
2
11
3

1

To reflect this update, I've gone ahead and marked this as the correct answer now. – David Stinemetze Feb 10 '14 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 '14 at 00:11
You don't have to switch to the Elements panel to bring up the drawer using Esc. This works on any panel. Essentially. – Alexander Pavlov Apr 18 '14 at 15:34
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 '14 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 '14 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. – Danny Staple Dec 29 '14 at 11:19
Enabling emulation and setting the media type, for me, seems to do nothing whatsoever. I see the CSS for the screen media type, which is completely unlike what I see from the print preview. – David Given Apr 05 '15 at 18:03
I have followed above steps when printpreview screen is opened i inspect element and another chrome window is opened now how i do i reflect changes in print preview screen through changes css? – Muneem Habib Jun 25 '15 at 12:48
This answer is now out-of-date. – Flimm Jan 19 '17 at 09:58

Alexander Pavlov · Answer 3 · 2014-04-18T15:32:24.170

76

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.

edited Apr 18 '14 at 15:32

answered Mar 09 '12 at 14:54

Alexander Pavlov

31,598
5
67
93

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. – David Stinemetze Mar 14 '12 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. – David Stinemetze Dec 26 '12 at 22:28
Im using version 28 on mac and do not see this option... anyone else have this problem? – Aaron Hill Jul 19 '13 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. – David Stinemetze Aug 05 '13 at 17:41
2

This answer is now out-of-date. – Flimm Jan 19 '17 at 09:59

score 24 · Answer 4 · edited Mar 15 '18 at 19:54

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

The first few steps are unchanged:

Press F12 to bring up the developer tools
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.

score 23 · Answer 5 · answered Apr 25 '19 at 06:29

23

With shortcuts available, the quickest way is to

Open the Developer Tools
- Windows: F12 or Ctrl+Shift+I
- Mac: Cmd+Opt+I
Open the Command Menu
- Windows: Ctrl+Shift+P
- Mac: Cmd+Shift+P
Type print and select Emulate CSS print media type from the context menu

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

answered Apr 25 '19 at 06:29

Kariem

4,398
3
44
73

Doing the same thing via DevTools GUI: Menu -> More tools -> Rendering. See "Rendering tab" and scroll down to "Emulate CSS media type" pull-down. – user297500 Dec 11 '20 at 15:31

score 20 · Answer 6 · edited Jun 20 '20 at 09:12

20

Please see This article

Open chrome dev tools inspector

Then goto the "overrides" tab

Open config/Settings

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 26 '13 at 18:27

adardesign

33,973
15
62
84

5

This answer is now out-of-date. – Flimm Jan 19 '17 at 09:59

score 15 · Answer 7 · edited Mar 15 '18 at 19:55

15

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

Open dev tools – Ctrl/Cmd + Shift + I or right click on the page and choose 'Inspect'.
Hit Esc to open the additional drawer.
If 'Rendering' isn't already being show, click the 3 dot kebab and choose 'rendering'.
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

edited Mar 15 '18 at 19:55

K.Dᴀᴠɪs

9,945
11
33
43

answered Nov 23 '15 at 19:09

NilsyNils

451
5
3

Do you have a source for an updated DevTools Instructions? I can figure *most* of them out, but I was searching all over for this & I feel like there are a lot of helpful new features that are hiding from me. – Crystal Miller Dec 02 '15 at 01:58
1

The best source I found for general dev tools info is https://developers.google.com/web/tools/chrome-devtools/?hl=en. I also really enjoyed watching the updates for the latest version in this video: https://www.youtube.com/watch?v=dJR-n8szgBc. – NilsyNils Dec 03 '15 at 02:39

score 10 · Answer 8 · edited Jun 15 '18 at 11:17

Chrome v67 (mac):

Hold down Cmd+opt+j to open dev tools
click the ... on the righthand side, and choose: More Tools >> Rendering
When the Rendering window shows up at the bottom of the screen, Emulate CSS Media section and choose: "Screen" from the dropdown.
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.

score 9 · Answer 9 · answered Oct 18 '15 at 06:27

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.

user2182349 · Answer 10 · 2016-05-27T12:51:05.747

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.

edited May 27 '16 at 12:51

answered May 27 '16 at 12:45

user2182349

9,569
3
29
41

Whether I select print or screen in "emulate media", it still prints with the print stylesheet. I ended up using a full page screenshot extension instead. https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl – niknah Feb 21 '19 at 19:35

score 1 · Answer 11 · answered May 11 '16 at 15:28

1

Chrome v50:

Way 1:

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

Way 2:

Open Console [esc]
Console Menu > rendering

answered May 11 '16 at 15:28

Ben Richter

71
7