调试打印样式表的建议？

我最近一直在为一个网站制作一个打印样式表,我意识到我无法通过有效的方式进行调整.使用重新加载周期来处理屏幕布局是一回事:

改变代码

命令选项卡

重装

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

改变代码

命令选项卡

重装

打印

斜视打印预览图像

在预览中打开PDF以进一步检查

我在这里错过了哪些工具？WebKit的检查员是否"假装这是分页媒体"复选框？Firebug(不寒而栗)可以做些什么吗？

1> 小智..：

---

Chrome的检查员可以选择这个选项.

打开DevTools检查器(mac:Cmd+ Shift+ C,windows:Ctrl+ Shift+ C)

单击切换设备模式图标,位于DevTools面板的左上角.(windows:Ctrl+ Shift+ M,mac:Cmd+ Shift+ M).

单击" 更多覆盖" 浏览器视口右上角的图标,用于打开devtools抽屉.

然后,在仿真抽屉中选择" 媒体 ",并选中" CSS媒体"复选框.

这应该可以解决问题.

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

资料来源:Google DevTools页面*

---

不幸的是,它不是100%准确:(

---

检查器中的三点菜单(右侧)>更多工具>渲染设置>模拟介质>打印

---

这个答案需要纠正.从Chrome 48开始,打印样式表模拟器不再处于"仿真"状态,而是处于"渲染"状态下.

---

在Chrome`32.0.1700.14 beta-m Aura`中,"Emulate CSS media [print]"缺失:(

---

谢谢,这就是我所寻找的,找不到它:/快捷方式不再适用了.我只是在右下角做F12 +齿轮图标,然后设置在Overrides选项卡下,

---

我希望我能在这个帖子上发两次.它可能不是100%准确,但它足够准确,可以解决许多奇怪和恼人的问题.

---

对于当前的Chrome(以及您最近编辑的Chrome),步骤2和3都是错误的.这绝对没有**与设备模式有关.只需打开开发工具,打开面板(Esc或从菜单中选择"显示控制台"),然后勾选"模拟打印介质".而已.

---

现在,它隐藏在开发工具控制台部分的三点菜单下.

2> Dawson..：

---

我假设您希望尽可能多地控制打印窗口而不使用HTML到PDF方法...使用@media屏幕进行调试 - @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和in单位一起使用,并且使用@media技术可以让您快速查看将要发生的事情并进行相应的调整.萤火虫(或同等物)绝对会加速这个过程.当您将更改添加到@media时,您已获得使用media = "print"属性链接的CSS文件所需的所有代码- 只需将@media屏幕规则复制/粘贴到引用的文件即可.

祝好运.网络不是为打印而构建的.创建一个提供所有内容的解决方案,风格与浏览器中的内容相同,有时是不可能的.例如,主要为1280 x 1024观众的流畅布局并不总能轻易转换为漂亮而整洁的8.5 x 11激光打印.

W3C参考原文:http://www.w3.org/TR/css3-mediaqueries/

3> minlare..：

---

Chrome 48可以在" 渲染"选项卡中调试打印样式.

单击检查器右上角的菜单图标和" 渲染设置".

编辑
对于 Chrome 58,该位置已更改为 Web Inspector>菜单>更多工具>渲染

---

Chrome 49:*F12*(开发者控制台) - >*ESC*(控制台) - >渲染 - >模拟打印介质

4> johntreprene..：

---

在Chrome v41中,它就在那里,但在一个稍微不同的地方.

---

在v53中,它位于"渲染"选项卡上,在底部有一个Emulate Media复选框,它将启用一个下拉列表,您可以选择"打印输入",类似于提供的屏幕截图

5> Capsule..：

---

有一种简单的方法可以调试打印样式表,而无需在HTML代码中切换任何媒体属性(当然,正如所指出的,它不能解决宽度/页面问题):

使用Firefox + Web Developer扩展.

在Web Developer菜单中,按媒体类型/打印选择CSS /显示CSS

返回Web Developer菜单,选择Options/Persist Features

现在您正在查看打印CSS,您可以无限期地重新加载页面.完成后,取消选中"持久功能"并重新加载,您将再次获得屏幕CSS.

HTH.

---

实质上与打印预览不同.也许这是我的CSS中的一个怪癖.无论如何,它并没有解决问题.谢谢.

6> TrophyGeek..：

---

从v53开始,Chrome的UI 再次不同.

我不需要经常使用此功能,但每当我这样做时,我需要永远弄清楚Chrome团队自上次烧毁周期以来追踪它的位置.

请注意,它是Dev Tools窗格中 的...菜单,而不是 Chrome浏览器窗格中的...菜单.

现在在"渲染"部分向下滚动.它经常低于折叠.

7> Anil Vangari..：

---

根据rflnogueira的回答,目前的Chrome设置(40.0.*)如下所示:

8> Tatu Ulmanen..：

---

只需media="screen"在调试时使用浏览器中的打印样式表即可.打印预览视图使用与普通浏览模式相同的渲染引擎,因此您可以使用该模式获得准确的结果.

---

除了正常的浏览模式没有页面,所以我不知道内容将如何流动.普通浏览模式具有一定数量像素的宽度,而页面具有一定数量的英寸或厘米的宽度.屏幕和打印之间存在基本的与实现无关的差异.这些之间的调试就是我所追求的.