在打印预览模式下使用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注意到):

• 打开开发人员工具(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 35+中更改

(在Chrome 35+中,默认情况下存在"仿真"选项卡.此外,控制台可从任何主要选项卡中获得.)

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

此选项在控制台选项卡中不可用(尚？).

Answer 3

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

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

使用Esc弹出抽屉,如果它是不可见的.

Answer 4

从Chrome 48(以及之前的几个版本)开始,该功能似乎再次发生了变化:

前几个步骤没有变化:

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

2. 按ESC打开控制台

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

Answer 5

请参阅本文

然后转到"覆盖"选项卡

Answer 6

Chrome v67（苹果机）：

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

上述 Mac 上 Chrome v67 的描述图片：

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

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

希望能帮助到你。

Answer 7

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

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

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

3. 如果尚未显示"渲染",请单击3点烤肉串并选择"渲染".

4. 选中"模拟打印介质"复选框.

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

Answer 8

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

Answer 9

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

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

Answer 10

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

1. 打开开发者工具

   • Windows系统：F12或Ctrl+ Shift+I
   • 苹果：Cmd+ Opt+I

2. 打开命令菜单

   • Windows系统：Ctrl+ Shift+P
   • 苹果：Cmd+ Shift+P

3. 从上下文菜单中键入print并选择模拟 CSS 打印媒体类型

   

看看 lmeurs 出色且目前投票率最高的答案，我认为该解决方案也可能会随着时间的推移保持稳定。