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

Question

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

是否有 Chrome 插件或其他方式来更改您在 chrome 中的查看媒体，以像打印机一样查看页面？我想它没有特定于 Chrome 的解决方案，但那是我的主要浏览器，所以有一个浏览器内的解决方案会很好。

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

Answer 1

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

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

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

Answer 2

请看This article

然后转到“覆盖”选项卡

Answer 3

在 Chrome 中更改 32 35+

（在 Chrome 35+ 中，“仿真”选项卡默认存在。此外，控制台可从任何主选项卡中使用。）

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

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

Answer 4

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

Chrome v52+：

• 打开开发者工具（Windows：F12或Ctrl+Shift+I kbd>，Mac：Cmd+Opt+I)
• 单击自定义和控制 DevTools 汉堡菜单按钮并选择更多工具> 渲染设置（或在较新版本中渲染）。李>
• 选中渲染选项卡上的模拟打印媒体复选框并选择打印媒体类型。

Chrome v48+（感谢 Alex 的关注）：

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

Chrome v46+：

• 打开开发工具（CTRLSHIFTI 或 F12）
• 点击左上角的切换设备模式按钮 (1)。
• 确保控制台显示通过单击菜单按钮 (2) > 显示控制台 (3) 或按 ESC 键切换控制台（仅在开发者工具栏具有焦点）。
• 打开 Emulation (4) > Media (5) 选项卡，选中 CSS media 并选择 print (3)。

Chrome v43+：

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

Chrome v42：

• 打开开发工具（CTRLSHIFTI 或 F12）
• 点击左上角的切换设备模式按钮 (1)。
• 确保通过单击显示抽屉按钮 (2) 或按 ESC 键来切换抽屉来显示抽屉。
• 在 Emulation > Media 下检查 CSS media 并选择 print (3)。

Answer 5

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

Answer 6

从 Chrome 48+ 开始，您可以通过以下步骤访问打印预览：

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

2. 点击 Esc 打开额外的抽屉。

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

4. 选中“模拟打印媒体”复选框。

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

Answer 7

从 Chrome 48（可能还有几个更早的版本）开始，该功能似乎又发生了变化：

前几个步骤不变：

1. 按 F12 调出开发者工具

2. 按ESC打开控制台

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

Answer 8

Chrome v50：

方式一：

1. 菜单 > 更多工具 > 渲染设置 (see image)
2. 向下：渲染选项卡 > 模拟媒体“打印”

方式二：

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

Answer 9

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

感谢所有其他将我引向此的海报，并感谢那些在没有图片的情况下提供答案的人。

Answer 10

Chrome v67 (mac)：

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

Mac 上 Chrome v67 的上述说明图片：

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

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

希望对你有帮助。

Answer 11

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

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，我认为这个解决方案也可能随着时间的推移保持稳定。