在打印预览模式下使用Chrome的元素检查器？ [英] Using Chrome's Element Inspector in Print Preview Mode?

问题描述

我正在开发一个网站，需要在打印视图上工作。通常当我有布局问题时，我使用Chrome的元素检查器。但是，这在打印预览模式下不存在。

是否有Chrome插件或其他方式在Chrome本身内更改查看介质，以便像打印机一样查看页面？我想这不是一个Chrome特定的解决方案，但这是我的主要浏览器，所以最好有一个浏览器内解决方案。

现在我只关注打印预览介质，但它能够更改为任何支持的介质类型（即全部/盲文/压印/手持/打印/投影/屏幕/语音/ tty /电视） 。 v48 ， v46 ， v43 和 v42 每个都有其更新过的更改。

Chrome v52 +：

• 打开开发者工具 kbd> F12 或 Ctrl + Shift + I ，Mac： Cmd + Opt点击自定义并控制DevTools汉堡菜单按钮，然后选择更多工具>渲染
设置（或更新版本中的渲染）。

• 检查渲染中的仿真打印介质 选项卡并选择打印媒体类型。 /i.stack.imgur.com/7BCx7.pngrel =noreferrer>
  
  
  

  Chrome v4 8+（感谢Alex注意到）：

  
  
  
  
  
  • 打开开发工具（ CTRL SHIFT < KBD> I 或 F12 ）
  
  
  • 点击左上角的切换设备模式按钮 确保通过单击显示控制台在（1）的菜单中进行选择（ ESC 键在开发人员工具栏具有焦点时切换控制台）。 （2）菜单中的渲染可以打开渲染选项卡。
  
  
  
  
  
  
  
  

  Chrome v46 +：

  
  
  
  
  
  • 打开开发人员工具（ CTRL SHIFT I 或 F12 ）
  在左上角（1）的切换设备模式按钮。
  
  • M确保通过单击菜单按钮（2）> 显示控制台（3）或按 ESC 键切换控制台（仅在Developer Toolbar具有打开 Emulation（4）> Media（5）标签，选中 CSS媒体，然后选择打印（3）。
  
  
  
  
  
  
  
  

  Chrome v43 +：

  
  
  
  
  
  • 步骤2中的抽屉图标已更改
    
  
  
  
  
  
  

  Chrome v42：

  
  
  
  
  
  • 打开开发工具（ CTRL 点击切换设备模式按钮。
  在左上角（1）。
  
  • 确保抽屉由cl显示舔显示抽屉按钮（2）或按 ESC 键切换抽屉。 检查 CSS媒体并选择 print （3）。 >
    
    

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

    解决方案

    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 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) > 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 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 > Media check CSS media and select print (3).

    这篇关于在打印预览模式下使用Chrome的元素检查器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！