开发和testing打印样式表的更快捷方式(避免每次打印预览)?
这是我现在的过程:
- 保存对print.css的更改
- 打开浏览器并刷新页面。
- 右键单击并select打印>打印预览(Firefox,但真的任何浏览器)
这是错误的第三步,我想知道是否有可能通过插件或其他东西把它从stream程中删除。 只需select查看页面作为打印介质,然后只需刷新即可查看更改。
你如何testing你的打印样式表? 刷新后,你是否总是点击打印预览?
您可以使用Chrome浏览器 types仿真 , 请参阅浏览器中的浏览打印CSS 。
更新29/02/2016
DevTools文档已经移动,上面的链接提供了不准确的信息。 有关媒体types仿真的更新文档可以在这里find: 预览更多媒体types的样式 。
通过单击浏览器视口右上angular的更多覆盖•••更多覆盖图标,打开DevTools仿真抽屉。 然后,在仿真抽屉中select媒体 。
更新12/04/2016
不幸的是,似乎文档在打印仿真方面还没有更新。 但是,打印介质模拟器已经移动(再次):
- 打开Chrome DevTools
- 在键盘上按esc键
- 点击⋮ (垂直省略号)
- select渲染
- 勾选仿真打印介质
看下面的截图:
更新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,并将下拉菜单设置为打印 。
更新24/05/2016
设置的命名已经改变了一次:
要以打印预览模式查看页面,请打开DevTools主菜单,select更多工具 > 渲染 ,然后启用仿真CSS Mediacheckbox,并将下拉菜单设置为打印 。
在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。
您可以尝试暂时删除您的常规样式表,并只使用普通链接标签加载打印样式表。