开发和testing打印样式表的更快捷方式(避免每次打印预览)?

这是我现在的过程:

  1. 保存对print.css的更改
  2. 打开浏览器并刷新页面。
  3. 右键单击并select打印>打印预览(Firefox,但真的任何浏览器)

这是错误的第三步,我想知道是否有可能通过插件或其他东西把它从stream程中删除。 只需select查看页面作为打印介质,然后只需刷新即可查看更改。

你如何testing你的打印样式表? 刷新后,你是否总是点击打印预览?

您可以使用Chrome浏览器 types仿真 , 请参阅浏览器中的浏览打印CSS 。

更新29/02/2016

DevTools文档已经移动,上面的链接提供了不准确的信息。 有关媒体types仿真的更新文档可以在这里find: 预览更多媒体types的样式 。

通过单击浏览器视口右上angular的更多覆盖•••更多覆盖图标,打开DevTools仿真抽屉。 然后,在仿真抽屉中select媒体

更新12/04/2016

不幸的是,似乎文档在打印仿真方面还没有更新。 但是,打印介质模拟器已经移动(再次):

  1. 打开Chrome DevTools
  2. 在键盘上按esc
  3. 点击 (垂直省略号)
  4. select渲染
  5. 勾选仿真打印介质

看下面的截图:

渲染设置12/04/2016

更新28/06/2016

有关Chrome开发者工具的Google开发人员文档DevTools和“仿真媒体”选项已针对Chrome> 51进行了更新:

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

要以打印预览模式查看页面,请打开DevTools主菜单,select更多工具 > 渲染设置 ,然后启用仿真媒体checkbox,并将下拉菜单设置为打印

渲染设置28/06/2016

更新24/05/2016

设置的命名已经改变了一次:

要以打印预览模式查看页面,请打开DevTools主菜单,select更多工具 > 渲染 ,然后启用仿真CSS Mediacheckbox,并将下拉菜单设置为打印

模拟CSS媒体

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

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

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

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

另外,为了减less在Firefox中访问PrintPreview的步骤,请尝试PrintPreview扩展 ,它将创build一个工具栏button。

对于Chrome,有一个扩展端口 。 从我可以告诉Chrome版本,你可以select“显示打印样式”

我不会使用任何不涉及打印预览的testing方法。 有太多的不同之处:背景图像在打印时根本不起作用,但在正常的屏幕背景下显示是主要的。

在Chrome中, control+p会立即打印预览。 (只要忘记将鼠标移动到您的菜单栏)。 这很容易。

您可以简单地禁用屏幕样式,并在testing时将您的媒体types更改为您的打印样式表的“屏幕”。 这不会像使用真正的打印预览(分页符,文档宽度等)完全相同,但它仍然给你一个不错的主意。

对我来说简单 (没有@screen部分或类似的1与FF

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

1 :如果有的话,根据你的testing媒体,在/评论这些,否则可能不是什么大不了的事情

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

通过点击Chrome元素检查器右下angular的齿轮图标访问“覆盖设置”对话框。 然后select打印作为目标媒体types。

真棒!

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

不幸的是,它似乎并不像开发工具很多,因为它本质上是一个embedded式PDF。

顺便说一句,有一些方法可以消除第二步。一个stream行的是LiveReload。

您可以尝试暂时删除您的常规样式表,并只使用普通链接标签加载打印样式表。