更快的方法来开发和测试打印样式表(避免每次打印预览) ？

我现在的流程是这样的:

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

第三步让我很困扰，我想知道是否有可能用一个插件或者其他什么东西把它从这个过程中删除。只需选择将页面视为打印媒体，然后刷新即可查看更改。

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

105279 次浏览
小开

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

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

另外，要减少在 Firefox 中访问 PrintPreview 的步骤，可以尝试使用 PrintPreview 扩展，它将创建一个工具栏按钮。

对于 Chrome，有一个 那个扩建部分的港口。根据我对 Chrome 版本的了解，你可以选择“显示打印样式”

小开

您可以简单地禁用您的屏幕样式，并在测试时将您的媒体类型更改为“屏幕”您的打印样式表。这与使用真正的打印预览(页面分割、文档宽度等)不完全一样，但它仍然给你一个相当好的想法。

小开

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

小开

我不会使用任何不涉及打印预览的测试方法。这里有太多的不同: 背景图片在印刷品中根本不起作用，但在正常的屏幕环境中显示出来是其中最主要的。

在 Chrome 中，control+p可以立即打印预览。(只要忘记鼠标移动到菜单栏)这很简单。

小开
最佳答案

您可以使用 铬合金 媒体类型仿真作为接受后 在浏览器中查看 printcss。

更新日期21/11/2017

更新的 DevTools 文档可以在这里找到: 在打印模式下查看页面。

在打印模式下查看页面:
1. 打开 命令菜单(博士 Cmd + Shift + P(Mac)或 Ctrl + Shift + P(Windows，Linux))
2. 开始键入 渲染并选择 Show Rendering。
3. 在 模拟 CSS 媒体下拉列表中，选择 打印。

更新日期29/02/2016

DevTools 文档已经移动，上面的链接提供了不准确的信息。关于媒体类型模拟的更新文档可以在这里找到: 更多媒体类型的预览样式。

通过单击浏览器视图右上角的 更多的覆盖 & bull; & bull; & bull; & bull; more 覆盖图标打开 DevTools 模拟抽屉。然后，在仿真抽屉中选择 媒体。

更新日期: 2016年4月12日

不幸的是，似乎文档没有更新有关打印仿真。但是，打印媒体仿真程序(再次)移动了:

  1. 打开 Chrome DevTools
  2. 在键盘上按 翻译键
  3. 单击 Something(垂直省略号)
  4. 选择 渲染
  5. 勾 模拟印刷媒体

见下面的截图:

rendering settings 12/04/2016

更新日期28/06/2016

谷歌开发者围绕 Chrome DevTools 的文档和“模拟媒体”选项已经针对 Chrome > 51进行了更新:

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

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

rendering settings 28/06/2016

更新日期24/05/2016

设置的命名再次改变:

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

emulate CSS media

小开

如另一篇文章(在打印预览模式下使用 Chrome 的元素检查器？)所述，您可以使用 chrome 来简单地模拟打印样式表。这是伟大的，因为您可以使用检查器查看样式来自哪里，而不是猜测当您看到打印对话框出现。

通过点击 Chrome 元素检查器右下角的齿轮图标来访问重写设置对话框。然后选择 print 作为目标媒体类型。

太棒了！

小开

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

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

顺便说一下，有一些方法可以消除步骤2。

小开

简单对我来说 (没有 @screen部分或类似的 1) 和 FF 一起:

  • 把 在您的 CSS 内容结束的 @media print { ...部分
  • Out- 注释 只有包装器声明 < strong > /*@media print {*/ ... /*}*/
    • 因此，应用打印材料到您的样式立即覆盖他们在适用的地方
  • (我使用的是 译自: 美国《科学》杂志网站(http://LiveReload.com)原文地址: http://LiveReload.com 原文地址: http://LiveReload.com 原文地址: http://LiveReload.com，因此我的 浏览器页面保存后立即刷新发生了变化)
  • (否则，如果不使用 LiveRelload:)按 CTRL+R重新加载页面
  • 现在你已经可以做很多典型的打印 CSS 调整(字体样式，字体大小，间距，颜色) ，其中一个还不需要打印预览
  • 按 ALT+F+V打开打印预览和 ALT+W再次关闭它

1 : 如果有的话，根据你测试过的媒体的不同，发表-/in-comments 也许没什么大不了的

小开

在 Firefox 中，可以键入 Shift+F2打开一个 Developer Toolbar 命令行，然后键入 media emulate print

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

小开

在 Chrome 62中，cmd-R/cmd-P 在 Mac 上运行良好，提供了@media print 样式页面的预览。

这可以通过浏览器窗口本身(不是开发人员工具)/打印右上角的垂直省略号来访问..。

使用 esc 取消预览窗口。

因此，对于我在 IntelliJ IDEA 和 Chrome 上的工作流程，它是: Cmd-s，cmd-tab，cmd-r，cmd-p，esc，cmd-tab 我又回到 IDE 了。

Windows10中的 Chrome62在同一位置有相同的 Print... 菜单，可以通过 ctrl-p 访问: print in Chrome 62


提交答案