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).
This question is related to
google-chrome
google-chrome-devtools
web-inspector
print-preview
With shortcuts available, the quickest way is to
Open the Developer Tools
Open the Command Menu
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.
Please see This article
Then goto the "overrides" tab
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.
Chrome v67 (mac):
...
on the righthand side, and choose: More Tools >> RenderingImages 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.
(In Chrome 35+ the "Emulation" tab is present by default. Also, the console is available from any primary tab.)
This option is not (yet?) available in the console tab.
Chrome v50:
Way 1:
Way 2:
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.
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.
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.
Source: Stackoverflow.com