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

Question

这是我现在的流程：

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

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

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

Answer 1

您可以使用帖子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.对于模拟CSS媒体下拉列表，选择打印。

---

更新29/02/2016

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

  

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

更新12/04/2016

不幸的是，似乎文档尚未更新打印仿真。但是，打印介质模拟器已经（再次）移动：

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

见下面的截图：



更新28/06/2016

围绕Chrome DevTools的Google Developers Docs和“Emulate Media”选项已针对Chrome＆gt; 51进行了更新：

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

  

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



更新24/05/2016

设置的命名再次改变：

  

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

Answer 2

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

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

Answer 3

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

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

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

对于Chrome，有一个port of that extension。根据我的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

如其他帖子（Using Chrome's Element Inspector in Print Preview Mode?）中所述，您可以使用chrome简单地模拟打印样式表。这很棒，因为您可以使用检查器查看样式的来源，而不是在您看到打印对话框出现时猜测。

点击Chrome的元素检查器右下角的齿轮图标，访问“覆盖设置”对话框。然后选择print作为目标媒体类型。

真棒！

Answer 8

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

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

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

Answer 9

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