debugging打印样式表的build议？
我最近一直在为一个网站打印样式表，而且我意识到，我不知道如何有效地调整它。 有一个重新加载周期来处理屏幕上的布局是一回事：
- 更改代码
- 命令选项卡
- 重装
但是当您尝试打印时，整个过程变得更加艰巨：
- 更改代码
- 命令选项卡
- 重装
- 打印
- 斜视在打印预览图像
- 在预览中打开PDF进行进一步检查
我错过了哪些工具？ WebKit的检查员是否有“假装这是分页媒体”checkbox？ Firebug（ 不寒而栗 ）能做些什么魔法吗？
在Chrome的检查器中有一个选项。
- 打开DevTools检查器（mac： Cmd + Shift + C ，windows： Ctrl + Shift + C ）
- 点击切换设备模式图标
，位于DevTools面板的左上angular。 （windows： Ctrl + Shift + M ，mac： Cmd + Shift + M ）。 - 点击更多覆盖
浏览器视口右上angular的图标打开devtools抽屉。 -
然后，在仿真抽屉中select“ 媒体 ”，然后选中“ CSS媒体”checkbox。
这应该做的伎俩。
更新：DevTools中的菜单已更改。 现在可以通过点击右上angular的“三点”菜单>更多工具>渲染设置>仿真媒体>打印来find它。
来源： Google DevTools页面 *
我假设你想尽可能多地控制打印的窗口，而不使用HTML到PDF的方法…使用@media屏幕debugging – @media print for final 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和单位，使用@media技术可以让您快速查看将要发生的情况并进行相应的调整。 Firebug（或相当的）将绝对加快这一进程。 当您将更改添加到@media时，您可以使用media = "print"属性获取链接CSS文件所需的所有代码 – 只需将@media屏幕规则复制/粘贴到所引用的文件即可。
祝你好运。 networking不是为打印而build的。 创build一个能够提供所有内容的解决scheme，有时在浏览器中看到的风格是不可能的。 例如，一个主要为1280×1024的观众的stream体布局并不总是易于转化为一个漂亮和整齐的8.5×11激光打印。
W3C关于purusal的参考资料： http : //www.w3.org/TR/css3-mediaqueries/
在Chrome v41中，它在那里，但在一个稍微不同的地方。
有一个简单的方法来debugging您的打印样式表，而无需在HTML代码中切换任何媒体属性（当然，正如指出的那样，它不能解决宽度/页面问题）：
- 使用Firefox + Web Developer扩展。
- 在Web Developer菜单中，selectCSS / Display CSS by Media Type / Print
- 返回到Web Developer菜单，selectOptions / Persist Features
现在您正在查看打印CSS，您可以无限期地重新加载您的页面。 完成之后，取消选中“Persist Features”并重新加载，您将再次获得屏幕CSS。
HTH。
Chrome 48可以在“ 渲染”选项卡中debugging打印样式。
点击检查器右上方的菜单图标和渲染设置 。
编辑
对于Chrome 58 ，位置已更改为“ Web检查器”>“菜单”>“更多工具”>“渲染”
继rflnogueira回答之后，当前的Chrome设置（40.0。*）如下所示：
Chrome的用户界面与v53不同。
我不需要经常使用这个function，但是每当我这样做的时候，我总是需要弄清楚自从上次烧毁循环后，Chrome团队已经将其移到了哪里。
现在在渲染部分向下滚动 。 这往往是低于折扣。
只需在debugging时使用media="screen"在浏览器中显示打印样式表。 打印预览视图使用与正常浏览模式相同的渲染引擎，因此您可以使用该模式获得准确的结果。
如果你有一个打印function，将页面的内容重写到一个新的窗口中，并引用了你的打印样式表，你将会更好地理解它在纸上的样子，你就可以debugging它也喜欢萤火虫。
下面是一个如何使用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(); });
在DreamWeaver中有一个工具栏，可以显示您想要的任何渲染选项：屏幕，打印，手持媒体，投影屏幕，电视媒体，devise时间样式表等。这是我特别使用的，因为它： 即时显示1单按一个button。
如何打印重新加载周期的这种变体：
- 更改代码
- 命令选项卡
- 重新加载alt + f，v（在Windows上的Firefox打印预览）
- esc（closures打印预览）
重复几次，然后对Microsoft XPS Document Writer或类似的东西进行真正的打印。
我使用macros来重复发送按键和鼠标点击。 在Windows下，AutoHotKey是一款出色的软件，在OS X下，您可以阅读关于Automatorsorting的替代AHK的OsX 。
在Windows下（用OS X下的CmdreplaceCtrl）“Ctrl-s /切换到Fx窗口，在打开的窗口列表中的任意位置/ Ctrl-r”绑定到1个未使用的密钥，避免了无趣任务的挫折，最终挽救了我的武器来自RSI 🙂
