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

【问题标题】：Faster way to develop and test print stylesheets (avoid print preview every time)?更快地开发和测试打印样式表（避免每次打印预览）？
【发布时间】：2012-03-20 03:29:03
【问题描述】：

这是我现在的流程：

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

第 3 步让我很烦恼，我想知道是否可以使用插件或其他东西将其从流程中删除。只需选择以打印媒体形式查看页面，然后只需刷新即可查看更改。

您如何测试您的打印样式表？刷新后总是点击打印预览吗？

【问题讨论】：

谢谢大家的建议。如果 Mozilla 会添加一个开发人员设置以在打印预览窗口上启用“刷新”功能，我会很高兴（当然不是默认设置，以避免最终用户混淆）。这是我理想的解决方案，因为（同意浮士德）我通常需要在打印预览中看到它以准确地显示它将如何显示（-背景图像、分页符、边距等）。 Chrome 可能会有所帮助，因为它默认显示预览。我还会看看 slolife 推荐的 Firefox PrintPreview 插件。
这不适用于 Mac，因为没有打印预览选项，但是，您的打印对话框中可能有一个 PDF 选项，您可以在其中打开“打印”到临时 PDF 文件的预览。不确定这个功能是 OSX 内置的还是因为我安装了 Acrobat。
只是澄清一下，似乎在 OSX 中，文件...菜单中没有打印预览选项，但使用扩展打印/打印预览，您可以有一个启动按钮它。 addons.mozilla.org/en-US/firefox/addon/printprint-preview

标签： css firefox

【解决方案1】：

Firefox + Web Developer toolbar 扩展可以启用/禁用各种样式表。

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

另外，为了减少在 Firefox 中访问 PrintPreview 的步骤，请尝试 PrintPreview extension，它将创建一个工具栏按钮。

对于 Chrome，有一个 port of that extension。根据我对 Chrome 版本的了解，您可以选择“显示打印样式”

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以尝试暂时删除您的常规样式表，并且只加载带有正常链接标签的打印样式表。

【讨论】：

【解决方案4】：

我不会使用任何不涉及打印预览的测试方法。有太多不同之处：背景图像在打印中根本不起作用，但在正常屏幕上下文中显示是其中主要的。

在 Chrome 中，control+p 立即进入打印预览。（只是忘记将鼠标悬停在菜单栏上）。这很容易。

【讨论】：

Chrome 绝对不会坚持打印媒体仿真中显示的内容。我发现如果你没有在 2ms 内运行 chrome 媒体查询预打印功能，它不会绘制更改。
打印预览的问题是它不允许元素检查，因此调试诸如填充和边距之类的东西非常困难。尝试调试框问题时，最好单独查看这些元素。

【解决方案5】：

您可以使用Chrome Media Type Emulation 帖子中接受的See print css in the browser。

21/11/2017 更新

可在此处找到更新的 DevTools 文档：View a page in print mode。

以打印模式查看页面：
1. 打开Command Menu。 (tl;dr Cmd+Shift+P (Mac) 或 Ctrl+Shift+P (Windows, Linux))
2. 开始输入 Rendering 并选择Show Rendering。
3. 对于 Emulate CSS Media 下拉菜单，选择 print。

2016 年 2 月 29 日更新

DevTools 文档已移动，上述链接提供的信息不准确。可以在此处找到有关媒体类型仿真的更新文档：Preview styles for more media types。

点击浏览器视口右上角的More overrides••• more overrides 图标打开DevTools 仿真抽屉。然后，在仿真抽屉中选择 Media。

2016 年 12 月 4 日更新

不幸的是，关于打印仿真的文档似乎尚未更新。然而，印刷媒体模拟器已经（再次）移动：

打开 Chrome 开发工具
按键盘上的 esc
点击⋮（垂直省略号）
选择渲染
勾选模拟印刷媒体

请看下面的截图：

2016 年 6 月 28 日更新

围绕 Chrome DevTools 和“模拟媒体”选项的 Google Developers Docs 已针对 Chrome >51 进行了更新：

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

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

2016 年 5 月 24 日更新

设置的命名再次更改：

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

【讨论】：

@SupaIrish 是的，对于 Firefox，请参阅 Szymon 的答案。
文档完全过时了，“更多覆盖”区域内的任何地方都没有模拟 css 媒体。去哪儿了？
它位于“控制台 (esc)”下，然后是“3 个垂直点”，然后是“渲染”，然后是底部的“模拟打印媒体”——为什么这么隐藏我不知道。
在 osx 上选择此选项似乎没有任何作用？

【解决方案6】：

正如另一篇文章 (Using Chrome's Element Inspector in Print Preview Mode?) 中所述，您可以使用 chrome 来简单地模拟打印样式表。这很棒，因为您可以使用检查器查看样式的来源，而不是猜测何时出现打印对话框。

通过单击 Chrome 元素检查器右下角的齿轮图标访问“覆盖设置”对话框。然后选择打印作为目标介质类型。

太棒了！

【讨论】：

这不会捕获分页符隐藏/中断内容和其他可能出现在某些纸张尺寸中的怪癖的情况
Enrico，它确实没有指定分页符，但是您可以轻松地使用 Chrome 的打印预览来查看它在您计划打印的页面大小上的样子。
当然可以，但是您无法使用检查器对其进行调试，并且它的行为与最终打印结果不完全相同。过去一周我一直在处理与 page-break-inside 相关的问题，我们无法重现模拟打印，但在预览中可见，并且很难仅从预览中查明问题。

【解决方案7】：

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

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

顺便说一句，有一些方法可以消除第 2 步。一种流行的方法是 LiveReload。

【讨论】：

【解决方案8】：

对我来说很简单（没有 @screen 部件或类似部件¹）带 FF：

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

¹：如果有它们，根据您测试的媒体，将它们注释掉/注释掉可能没什么大不了的

【讨论】：

【解决方案9】：

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

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

【讨论】：

我注意到，这可能反映的视图与打印预览中提供的视图不同 - 特别是在涉及额外空白时 - 请确保您的打印预览不是完成此子步骤后会有所不同。
遗憾的是，GLCI 已从 62 版的 firefox 中删除。拖累。
如何在没有 GLCI (shift+F12) 的情况下启用此功能？
@StR 您现在可以在 Firefox 中以另一种方式模拟打印样式：stackoverflow.com/questions/47877112/…
我刚刚测试了@TylerH 在 Firefox v68 中所说的内容，它可以工作。

【解决方案10】：

在 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 在同一位置具有相同的打印...菜单，可通过 ctrl-p 访问：

【讨论】：