调试打印样式表的建议？

Question

我最近在为一个网站设计打印样式表时发现，我缺乏有效的方法来进行调整。对于屏幕布局，有一个重新加载周期：

• 修改代码
• 按command-tab键
• 重新加载页面

但是当你尝试打印时，整个过程变得更加艰难：

• 修改代码
• 按command-tab键
• 重新加载页面
• 打印页面
• 在打印预览图像中眯眼查看
• 打开PDF文件进行进一步检查

我错过了什么工具吗？WebKit的检查器有一个“假装这是分页媒体”的复选框吗？Firebug（打颤）能做些什么奇怪的事情吗？

- Jim Puls

---

浏览器中是否支持“打印预览”功能（例如 Firefox）？我用它（基本准确地）调试了一些网页以进行打印。 - Halil Özgür

可能是如何调试可打印的CSS？的重复问题。 - outis

在Firefox浏览器中，按下Shift+F2打开“开发者工具栏”，输入"media emulate print"（或"emu" + Tab + "print"），然后按 Enter 键即可。 - Marcello Nuccio

相关：https://dev59.com/jWkw5IYBdhLWcg3w8fFJ在打印预览模式下使用Chrome的元素检查器/，https://dev59.com/r3RB5IYBdhLWcg3wFz4g如何调试可打印的CSS - user719662

@MarcelloNuccio 这应该是一个答案。https://dev59.com/tWkw5IYBdhLWcg3w_Pbn#28873496 有相当多的正面评价可供比较。“Developer Toolbar”有点误导，因为它实际上是一个命令行界面。 - Volker E.

@MarcelloNuccio的回答对我很有用，因为我正在寻找Firefox的答案(!)，但原始问题是针对Webkit/Chrome的，所以这里不符合条件... - anarcat

Answer 1

在Chrome的检查器中有一个选项可以实现这个功能。

1. 打开DevTools检查器（Mac:Cmd + Shift + C ，Windows：Ctrl + Shift + C）
2. 单击位于DevTools面板左上角的切换设备模式图标（Windows：Ctrl+Shift+M，Mac：Cmd+Shift+M）。
3. 单击浏览器视口右上角的更多覆盖图标，以打开devtools抽屉。

4. 然后，在仿真抽屉中选择媒体，并勾选CSS媒体复选框。

   

这应该就可以了。

更新：DevTools的菜单已更改。 现在可以通过点击位于右上角的“三个点”菜单 > 更多工具 > 渲染设置 > 模拟媒体 > 打印来找到它。

来源：Google DevTools页面*

- Rafael Nogueira

---

谢谢，这正是我所寻找的，之前没找到 :/ 不过快捷键不再有效。我只需按下 F12 键，再点击右下角的齿轮图标，然后在 Overrides 标签下即可找到设置项。 - Aurelien

