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

编程入门行业动态更新时间:2024-10-19 21:29:22

本文介绍了在打印预览模式下使用 Chrome 的元素检查器?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我正在开发一个网站，需要处理打印视图.通常，当我遇到布局问题时，我会使用 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).