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 (ie all/braille/embossed/handheld/print/projection/screen/speech/tty/tv).


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

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

    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 v46 +支持

    Chrome v43+:

  • The drawer icon at step 2 has changed.
  • 在Chrome v43上模拟打印介质查询

    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).
  • 在Chrome v42上模拟打印介质查询


    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.

    启用覆盖


    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.

    链接地址: http://www.djcxy.com/p/3458.html

    上一篇: ServiceStack与ASP.Net Web API

    下一篇: 在打印预览模式下使用Chrome的元素检查器?