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

Question

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

是否有Chrome插件或其他方式来更改Chrome本身的查看媒体，以打印机的形式查看页面？ 我认为它没有特定于Chrome的解决方案，但这是我的主要浏览器，所以拥有一个浏览器内的解决方案会很不错。

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

Answer 1

注意：这个答案涉及铬的几个版本中，滚动查看V52，V48，V46，V43和V42每一个与他们的更新变化。

Chrome v52 +：

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

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

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

Chrome v46 +：

• 打开开发人员工具（ CTRL SHIFT I或F12 ）
• 单击左上角的“ 切换设备模式”按钮（1）。
• 通过单击菜单按钮（2）> 显示控制台 （3）或按ESC键切换控制台（仅在开发人员工具栏具有焦点时有效），确保显示控制台 。
• 打开仿真（4）>媒体（5）选项卡，检查CSS媒体并选择打印 （3）。

Chrome v43 +：

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

Chrome v42：

• 打开开发人员工具（ CTRL SHIFT I或F12 ）
• 单击左上角的“ 切换设备模式”按钮（1）。
• 通过单击“ 显示”抽屉按钮（2）或按ESC键切换抽屉，确保显示抽屉。
• 在Emulation> Media下检查CSS媒体并选择print （3）。

Answer 2

已在Chrome 32 35+中更改

（在Chrome 35+中，默认情况下存在“仿真”选项卡。此外，控制台可从任何主要选项卡中获得。）

1. 在DevTools中，转到settings-> Overrides
2. 启用“在控制台抽屉中显示仿真视图”
3. 关闭设置，转到“元素”选项卡
4. 点击Esc调出控制台
5. 选择“仿真”选项卡，然后单击“屏幕”
6. 向下滚动到“CSS Media”，选择“print”

此选项在控制台选项卡中不可用（尚？）。

Answer 3

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

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

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

Answer 4

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

前几个步骤没有变化：

1. 按F12打开开发人员工具

2. 按ESC键打开控制台

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

Answer 5

请参阅本文

然后转到“覆盖”选项卡

Answer 6

自Chrome 48+起，您可以通过以下步骤访问打印预览：

1. 打开开发工具 - Ctrl / Cmd + Shift + I或右键单击页面并选择“检查”。

2. 点击Esc打开附加抽屉。

3. 如果尚未显示“渲染”，请单击3点烤肉串并选择“渲染”。

4. 选中“模拟打印介质”复选框。

从那里Chrome将向您显示页面的打印版本，您可以像浏览器版本一样检查元素和故障排除。

Answer 7

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

Answer 8

在Mac上的Chrome v51下，我通过单击右上角找到渲染设置，选择更多工具>渲染设置，然后在窗口底部提供的选项中选中模拟媒体按钮。

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

Answer 9

Chrome v67（mac）：

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

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

在哪里可以找到“渲染”选项卡：单击右侧的“ ... ”，然后选择：“更多工具”>>“渲染”

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

希望能帮助到你。

Answer 10

Chrome v50：

方式1：

1. 菜单>更多工具>渲染设置（见图）
2. 向下：渲染选项卡>模拟媒体“打印”

方式2：

1. 打开控制台[esc]
2. 控制台菜单>渲染

Answer 11

有了快捷方式，最快捷的方法就是

1. 打开开发人员工具

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

2. 打开命令菜单

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

3. 键入print并从上下文菜单中选择“ 模拟CSS打印介质类型 ”

   

看看lmeurs的优秀和目前最受欢迎的答案 ，我认为这个解决方案也可能会随着时间的推移保持稳定。