Using Chrome's Element Inspector in Print Prev

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

Answer 1

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.

Answer 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

Answer 3

Please see This article

Then goto the "overrides" tab

Answer 4

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.