如何使用在线工具测试浏览器的打印输出？

Question

我使用(照例)@media print规则来指定网页的打印应该如何与在线版本不同.这很有效,但测试真的很难.我通常要做的是以下步骤:

1. 为screen和创建不同的样式print.
2. 在屏幕模式下启动页面
3. 将页面打印到PDF打印机.
4. 看看结果.
5. 尝试找出行为错误的规则.

我想做什么(但无法使用任何浏览器):

1. 为screen和创建不同的样式print.
2. 在屏幕模式下启动页面
3. 进入预览打印模式(例如Opera,Firefox可用)
4. 使用Firebug(Firefox)或Dragonfly(Opera)等可用工具检查DOM和当前样式.
5. 动态更改CSS,重新加载页面,再次查看结果和DOM.

是否有任何浏览器或浏览器,插件和流程组合可以获得类似的结果？如果您有如何更改文件组织的想法,只需进行最少的更改即可获得所需结果,欢迎您.

Answer 1

Chrome开发者工具具有此功能.

1. 打开要测试的页面的Chrome开发者工具.
2. 如果尚未打开抽屉,请打开抽屉.(按Esc.)
3. 打开" 仿真"选项卡.
4. 单击左侧菜单中的" 媒体 ".
5. 检查CSS媒体并从选择框中选择打印

资料来源:https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types

Answer 2

名为"Web Developer"的Firefox插件(https://addons.mozilla.org/en-US/firefox/addon/web-developer/)有一个"按媒体类型显示CSS"选项.