调试打印样式表的建议?

245

我最近在为一个网站设计打印样式表时发现,我缺乏有效的方法来进行调整。对于屏幕布局,有一个重新加载周期:

  • 修改代码
  • 按command-tab键
  • 重新加载页面

但是当你尝试打印时,整个过程变得更加艰难:

  • 修改代码
  • 按command-tab键
  • 重新加载页面
  • 打印页面
  • 在打印预览图像中眯眼查看
  • 打开PDF文件进行进一步检查

我错过了什么工具吗?WebKit的检查器有一个“假装这是分页媒体”的复选框吗?Firebug(打颤)能做些什么奇怪的事情吗?


4
浏览器中是否支持“打印预览”功能(例如 Firefox)?我用它(基本准确地)调试了一些网页以进行打印。 - Halil Özgür
2
可能是如何调试可打印的CSS?的重复问题。 - outis
3
在Firefox浏览器中,按下Shift+F2打开“开发者工具栏”,输入"media emulate print"(或"emu" + Tab + "print"),然后按 Enter 键即可。 - Marcello Nuccio
相关:https://dev59.com/jWkw5IYBdhLWcg3w8fFJ在打印预览模式下使用Chrome的元素检查器/,https://dev59.com/r3RB5IYBdhLWcg3wFz4g如何调试可打印的CSS - user719662
@MarcelloNuccio 这应该是一个答案。https://dev59.com/tWkw5IYBdhLWcg3w_Pbn#28873496 有相当多的正面评价可供比较。“Developer Toolbar”有点误导,因为它实际上是一个命令行界面。 - Volker E.
@MarcelloNuccio的回答对我很有用,因为我正在寻找Firefox的答案(!),但原始问题是针对Webkit/Chrome的,所以这里不符合条件... - anarcat
13个回答

0
在Firefox(87.0)中,“DOM和样式检查器”有一个切换按钮,用于打印媒体模拟。

enter image description here

一个缺点是它没有清晰地划分页面边界。

-1

enter image description here

在DreamWeaver中,有一个工具栏可以显示几乎任何渲染选项:屏幕、打印、手持媒体、投影屏幕、电视媒体、设计时间样式表等等。这是我特别使用的原因之一,因为它:只需按下一个按钮即可立即显示预览。

1
了解这点很好,但它需要使用不同于我们开发的渲染引擎,并且仍然需要更多操作而不仅仅是重新加载。谢谢。 - heartpunk
1
早在2011年,这个软件就是专有的、只能购买的,并且只能在有限的平台上运行,你需要付费才能获得所需的功能来调试开放网络。 - Volker E.

-7

我使用宏来重复发送按键和鼠标点击。

在Windows下,AutoHotKey是一个很棒的软件,在OS X下,你可以了解一下Automator,它是OsX的替代AHK

在Windows下(在OS X下将Ctrl替换为Cmd),“Ctrl-s / 切换到Fx窗口,无论它在打开的窗口列表中的位置如何 / Ctrl-r”绑定到一个未使用的键,避免了无聊任务带来的挫败感,最终也会拯救我的手臂免受RSI的困扰 :)


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接