更快速地开发和测试打印样式表（每次都避免打印预览）？

Question

这是我现在的过程：

1. 保存对print.css的更改
2. 打开浏览器并刷新页面。
3. 右键单击并选择“打印”>“打印预览”（Firefox，但确实是任何浏览器）

这是第3步让我烦恼，我想知道是否有可能用插件或其他东西将其删除。 只需选择将页面视为打印介质，然后只需刷新即可查看更改。

你如何测试你的打印样式表？ 刷新后是否总是单击打印预览？

Answer 1

您可以使用帖子中接受的Chrome 媒体类型模拟 在浏览器中查看print css 。

更新21/11/2017

可以在此处找到更新的DevTools文档： 以打印模式查看页面 。

要以打印模式查看页面：
1.打开命令菜单 。 （ tl; dr Cmd + Shift + P （Mac）或Ctrl + Shift + P （Windows，Linux））
2.开始键入Rendering并选择Show Rendering 。
3.对于Emulate CSS Media下拉列表，选择print 。

---

更新29/02/2016

DevTools文档已移动，上述链接提供了不准确的信息。 有关媒体类型仿真的更新文档可在此处找到： 预览更多媒体类型的样式 。

通过单击浏览器视口右上角的“ 更多覆盖•••更多覆盖”图标，打开DevTools仿真抽屉。 然后，在仿真抽屉中选择“ 媒体 ”。

更新2016年4月12日

不幸的是，似乎文档没有在打印仿真方面进行更新。 但是，Print Media Emulator已经（再次）移动：

1. 打开Chrome DevTools
2. 点击键盘上的esc
3. 点击⋮ （垂直省略号）
4. 选择渲染
5. 勾选模拟打印介质

见下面的截图：

更新28/06/2016

适用于Chrome> 51的Google Developers围绕Chrome DevTools和“Emulate Media”选项的文档已经更新：

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

要在打印预览模式下查看页面，请打开DevTools主菜单，选择“ 更多工具” >“ 渲染设置” ，然后启用“ 模拟媒体”复选框，并将下拉菜单设置为“ 打印” 。

更新2016年5月24日

设置的命名再次改变：

要在打印预览模式下查看页面，请打开DevTools主菜单，选择“ 更多工具” >“ 渲染” ，然后启用“ 模拟CSS媒体”复选框，并将下拉菜单设置为“ 打印” 。

Answer 2

在Firefox中，您可以键入Shift+F2以打开开发人员工具栏命令行，然后键入media emulate print

您也可以通过这种方式模拟其他媒体类型。

Answer 3

Firefox + Web Developer工具栏扩展有一种启用/禁用各种样式表的方法。

在CSS菜单下查看。 有一个菜单可以禁用和启用单个样式表，也可以使用“按媒体类型显示”菜单。

此外，要减少在Firefox中访问PrintPreview的步骤，请尝试PrintPreview扩展 ，这将创建一个工具栏按钮。

对于Chrome，有一个该扩展程序的端口 。 根据我的Chrome版本，您可以选择“显示打印样式”

Answer 4

我不会使用任何不涉及打印预览的测试方法。 存在太多差异：背景图像在打印时根本不起作用，但在正常的屏幕环境中显示为主要的。

在Chrome中， control+p立即进入打印预览。 （忘了留意你的菜单栏）。 这很简单。

Answer 5

在测试时，您可以简单地禁用屏幕样式并将介质类型更改为“屏幕”以用于打印样式表。 这与使用真正的打印预览（分页符，文档宽度等）不完全相同，但它仍然为您提供了一个非常好的主意。

Answer 6

对我来说简单 （没有@screen部分或类似的¹ ） 与FF ：

• 将@media print { ...部分放在CSS内容的末尾
• out-comment仅包装声明/*@media print {*/ ... /*}*/
  • 因此，将印刷品应用于您的样式，并在适用的情况下立即覆盖它们
• （我正在使用LiveReload，因此我的浏览器页面在保存更改后立即刷新 ）
• （ 否则 ，如果不使用LiveReload :)按CTRL+R重新加载页面
• 现在你已经可以进行很多典型的打印CSS调整（字体样式，字体大小，间距，颜色） ，其中一个不需要打印预览
• 按ALT+F+V打开打印预览，按ALT+W再次关闭它

¹ ：如果有人拥有它们，那么根据你的测试媒体来评论那些，否则可能不是什么大问题

Answer 7

如其他帖子（ 在打印预览模式下使用Chrome的元素检查器？ ）中所述，您可以使用chrome来简单地模拟打印样式表。 这很棒，因为您可以使用检查器查看样式的来源，而不是在您看到打印对话框出现时猜测。

单击Chrome的Element Inspector右下角的齿轮图标，访问“覆盖设置”对话框。 然后选择print作为目标媒体类型。

真棒！

Answer 8

至少在Chrome中：在开发过程中，添加到body标签onload="window.print()" 。 这将导致刷新后立即打开打印模式。

不幸的是，开发人员工具似乎并没有多大用处，因为它本质上是一个嵌入式PDF。

顺便提一下，有一些方法可以消除第2步。一个流行的是LiveReload。

Answer 9

在Chrome 62中，cmd-R / cmd-P在Mac上运行良好，可以预览@media打印样式页面。

这可以通过浏览器窗口右上角的垂直省略号（不是开发者工具）/打印来访问...

使用esc取消预览窗口。

因此，对于我使用IntelliJ IDEA和Chrome的工作流程，它是：cmd-s，cmd-tab，cmd-r，cmd-p，esc，cmd-tab，我回到IDE中。

Windows 10中的Chrome 62在同一位置具有相同的Print ...菜单，可通过ctrl-p访问：

Answer 10

您可以尝试暂时删除常规样式表，并仅在带有普通链接标记的打印样式中加载。