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

问题描述

我正在开发一个网站，需要处理打印视图.通常，当我遇到布局问题时，我会使用 Chrome 的 Element Inspector.但是，这在打印预览模式中不存在.

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.

是否有 Chrome 插件或其他方法可以在 chrome 本身中更改您的查看媒体，以便像打印机一样查看页面?我想它没有特定于 Chrome 的解决方案，但那是我的主要浏览器，因此最好有一个浏览器内解决方案.

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.

现在我只关注打印预览媒体，但最好能够更改为任何支持的媒体类型(即全部/盲文/浮雕/手持/打印/投影/屏幕/语音/tty/电视).

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

推荐答案

注意:此答案涵盖 Chrome 的多个版本，滚动查看 v52、v48、v46、v43 和 v42 均带有更新的更改.

Note: This answer covers several versions of Chrome, scroll to see v52, v48, v46, v43 and v42 each with their updated changes.

• 打开开发者工具(Windows:F12 或 Ctrl+Shift+I，Mac:Cmd+Opt+I)
• 点击Customize and control DevTools汉堡菜单按钮，然后选择更多工具>渲染设置(或较新版本中的渲染).
• 选中渲染选项卡上的模拟打印媒体复选框，然后选择打印媒体类型.

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

• 打开开发者工具(CTRLSHIFTI 或 F12)
• 点击左上角的切换设备模式按钮(CTRLSHIFTM).
• 通过单击 (1) 处的菜单中的显示控制台来确保显示控制台(如果开发者工具栏具有焦点，ESC 键会切换控制台).
• 在渲染选项卡中选中 Emulate print media，该选项卡可以通过在 (2) 的菜单中选择 Rendering 来打开.

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

• 打开开发者工具(CTRLSHIFTI 或 F12)
• 点击左上角的切换设备模式按钮 (1).
• 确保通过单击菜单按钮 (2) 显示控制台 >显示控制台 (3) 或按 ESC 键切换控制台(仅当开发者工具栏具有焦点时才有效).
• 打开仿真(4)>媒体 (5) 选项卡，选中 CSS 媒体 并选择 打印 (3).

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

• 第 2 步的抽屉图标已更改.

• 打开开发者工具(CTRLSHIFTI 或 F12)
• 点击左上角的切换设备模式按钮 (1).
• 通过单击显示抽屉按钮 (2) 或按 ESC 键切换抽屉，确保显示抽屉.
• 在仿真下>媒体检查CSS媒体并选择打印(3).

• 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屋！