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

179

这是我现在的过程：

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

这是第3步，这让我很烦，我想知道是否有可能使用插件或其他工具将其排除在流程之外。只需选择以打印介质的形式查看页面，然后只需刷新以查看更改即可。

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

css firefox

— 麦可
source

谢谢大家的建议。如果Mozilla会添加开发人员设置以在打印预览窗口上启用“刷新”功能，则我会喜欢的（当然不是默认设置，以避免最终用户的困惑）。那是我理想的解决方案，因为（与Faust一致）我通常需要在Print Preview中查看它以准确显示其显示方式（背景图像，分页符，边距等）。Chrome可能会有所帮助，因为它默认显示预览。我还将看看slolife推荐的Firefox PrintPreview加载项。

— Michael

这在Mac上不起作用，因为没有“打印预览”选项，但是，您的打印对话框中可能有PDF选项，您可以在其中打开“打印”为临时PDF文件的预览。不知道此功能是否内置于OSX或因为我已安装Acrobat。

— 尼尔·梦露

只是澄清一下，似乎在OSX中，“文件...”菜单中的“打印预览”选项不可用，但是带有扩展名“打印/打印预览”，您可以使用一个按钮来启动它。addons.mozilla.org/zh-CN/firefox/addon/printprint-preview

— Neil Monroe

208

您可以使用“在浏览器中查看print CSS”一文中接受的Chrome Media Type Emulation。

更新21/11/2017

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

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

更新2016/02/29

DevTools文档已移动，并且上面的链接提供了不正确的信息。可以在以下位置找到有关媒体类型仿真的更新文档：更多媒体类型的预览样式。

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

更新12/04/2016

不幸的是，看来文档在打印仿真方面尚未更新。但是，打印介质仿真器已移动（再次）：

打开Chrome DevTools
敲击esc键盘
单击⋮（垂直省略号）
选择渲染
勾选模拟打印介质

请参见下面的屏幕截图：

更新28/06/2016

适用于Chrome> 51的Chrome开发者工具周围的Google Developers文档和“模拟媒体”选项已更新：

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

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

更新24/05/2016

设置的命名再次更改：

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

— 帕特里克·阿芬格特
source

2

@SupaIrish是的，对于Firefox，请参见Szymon的答案。

— djule5

该文档已完全过时，并且“更多替代”区域内的任何地方都没有模拟CSS媒体。去哪了

— TetraDev '16

2

它位于“控制台（esc）”下，然后是“ 3个垂直点”，然后是“渲染”，然后是“模拟打印介质”，位于底部-为什么隐藏起来我不知道。

— TetraDev '16

在osx上，选择此选项似乎没有任何作用？

— v3nt

165

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

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

— 西蒙·维塔瓦（SzymonŚwitała）
source

3

我注意到，这可能无法反映出与打印预览中所提供的视图相同的视图-特别是在涉及额外的空白时-确保在完成此子步骤之后，您的打印预览不会有所不同。

— jave.web

15

可悲的是，GLCI从版本62的firefox中删除。

— 1998年

4

如何在没有GLCI（shift + F12）的情况下启用此功能？

— StR

3

@StR您现在可以以另一种方式在Firefox中模拟打印样式：stackoverflow.com/questions/47877112/…–

— TylerH

2

我刚刚测试了@TylerH在Firefox v68中所说的内容，并且可以正常工作。

— StR

22

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

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

另外，要减少在Firefox中进入PrintPreview的步骤，请尝试使用PrintPreview扩展名，它将创建一个工具栏按钮。

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

— 慢生活
source

12

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

在Chrome浏览器中，control+p可立即打印预览。（只需将鼠标移至菜单栏即可）。那很容易。

— 浮士德
source

Chrome浏览器绝对不遵循打印介质仿真中显示的内容。我发现，如果您没有在2毫秒内运行chrome媒体查询预打印功能，它将无法绘制更改。

— cchamberlain

1

打印预览的问题是它不允许元素检查，因此调试填充和边距等内容非常困难。尝试调试包装盒问题时，最好单独查看这些元素。

— Seiyria '19

6

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

— 狮子座
source

5

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

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

¹：如果有它们，根据您所测试的媒体，对它们进行注释/取消注释可能并不重要

— 安德烈亚斯·迪特里希（Andreas Dietrich）
source

3

如另一篇文章所述（在打印预览模式下使用Chrome的Element Inspector？），您可以使用chrome来模拟打印样式表。这很棒，因为您可以使用检查器查看样式的来源，而不用猜测何时出现打印对话框。

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

太棒了！

— 慈善机构
source

2

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

不幸的是，由于它本质上是嵌入式PDF，因此似乎并未大量使用开发人员工具。

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

— f
source

0

您可以尝试暂时删除常规样式表，而仅将带有常规链接标签的样式表加载到印刷版中。

— 安德鲁
source

0

在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进行访问：在Chrome 62中打印

— Mojo Techno
source