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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  gt  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   gt  Show console  3  or pressing the ESC key to toggle the console  only works when Developer Toolbar has the focus   Open the Emulation  4   gt  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  gt  Media check CSS media and select print  3

User · Answer

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

User · Answer

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

User · Answer

Please see This article  Then goto the  quot overrides quot  tab

User · Answer

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

User · Answer

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

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

Changed in Chrome 32 35+

Examples related to google-chrome

Examples related to google-chrome-devtools

Examples related to web-inspector

Examples related to print-preview