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

Middle

related: #2453213 , #727325 – Bebebebeerine

Answer 1

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

Gasperoni

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. – Middle

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. – Strongarm

Found it in Chrome 48, but they moved it again: Go to "rendering" in the Drawer, check "Emulate print media". – Upshaw

These frequent changes are the dumbest thing I've seen to come out of google as of yet! Such a waste of my time. – Vertumnus

Still working in V51, but you don't need to toggle the device mode. The "Rendering" options is always available. – Hurwitz

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. – Uhhuh

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. – Pyelitis

That's not a hamburger menu, it's a kebab menu twitter.com/lukew/status/591296890030915585 — yay, mystery meat! – Earn

It seems that a css property: page-break-before doesn't got pick up by this emulator. – Orientation

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. – Garnishee

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? – Makhachkala

@imueurs, you may want to update the screenshots again as there is no checkbox anymore. – Picard

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! – Dermatosis

Emulate CSS media Type - Print does not show me the same thing as in the print preview, so this is useless to me. – Spondaic

Is it possible to define the orientation mode? Landscape or portrait. – Offcolor

@GarfieldKlon: that should be defined in your CSS, see https://mcmap.net/q/55113/-landscape-printing-from-html – Gasperoni

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 – Seavey

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? – Diaspore

Answer 2

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.

Keister

To reflect this update, I've gone ahead and marked this as the correct answer now. – Middle

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. – Untold

You don't have to switch to the Elements panel to bring up the drawer using Esc. This works on any panel. Essentially. – Impartial

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. – Enigmatic

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 – Truculent

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. – Leeland

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. – Straggle

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? – Caco

This answer is now out-of-date. – Hatband

Answer 3

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.

Impartial

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. – Middle

When I get the chance, I'll have to give that a try. I may just stick with @Jon-YYC's method until then. – Middle

Im using version 28 on mac and do not see this option... anyone else have this problem? – Cordiform

@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. – Middle

This answer is now out-of-date. – Hatband

Answer 4

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

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

Bova

Doing the same thing via DevTools GUI: Menu -> More tools -> Rendering. See "Rendering tab" and scroll down to "Emulate CSS media type" pull-down. – Thracophrygian

Answer 5

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.

Allusion

Answer 6

Please see This article

Then goto the "overrides" tab

Scheldt

This answer is now out-of-date. – Hatband

Answer 7

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.

Rhpositive

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. – Carsoncarstensz

The best source I found for general dev tools info is developers.google.com/web/tools/chrome-devtools/?hl=en. I also really enjoyed watching the updates for the latest version in this video: youtube.com/watch?v=dJR-n8szgBc. – Rhpositive

Answer 8

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

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.

Hope it helps.

Volny

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

Bouffant

Answer 10

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.

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

Brachypterous

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. chrome.google.com/webstore/detail/full-page-screen-capture/… – Indissoluble

Answer 11

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

Quilt