[google-chrome] Using Chrome's Element Inspector in Print Preview Mode?

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

The answer is


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.


Please see This article

Open chrome dev tools inspector

Then goto the "overrides" tab

Open config/Settings


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


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.


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


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

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


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.


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.


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


Examples related to google-chrome

SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 81 SameSite warning Chrome 77 What's the net::ERR_HTTP2_PROTOCOL_ERROR about? session not created: This version of ChromeDriver only supports Chrome version 74 error with ChromeDriver Chrome using Selenium Jupyter Notebook not saving: '_xsrf' argument missing from post How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue? Selenium: WebDriverException:Chrome failed to start: crashed as google-chrome is no longer running so ChromeDriver is assuming that Chrome has crashed WebDriverException: unknown error: DevToolsActivePort file doesn't exist while trying to initiate Chrome Browser How to make audio autoplay on chrome How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66?

Examples related to google-chrome-devtools

When adding a Javascript library, Chrome complains about a missing source map, why? Chrome dev tools fails to show response even the content returned has header Content-Type:text/html; charset=UTF-8 Is there any way to debug chrome in any IOS device Is it possible to open developer tools console in Chrome on Android phone? What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools? Understanding Chrome network log "Stalled" state How to use color picker (eye dropper)? Bizarre Error in Chrome Developer Console - Failed to load resource: net::ERR_CACHE_MISS Google Chromecast sender error if Chromecast extension is not installed or using incognito How to open the Chrome Developer Tools in a new window?

Examples related to web-inspector

Using Chrome's Element Inspector in Print Preview Mode? CSS to set A4 paper size Using Chrome's Element Inspector in Print Preview Mode?