调试打印样式表的建议? [英] Suggestions for debugging print stylesheets?

问题描述

我最近一直在为一个网站设计一个打印样式表，我意识到我对调整它的有效方法感到茫然.有一个重新加载周期来处理屏幕布局是一回事:

I've recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It's one thing to have a reload cycle for working on the on-screen layout:

• 更改代码
• 命令标签
• 重新加载

但是当您尝试打印时，整个过程会变得更加艰巨:

but that whole process gets much more arduous when you're trying to print:

• 更改代码
• 命令标签
• 重新加载
• 打印
• 眯着眼睛看打印预览图片
• 在预览中打开 PDF 以供进一步检查

这里有我遗漏的工具吗?WebKit 的检查员是否有假装这是分页媒体"复选框?Firebug (不寒而栗) 有什么魔法吗?

Are there tools I'm missing out on here? Does WebKit's inspector have a "pretend this is paged media" checkbox? Is there some magic that Firebug (shudder) can do?

推荐答案

Chrome 的检查器中有一个选项.

There is an option for that in Chrome's inspector.

1. 打开 DevTools 检查器(mac:Cmd + Shift + C，windows:Ctrl + Shift + C)
2. 点击切换设备模式图标 ，位于DevTools 面板的左上角.(windows:Ctrl+Shift+M，mac:Cmd+Shift+M).
3. 点击右上角的更多覆盖 图标用于打开 devtools 抽屉的浏览器视口.

4. 然后，在仿真抽屉中选择 Media，并选中 CSS media 复选框.

1. Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
2. Click on the Toggle device mode icon , located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
3. Click on the More overrides icon in the top right corner of the browser viewport to open the devtools drawer.

4. Then, select Media in the emulation drawer, and check the CSS media checkbox.

这应该可以解决问题.

更新:DevTools 中的菜单已更改.现在可以通过点击右上角的三点"菜单 > 更多工具 > 渲染设置 > 模拟媒体 > 打印来找到它.

Update: The menus have changed in DevTools. It can now be found by clicking on the "three-dots" menu in the top right corner > More Tools > Rendering Settings > Emulate media > print.

来源:Google DevTools 页面*

这篇关于调试打印样式表的建议?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！