提问人：David Stinemetze 提问时间：3/3/2012 最后编辑：FlimmDavid Stinemetze 更新时间：1/31/2023 访问量：329616
在打印预览模式下使用 Chrome 的元素检查器？
Using Chrome's Element Inspector in Print Preview Mode?
问：
我正在开发一个网站，需要处理打印视图。通常，当我遇到布局问题时，我会使用 Chrome 的元素检查器。但是，这在打印预览模式下不存在。
是否有 Chrome 插件或其他方法可以在 chrome 本身中更改您的查看媒体，以像打印机一样查看页面？我想它没有特定于 Chrome 的解决方案，但这是我的主要浏览器，所以有一个浏览器内解决方案会很好。
现在我只专注于打印预览媒体，但能够更改为任何支持的媒体类型（即所有/盲文/浮雕/手持/打印/投影/屏幕/语音/tty/电视）将是理想的。
答：
76赞
Alexander Pavlov
3/9/2012
#1
从 Chrome 32 开始，您可以在抽屉选项卡的部分进行选择。CSS mediaScreenEmulation
只需启用它，选择作为目标媒体类型，然后 - 看哪 - 您的页面几乎以打印方式呈现。print
用于在抽屉不可见时调出抽屉。Esc
评论
0赞
David Stinemetze
3/15/2012
我希望它比这更简单，但我想它现在必须这样做。如果这最终自动内置到其中一个工具中，那就太好了。
0赞
David Stinemetze
12/27/2012
当我有机会时，我必须试一试。在那之前，我可能会坚持使用 @Jon-YYC 的方法。
0赞
Aaron Hill
7/20/2013
我在 mac 上使用版本 28，但没有看到此选项......还有其他人有这个问题吗？
2赞
David Stinemetze
8/6/2013
@AaronHill我在 Mac 上使用版本 28，没有问题。虽然也许您实际上并没有进入设置对话框。您可以通过单击元素检查器右下角的齿轮图标来找到它。
2赞
Flimm
1/19/2017
这个答案现在已经过时了。
20赞
adardesign
2/27/2013
#2
请看这篇文章
然后转到“覆盖”选项卡
评论
5赞
Flimm
1/19/2017
这个答案现在已经过时了。
172赞
Noco
1/16/2014
#3
在更改 Chrome 32 35+
（在 Chrome 35+ 中，默认情况下存在“仿真”选项卡。此外，控制台可从任何主选项卡访问。
在 DevTools 中，转到 settings-> 替代启用“在控制台抽屉中显示仿真视图”关闭设置，转到“元素”选项卡- 点击调出控制台Esc
- 选择“仿真”选项卡，单击“屏幕”
- 向下滚动到“CSS Media”，选择“打印”
此选项在控制台选项卡中尚不可用。
评论
1赞
David Stinemetze
2/11/2014
为了反映此更新，我现在已经将其标记为正确答案。
3赞
ebruchez
4/18/2014
Chrome 36 中不再存在“覆盖”选项卡（我不知道这是什么时候更改的）。默认情况下，“仿真”选项卡处于状态。
1赞
Ted
8/13/2014
是只有我还是 Chrome 36 中的 CSS 媒体选项消失了？现在只能根据特定的移动设备进行选择。更新：doh。根据上述说明，从字面上看必须单击“屏幕”。不是很明显它是可点击的。
1赞
Sammaye
10/24/2014
现在我正在使用它，我发现的唯一问题是它实际上不是 Chrome 打印出来的。这在 Bootstrap 3.x 中非常明显，其中媒体将使用 grid-md，而打印预览使用 grid-sm
3赞
Danny Staple
12/29/2014
Chrome 39 这是在“媒体”下。必须先通过单击 DevTools 顶部栏左侧的小电话图标，然后单击设备仿真器右上角的 3 个点来启用设备仿真。
1351赞
lmeurs
4/30/2015
#4
注意：此答案涵盖了 Chrome 的多个版本，滚动查看 v52、v48、v46、v43 和 v42 及其更新的更改。
Chrome v52+：
- 打开开发人员工具（Windows：或 ++，Mac：F12CtrlShiftICmd+Opt+I)
- 单击“自定义和控制 DevTools 汉堡包”菜单按钮，然后选择“更多工具”>“渲染设置”（或“较新版本中的渲染”）。
- 选中“渲染”选项卡上的“模拟打印媒体”复选框，然后选择“打印媒体类型”。
Chrome v48+（感谢 Alex 注意到）：
- 打开开发人员工具（ 或CTRLSHIFTIF12)
- 单击左上角的切换设备模式按钮 （）。CTRLSHIFTM
- 单击菜单中的“在菜单中显示控制台”（1） 确保显示控制台（如果开发人员工具栏具有焦点，则按键切换控制台）。ESC
- 选中渲染选项卡中的模拟打印媒体，该选项卡可以通过选择菜单中的渲染（2）来打开。
Chrome v46+：
- 打开开发人员工具（ 或CTRLSHIFTIF12)
- 单击左上角的切换设备模式按钮 （1）。
- 通过单击菜单按钮 （2） >显示控制台 （3） 或按键切换控制台（仅当开发人员工具栏具有焦点时才有效），确保显示控制台。ESC
- 打开“仿真 （4）”>“媒体 （5）”选项卡，选中“CSS 媒体”，然后选择“打印”（3）。
Chrome v43+：
- 步骤 2 中的抽屉图标已更改。
Chrome v42：
- 打开开发人员工具（ 或CTRLSHIFTIF12)
- 单击左上角的切换设备模式按钮 （1）。
- 通过单击显示抽屉按钮 （2） 或按键切换抽屉，确保显示抽屉。ESC
- 在“仿真>媒体”下，选中“CSS 媒体”，然后选择“打印”（3）。
评论
18赞
David Stinemetze
5/1/2015
我可以确认这一点，所以我把这个作为批准的答案。我不确定为什么他们一直坚持每隔几个版本就移动它。
8赞
Olemak
2/6/2016
在 Chrome 48 中找到它，但他们再次移动了它：转到抽屉中的“渲染”，选中“模拟打印媒体”。
9赞
isapir
4/6/2016
这些频繁的变化是迄今为止我从谷歌上看到的最愚蠢的事情！真是浪费我的时间。
15赞
Confuzing
10/11/2017
不幸的是，这并不总是模拟打印预览显示的相同内容，因此对于调试来说不是那么好。不过，这有利于了解总体布局和样式。
37赞
Ian Steffy
11/16/2017
这个“打印”模拟器是完全没用的。它不能正确模拟页面，因为您在浏览器中看到的内容与您在打印预览中看到的内容完全不同。有人有可行的解决方案吗？
9赞
Rosdi Kasim
10/18/2015
#5
如果您在 Google Chrome 中使用“打印为 PDF”来调试 CSS，并且您的 CSS 元素背景颜色未显示，请确保勾选“背景图形”复选框。我花了将近 30 分钟来调试我的 CSS，并想知道是什么导致我的 CSS 背景被忽略。
15赞
NilsyNils
11/24/2015
#6
从 Chrome 48+ 开始，您可以通过以下步骤访问打印预览：
打开开发工具 – + + 或右键单击页面并选择“检查”。Ctrl/CmdShiftI
点击以打开额外的抽屉。Esc
如果尚未显示“渲染”，请单击 3 点烤肉串并选择“渲染”。
选中“模拟打印媒体”复选框。
从那里，Chrome 将向您显示页面的打印版本，您可以像检查浏览器版本一样检查元素并进行故障排除。
评论
0赞
Crystal Miller
12/2/2015
是否有更新的 DevTools 说明的来源？我可以弄清楚其中的大部分，但我到处寻找这个，我觉得有很多有用的新功能隐藏在我面前。
1赞
NilsyNils
12/3/2015
我找到的一般开发工具信息的最佳来源是 developers.google.com/web/tools/chrome-devtools/?hl=en。我也非常喜欢观看此视频中最新版本的更新：youtube.com/watch?v=dJR-n8szgBc。
24赞
bisgardo
1/27/2016
#7
从 Chrome 48 开始（也许还有更早的几个版本），该功能似乎又发生了变化：
前几个步骤保持不变：
按 调出开发人员工具F12
按下可打开控制台ESC
根据前面的答案，可以在“仿真”选项卡下找到该设置。如下图所示，它现在已移至“渲染”选项卡，可以通过单击“控制台”选项卡左侧的三个点来调出该选项卡。
2赞
Ben Richter
5/11/2016
#8
Chrome v50：
方式1：
- 菜单>更多工具>渲染设置（见图）
- 下：渲染选项卡>模拟媒体“打印”
方式2：
- 打开控制台 [esc]
- 控制台菜单>渲染
6赞
user2182349
5/27/2016
#9
在 Mac 上的 Chrome v51 下，我通过单击右上角，选择“更多工具”>“渲染设置”，然后选中窗口底部提供的选项中的“模拟媒体”按钮来找到渲染设置。
感谢所有其他引导我这样做的海报，并感谢那些在没有图像的情况下提供答案的人。
评论
0赞
niknah
2/22/2019
无论我在“模拟媒体”中选择打印还是屏幕，它仍然使用打印样式表进行打印。我最终使用了整页屏幕截图扩展。chrome.google.com/webstore/detail/full-page-screen-capture/......
13赞
Matt
6/15/2018
#10
Chrome v67 （mac）：
- 按住以打开开发工具Cmd+opt+j
- 单击右侧的，然后选择： 更多工具>>渲染
... - 当“渲染”窗口显示在屏幕底部时，模拟CSS媒体部分，然后从下拉列表中选择“屏幕”。
- 转到“文件>>打印”，您应该会看到要打印的视图。
Mac 上 Chrome v67 的上述描述的图像：
在哪里可以找到“渲染”选项卡：单击右侧的“，然后选择：”渲染>>更多工具”...
如何打印“屏幕”视图：当“渲染”窗口显示在屏幕底部时，模拟CSS媒体部分，然后从下拉列表中选择“屏幕”。
希望对你有所帮助。
28赞
Kariem
4/25/2019
#11
有了可用的快捷方式，最快的方法是
打开开发人员工具
- Windows：或F12Ctrl+Shift+I
- 苹果：Cmd+Opt+I
打开命令菜单
- 窗户：Ctrl+Shift+P
- 苹果：Cmd+Shift+P
键入并从上下文菜单中选择模拟 CSS 打印媒体类型
print
看看 lmeurs 目前投票最多的优秀答案，我认为这个解决方案也可能随着时间的推移保持稳定。
评论
1赞
chrism
12/11/2020
通过 DevTools GUI 执行相同的操作：菜单 -> 更多工具 ->渲染。请参阅“渲染选项卡”并向下滚动到“模拟 CSS 媒体类型”下拉列表。
评论