调试打印样式表的建议？
[英]Suggestions for debugging print stylesheets?
问题描述
我最近一直在为一个网站设计一个打印样式表，我意识到我对调整它的有效方法感到茫然。 有一个重新加载周期来处理屏幕布局是一回事：
- 更改代码
- 命令选项卡
- 重新加载
但是当您尝试打印时，整个过程会变得更加艰巨：
- 更改代码
- 命令选项卡
- 重新加载
- 打印
- 斜视打印预览图像
- 在预览中打开 PDF 以进行进一步检查
这里有我遗漏的工具吗？ WebKit 的检查员是否有“假装这是分页媒体”复选框？ Firebug（不寒而栗）有什么魔法可以做吗？
13 个解决方案
解决方案1
329 2013-01-18 13:55:39
Chrome 的检查器中有一个选项。
- 打开 DevTools 检查器（mac： Cmd + Shift + C ，windows： Ctrl + Shift + C ）
- 单击切换设备模式图标
，位于 DevTools 面板的左上角。 （Windows： Ctrl + Shift + M ，Mac： Cmd + Shift + M ）。
- 单击更多覆盖
浏览器视口右上角的图标以打开 devtools 抽屉。
然后，在仿真抽屉中选择Media ，并选中CSS media复选框。
这应该可以解决问题。
更新：DevTools 中的菜单已更改。 现在可以通过单击右上角的“三点”菜单 > 更多工具 > 渲染设置 > 模拟媒体 > 打印来找到它。
来源： Google DevTools 页面*
解决方案2
75 2011-02-23 05:04:15
我假设您希望在不使用 HTML 转 PDF 方法的情况下尽可能多地控制打印窗口...使用 @media 屏幕进行调试 - @media 打印最终 css
现代浏览器可以在@media query使用英寸和磅数，让您快速了解打印时会发生什么。
@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
html { width:8.5in; }
body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
...
}
一旦您的浏览器显示“英寸”，您就会更好地了解会发生什么。 这种方法应该几乎结束打印预览方法。 所有打印机将与pt和in单位，并使用@media技术将允许您快速看看有什么事情发生，并进行相应的调整。 Firebug（或等效的）绝对会加快这个过程。 将更改添加到@media 后，您就拥有了使用media = "print"属性链接 CSS 文件所需的所有代码 - 只需将 @media 屏幕规则复制/粘贴到引用文件即可。
祝你好运。 网络不是为印刷而构建的。 创建一个解决方案来提供您的所有内容，样式与浏览器中看到的一样，有时是不可能的。 例如，对于主要为 1280 x 1024 的观众来说，流畅的布局并不总是很容易转化为漂亮整洁的 8.5 x 11 激光打印。
purusal 的 W3C 参考： http : //www.w3.org/TR/css3-mediaqueries/
解决方案3
21 2016-02-03 17:04:54
Chrome 48您可以在“渲染”选项卡中调试打印样式。
单击检查器和渲染设置右上角的菜单图标。
编辑
对于Chrome 58 ，位置已更改为Web Inspector > Menu > More Tools > Rendering
解决方案4
19 2015-03-20 21:07:34
在 Chrome v41 中，它就在那里，但在一个稍微不同的地方。
解决方案5
16 2011-02-28 20:46:43
有一种简单的方法可以调试打印样式表，而无需切换 HTML 代码中的任何媒体属性（当然，正如所指出的，它不能解决宽度/页面问题）：
- 使用 Firefox + Web Developer 扩展。
- 在 Web Developer 菜单中，选择 CSS / Display CSS by Media Type / Print
- 返回 Web Developer 菜单，选择 Options / Persist Features
现在您正在查看打印 CSS，并且可以无限期地重新加载页面。 完成后，取消选中“Persist Features”并重新加载，您将再次获得屏幕 CSS。
哈。
解决方案6
13 2017-02-16 21:02:56
从 v53 开始，Chrome 的 UI再次不同。
我不需要经常使用这个功能，但是每当我使用这个功能时，我都需要很长时间才能弄清楚自上次我烧掉周期试图追踪它以来，Chrome 团队将它移到了哪里。
请注意，它是Dev Tools 窗格中的 ... 菜单，而不是Chrome 浏览器窗格中的 ... 菜单。
现在向下滚动渲染部分。 它通常低于折叠。
解决方案7
8 2015-02-12 17:05:32
根据 rflnogueira 的回答，当前的 Chrome 设置 (40.0.*) 将如下所示：
解决方案8
5 2010-03-16 07:44:35
只需在调试时使用media="screen"在浏览器中显示打印样式表。 打印预览视图使用与正常浏览模式相同的渲染引擎，因此您可以使用它获得准确的结果。
解决方案9
4 2019-08-20 17:28:52
2019 - 更新说明
- 打开 Chrome 检查器
- 从Mac =>
option+command+i - 从Windows =>
F12
- 从Mac =>
单击小 3 点，
customize and control devTools选择
More Tools选择
Rendering滚动到底部以
Emulate CSS Media从向下箭头中选择
print
解决方案10
0 2011-02-28 11:32:13
如果您有一个打印功能将页面内容重写到一个新窗口并引用您的打印样式表，您将更好地了解它在纸上的样子，并且您将能够对其进行调试。还有萤火虫之类的。
这是如何使用 JavaScript / jquery 完成此操作的示例
$("#Print").click(function () {
var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
a.document.open("text/html");
a.document.write("<html><head>");
a.document.write('<link rel="stylesheet" href="css/style.css" />');
a.document.write('<link rel="stylesheet" href="css/print.css" />');
a.document.write("</head><body>");
a.document.write($('#Content').html());
a.document.write('</body></html>');
a.document.close();
a.print();
});
解决方案11
0 2021-04-08 16:21:16
在 Firefox (87.0) 中，“DOM 和样式检查器”有一个用于打印媒体模拟的切换按钮。
一个缺点是它没有清楚地描绘页面边界。
解决方案12
-1 2011-03-01 16:41:32
在 DreamWeaver 中有一个工具栏，几乎可以显示您想要的任何渲染选项：屏幕、打印、手持媒体、投影屏幕、电视媒体、时间样式表等。这是我使用的特别是因为它：立即显示带有 1 的预览单按一个按钮。
解决方案13
-7 2011-02-28 19:30:39
我使用宏来重复发送按键和鼠标点击。 在 Windows 下，AutoHotKey 是一个很棒的软件，在 OS X 下，您可以阅读 Automator 类型的OsX 替代 AHK 。
在 Windows 下（在 OS X 下用 Cmd 替换 Ctrl）“Ctrl-s/切换到 Fx 窗口在打开的窗口列表中的任何位置/Ctrl-r”绑定到 1 个未使用的键可避免无趣的任务带来的挫败感，并最终拯救我的手臂来自RSI :)
更快速地开发和测试打印样式表（每次都避免打印预览）？
[英]Faster way to develop and test print stylesheets (avoid print preview every time)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.