很遗憾，它并不是100%准确的 :( - maazza

在Chrome 32.0.1700.14 beta-m Aura中，“Emulate CSS media [print]”选项已经消失 :( - gen_Eric

需要纠正这个答案。从Chrome 48开始，打印样式表模拟器不再在“仿真”下，而是在“渲染”下。 - chharvey

检查器中的三个点菜单（位于右侧）> 更多工具 > 渲染设置 > 模拟媒体 > 打印 - allicarn

Answer 2

我假设您希望尽可能地控制打印窗口，而不使用HTML转PDF的方法...使用@media screen进行调试-@media print用于最终的CSS。

现代浏览器可以使用英寸和点作为@media查询中的单位，快速预览打印时会发生什么。

@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激光打印布局。

W3C参考资料：http://www.w3.org/TR/css3-mediaqueries/

- Dawson

---

只是想评论一下，这种方法相当聪明。稍微调整窗口大小以“切换”打印样式比使用打印预览功能要容易得多。虽然有时仍然需要为了IE兼容性等问题而这样做，但对于打印样式的初始迭代来说，这非常棒。 - chucknelson

@Chuck。谢谢，伙计。嘿，我意识到我的演示不在线，所以我为它创建了一个fiddle。http://jsfiddle.net/dNEmT/ - Dawson

Answer 3

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

点击检查器右上方的菜单图标和渲染设置。

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

- minlare

---

Chrome 49: F12（开发者工具）-> ESC（控制台）-> 渲染 -> 模拟打印媒体 - user1477388

Answer 4

在Chrome v41版本中，它存在，但位置略有不同。

- johntrepreneur

---

在版本53中，这个选项已经移动到了“渲染”标签页，并出现在底部。勾选“模拟介质”后，你会看到一个下拉框，可以选择“打印”等选项，与提供的截图类似。请注意，我的翻译可能不够精确，但我已尽力保持原意并使用通俗易懂的语言。 - James Gray

Answer 5

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

• 使用 Firefox + Web Developer 扩展程序。
• 在 Web Developer 菜单中，选择 CSS / 按媒体类型显示 CSS / 打印。
• 返回 Web Developer 菜单，选择“选项”/“保持特性”。

现在您正在查看打印 CSS，并且可以无限制地重新加载页面。 完成后，取消选中“保持特性”，重新加载，您将再次获得屏幕 CSS。

希望对您有所帮助。

- Capsule

---

打印预览和实际打印的效果有明显不同，可能是我的CSS有些问题，但无论如何，这并没有解决问题。谢谢你的帮助。 - heartpunk

是的，对我来说也完全不同。我按照这个 jsfiddle（http://jsfiddle.net/2wk6Q/3/）的示例进行操作，打印预览显示的页面有红色边距，但实际情况完全不同。 - duality_

我必须说，这个“变通方法”对我来说效果最好。也许我很幸运，这就是为什么本地打印屏幕和Web开发人员打印屏幕之间只有很小的差异，但它确实帮助我找出了为什么会出现间隙的原因，而且最重要的是 - 我可以使用Firebug查看代码并了解正在发生什么。 - Erik Čerpnjak

Answer 6

Chrome在版本53中的用户界面又有所不同。

我并不经常使用这个功能，但每当我需要使用它时，就需要花费很长时间来找出自上次我尝试查找它以来Chrome团队将其移到哪里了。

请注意，这是“开发工具窗格”中的“......”菜单，而不是Chrome浏览器窗格中的菜单。

现在在“渲染”部分向下滚动，通常它位于屏幕下方。

- TrophyGeek

---

你刚刚帮我省下了好几天的print.css调试时间，你太棒了！ - zazvorniki

Answer 7

以下是与rflnogueira的答案相关的内容，当前Chrome设置（40.0.*）如下所示：

- Anil Vangari

---

我花了一点时间才找到“媒体”选项卡。我一直在“设备”选项卡中寻找它。 - Lorin Rivers

Answer 8

在调试时，只需将打印样式表使用media="screen"在浏览器中显示即可。打印预览视图使用与正常浏览模式相同的渲染引擎，因此您可以使用它来获得准确的结果。

- Tatu Ulmanen

---

除了正常的浏览模式没有页面，所以我不知道内容会如何流动。正常浏览模式的宽度是一定数量的像素，而页面的宽度是一定数量的英寸或厘米。屏幕和打印之间存在根本的实现无关差异。我要解决的问题是在这些之间进行调试。 - Jim Puls

在 Chrome 上仅使用此建议呈现效果会大不相同。这样做行不通。 - heartpunk

“页面”宽度并不难确定，而高度才是真正困难的。浏览器和打印机都会在11英寸的头痛中发挥作用。网页是连续长度的。如果没有输出设备类型和浏览器的保证，我认为你永远无法每次都准确地命中它。使用HTML到PDF的方法可以解决问题，但这超出了你提问的范围。 - Dawson

Answer 9

2019 - 更新的指令

1. 打开Chrome检查器
   • 从Mac => option + command + i
   • 从Windows => F12

2. 点击小三点，自定义和控制开发者工具

3. 选择更多工具

4. 选择渲染

5. 向下滚动到模拟CSS媒体

6. 从下拉菜单中选择打印

- Jonathan Sanchez

Answer 10

如果你有一个打印函数，它将页面的内容重写到一个新窗口，并引用你的打印样式表，那么你将更好地了解它在纸上的效果，并且还可以使用firebug之类的工具进行调试。

下面是使用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();
        });

- Blowsie

---

这种方法的问题在于，如果用户只是在浏览器中选择“打印...”选项，那么这个JavaScript函数将永远不会被调用。 - Ken Liu

你不需要向用户显示print函数，如果需要，你可以简单地将其用于调试目的。 - Blowsie

这是对浏览器已经实现的某些东西过度设计的解决方案。只需为您的样式表分别使用 media="print" 和 media="screen"，然后使用浏览器菜单或键组合来调用打印预览即可（在这种情况下，与打开弹出窗口没有区别）。如果您只是在调试，请将 media="screen" 属性应用于您的打印样式，直到完成调试为止。 - ORyan