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

我正在开发一个网站，需要在打印视图上工作。通常当我有布局问题时，我使用Chrome的元素检查器。但是，这在打印预览模式中不存在。

是否有一个Chrome插件或其他方式来改变你的浏览器本身的观看媒介，以查看一个页面的打印机会?我想它没有一个Chrome特有的解决方案，但那是我的主要浏览器，所以有一个浏览器内的解决方案会很好。

现在我只专注于打印预览媒体，但如果能够切换到任何支持的媒体类型(即所有/盲文/压花/手持/打印/投影/屏幕/语音/tty/电视)将是理想的。

当前回答

在Chrome 48(也许还有更早的几个版本)，这个函数似乎又移动了:

前几个步骤没有改变:

按F12打开开发人员工具按“ESC”打开控制台

根据前面的回答，可以在“Emulation”选项卡下找到设置。如下图所示，它现在已经被移动到“渲染”选项卡，可以通过点击“控制台”选项卡左边的三个点来打开。

其他回答

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

打开开发人员工具 Windows: F12或Ctrl+Shift+I 麦克:Cmd + Opt + I 打开命令菜单 Windows:按Ctrl + Shift + P 麦克:Cmd + Shift + P 键入打印并从上下文菜单中选择模拟CSS打印媒体类型

看看lmeurs给出的优秀且目前获得最多赞的答案，我认为这个解决方案也可能随着时间的推移保持稳定。

作为Chrome 48+，您可以通过以下步骤访问打印预览:

打开开发工具-按Ctrl/Cmd + Shift + I或在页面上右键单击并选择“检查”。按Esc打开另一个抽屉。如果“渲染”还没有显示，点击3点烤肉串并选择“渲染”。选中“模拟打印媒体”复选框。

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

在Chrome 48(也许还有更早的几个版本)，这个函数似乎又移动了:

前几个步骤没有改变:

按F12打开开发人员工具按“ESC”打开控制台

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

感谢所有其他让我想到这一点的海报，并感谢那些没有图片提供答案的人。

如果你正在调试你的CSS使用打印为PDF在谷歌Chrome浏览器和你的CSS元素背景颜色不显示，然后确保“背景图形”复选框勾选。我花了近30分钟调试我的CSS，不知道是什么原因导致我的CSS背景被忽略。

推荐文章