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

Question

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

是否有Chrome插件或其他方式在Chrome内部更改您的查看媒体，以打印机的形式查看页面？我认为它没有特定于Chrome的解决方案，但这是我的主要浏览器，所以最好有一个浏览器内的解决方案。

现在我专注于打印预览媒体，但是能够更改为任何支持的媒体类型（即所有/盲文/浮雕/手持/打印/投影/屏幕/语音）是理想的/ TTY / TV）。

Answer 1

注意：此答案涵盖多个版本的Chrome，滚动查看 v52 ， v48 ， v46 ， v43 和 v42 各自进行了更新。

Chrome v52 +：

• 打开开发人员工具（Windows： F12 或 Ctrl + Shift + I ，Mac： Cmd + 选择 + I ）
• 点击自定义和控制DevTools 汉堡包菜单按钮，然后选择更多工具＆gt;渲染设置（或在较新版本中渲染）。
• 选中渲染标签中的模拟打印介质复选框，然后选择打印介质类型。

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

• 打开开发者工具（ CTRL SHIFT I 或 F12 ）
• 单击左上角的切换设备模式按钮（ CTRL SHIFT M ）。
• 确保通过单击（1）菜单中的显示控制台显示控制台（如果开发人员工具栏具有焦点，则 ESC 键切换控制台。）
• 在渲染标签上检查模拟打印介质，可以通过在（2）的菜单中选择渲染来打开它。

Chrome v46 +：

• 打开开发者工具（ CTRL SHIFT I 或 F12 ）
• 点击左上角的切换设备模式按钮（1）。
• 单击菜单按钮（2）＆gt;确保显示控制台。 显示控制台（3）或按 ESC 键切换控制台（仅当开发人员工具栏具有焦点时才有效。）
• 打开 Emulation（4）＆gt;媒体（5）标签，检查 CSS媒体并选择打印（3）。

Chrome v43 +：

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

Chrome v42：

• 打开开发者工具（ CTRL SHIFT I 或 F12 ）
• 点击左上角的切换设备模式按钮（1）。
• 单击显示抽屉按钮（2）或按 ESC 键切换抽屉，确保显示抽屉。
• Emulation＆gt;下媒体检查 CSS媒体并选择打印（3）。

Answer 2

在Chrome 32 35 +

中更改

（在Chrome 35+中，默认情况下会出现“模拟”标签。此外，控制台可从任何主要标签中获取。）

1. 在DevTools中，转到settings-＆gt;覆盖
2. 启用“在控制台抽屉中显示仿真视图”
3. 关闭设置，转到“元素”标签
4. 点击 Esc 以显示控制台
5. 选择标签“仿真”，然后点击“屏幕”
6. 向下滚动到“CSS Media”，选择“print”

此选项在控制台选项卡中不可用（<？strike>

）

Answer 3

自Chrome 32以来，您在抽屉CSS media标签的Screen部分中有Emulation选项。

只需启用它，选择print作为目标媒体类型，然后 - 请注意 - 您的页面将[几乎]以其打印方式呈现。

如果抽屉不可见，请使用 Esc 调出抽屉。

Answer 4

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

前几个步骤没有改变：

1. 按 F12 打开开发者工具

2. 按 ESC 打开控制台

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

Answer 5

请参阅This article

然后转到“覆盖”标签

Answer 6

如果您正在使用Google Chrome中的“打印为PDF”调试CSS并且未显示您的CSS元素背景颜色，请确保“背景图形”＆＃39;选中复选框。我花了差不多30分钟调试我的CSS，并想知道是什么导致我的CSS背景被忽略。

Answer 7

在Mac上的Chrome v51下，我点击右上角找到了渲染设置，选择了更多工具＆gt;在窗口底部提供的选项中渲染设置并检查“模拟媒体”按钮。

感谢所有其他导致我这样做的海报，并感谢那些提供没有图片答案的人。

Answer 8

Chrome v67（mac）：

1. 按住 Cmd + opt + j 打开开发工具
2. 点击右侧的...，然后选择：更多工具＆gt;＆gt;渲染
3. 当“渲染”窗口显示在屏幕底部时，“模拟CSS媒体”部分并从下拉列表中选择“屏幕”。
4. 转到“文件＆gt;＆gt;打印”，您应该会看到要打印的视图。

以上针对Mac上的Chrome v67的描述的图片：

在哪里可以找到“渲染”标签：点击右侧的...，然后选择：更多工具＆gt;＆gt;渲染



如何打印“屏幕”视图：当“渲染”窗口显示在屏幕底部时，“模拟CSS媒体”部分并从下拉列表中选择“屏幕”。



希望它有所帮助。

Answer 9

Chrome v50：

方式1：

1. 菜单＆gt;更多工具＆gt;渲染设置 (see image)
2. 向下：渲染选项卡＆gt;模拟媒体＆＃34;打印＆＃34;

方式2：

1. 打开控制台[esc]
2. 控制台菜单＆gt;渲染

Answer 10

使用可用的快捷方式，最快的方法是

1. 打开开发人员工具

   • Windows： F12 或 Ctrl + Shift + I
   • Mac： Cmd + Opt + I

2. 打开 Command Menu

   • Windows： Ctrl + Shift + P
   • Mac： Cmd + Shift + P

3. 键入print，然后从上下文菜单中选择模拟CSS打印介质类型

   

考虑到优秀的answer by lmeurs，并且目前最受关注的是，随着时间的流逝，我认为这种解决方案也可能保持稳定。