在打印预览模式下使用Chrome的Element Inspector？

Question

在打印预览模式下使用Chrome的Element Inspector？我正在开发一个网站，需要处理打印视图。通常，当我遇到布局问题时，我会使用Chrome的Element Inspector。但是，这在打印预览模式下不存在。是否有Chrome插件或其他方式来更改Chrome本身的查看媒体，以打印机的形式查看页面？我认为它没有特定于Chrome的解决方案，但这是我的主要浏览器，所以拥有一个浏览器内的解决方案会很不错。现在我只专注于打印预览媒体，但是能够更改为任何支持的媒体类型（即所有/盲文/浮雕/手持/打印/投影/屏幕/语音/ tty /电视）。

Answer 1

Chrome v52 +：

• 打开开发人员工具（Windows：F12或Ctrl+ Shift+ I，Mac：Cmd+ Opt+ I）

• 单击自定义并控制DevTools汉堡包菜单按钮，然后选择更多工具>渲染设置（或在较新版本中渲染）。

• 选中“ 渲染”选项卡上的“ 模拟打印介质”复选框，然后选择“ 打印介质类型”。

Chrome v48 +（感谢Alex注意到）：

• 打开开发人员工具（CTRLSHIFTI或F12）

• 单击左上角的（切换设备模式）按钮（CTRLSHIFTM）。

• 通过单击（1）菜单中的显示控制台确保显示控制台（ESC如果开发人员工具栏具有焦点，则键切换控制台）。

• 选中“渲染”选项卡上的“ 模拟打印介质 ”，可以通过选择（2）中的菜单中的“ 渲染”来打开该介质。

Chrome v46 +：

• 打开开发人员工具（CTRLSHIFTI或F12）

• 单击左上角的“ 切换设备模式”按钮（1）。

• 通过单击菜单按钮（2）> 显示控制台（3）或ESC按键切换控制台（仅在开发人员工具栏具有焦点时有效），确保显示控制台。

• 打开仿真（4）>媒体（5）选项卡，检查CSS媒体并选择打印（3）。

Chrome v43 +：

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

Chrome v42：

• 打开开发人员工具（CTRLSHIFTI或F12）

• 单击左上角的“ 切换设备模式”按钮（1）。

• 通过单击“ 显示”抽屉按钮（2）或ESC按键切换抽屉，确保显示抽屉。

• 在Emulation> Media下检查CSS媒体并选择print（3）。

Answer 2

从Chrome 32开始，您可以在抽屉选项卡CSS media的Screen部分中选择Emulation。

只需启用它，选择print作为目标媒体类型，并且 - 看哪 - 您的页面几乎以其打印方式呈现。

使用Esc弹出抽屉，如果它是不可见的。

Answer 3

从Chrome 48（以及之前的几个版本）开始，该功能似乎再次发生了变化：

前几个步骤没有变化：

1. 按下F12以显示开发人员工具

2. 按ESC打开控制台

根据之前的答案，可以在“仿真”选项卡下找到该设置。如下图所示，它现在已移至“渲染”选项卡，可通过单击“控制台”选项卡左侧的三个点来显示该选项卡。