调试打印样式表的建议？答案

【问题标题】：Suggestions for debugging print stylesheets?调试打印样式表的建议？
【发布时间】：2011-01-28 00:07:24
【问题描述】：

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

更改代码
命令选项卡
重新加载

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

更改代码
命令选项卡
重新加载
打印
眯着眼睛看打印预览图像
在预览中打开 PDF 以供进一步检查

这里有没有我遗漏的工具？ WebKit 的检查器是否有“假装这是分页媒体”复选框？ Firebug (shdder) 有什么魔力吗？

【问题讨论】：

支持它的浏览器（例如Firefox）的“打印预览”功能怎么样？我已经（大部分准确地）调试了一些网页以进行打印。
How do you debug printable CSS? 的可能重复项
在Firefox中，用Shift+F2打开“开发者工具栏”，输入“media emulate print”（或“emu”+Tab+“print”），回车。
相关：stackoverflow.com/questions/9540990/…，stackoverflow.com/questions/726825/…
@MarcelloNuccio 这应该是一个答案。 stackoverflow.com/a/28873496/1696030 得到了相当多的比较赞成票。 “开发者工具栏”有点误导，因为它是一个命令行界面。

标签： css printing firebug google-chrome-devtools web-inspector

【解决方案1】：

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

【讨论】：

除了正常浏览模式没有页面，所以我不知道内容将如何流动。正常浏览模式具有一定数量的像素宽度，而页面具有一定数量的英寸或厘米的宽度。屏幕和打印之间存在与实现无关的基本差异。在这些之间进行调试是我所追求的。
在 chrome 上，仅使用这个建议，渲染就完全不同了。行不通。
“页面”的宽度并不难确定，真正难以确定的是高度。浏览器和打印机都将在 11 英寸头痛中发挥作用。网页是连续长度的。如果没有输出设备类型和浏览器的保证，我认为您不会每次都达到目标。使用 HTML 到 PDF 的方法是可行的，但这超出了您的问题范围。

【解决方案2】：

我假设您希望在不使用 HTML 到 PDF 方法的情况下尽可能多地控制打印窗口...使用@media screen 进行调试 - @media print 用于最终 css

现代浏览器可以使用 @media query 中的 inches 和 pts 让您快速了解打印时会发生什么。

@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/

【讨论】：

只是想评论一下这种方法非常聪明。与使用打印预览功能相比，稍微调整窗口大小以“切换”打印样式要容易得多。虽然有时为了 IE 兼容性等，您仍然必须这样做，但这对于打印样式的初始迭代非常有用。
@查克。谢啦。嘿，我意识到我的演示是离线的，所以我为它创建了一个小提琴。 jsfiddle.net/dNEmT

【解决方案3】：

如果您有一个打印功能，可以将页面内容重写到新窗口并引用您的打印样式表，您将更好地了解它在纸上的外观，并且您将能够也可以用 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();
        });

【讨论】：

这种方法的问题是，如果用户只是在浏览器中选择“打印...”，这个javascript函数将永远不会被调用。
您不需要向用户显示打印功能，如果您愿意，可以简单地使用它进行调试
对于浏览器已经做的事情，这是一个过度设计的解决方案。只需将media="print" 和media="screen" 分别用于您的样式表，然后使用浏览器菜单或组合键来调用打印预览。（在这种情况下，它与打开一个弹出窗口没有什么不同）如果您只是在调试，请将 media="screen" 属性应用于您的打印样式，直到您完成调试。

【解决方案4】：

我使用宏来重复发送按键和鼠标点击。在 Windows 下，AutoHotKey 是一款很棒的软件，在 OS X 下，您可以阅读有关 Automator 的 an alternative AHK for OsX。

在 Windows 下（在 OS X 下用 Cmd 替换 Ctrl）“Ctrl-s / 切换到 Fx 窗口，无论它在打开的窗口列表中的位置 / Ctrl-r”绑定到 1 个未使用的键，避免因无趣任务而受挫，最终将从RSI 中拯救我的手臂 :)

【讨论】：

【解决方案5】：

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

使用 Firefox + Web Developer 扩展。
在 Web Developer 菜单中，选择 CSS / 按媒体类型显示 CSS / 打印
返回 Web Developer 菜单，选择 Options / Persist Features

现在您正在查看打印 CSS，您可以无限期地重新加载您的页面。完成后，取消选中“Persist Features”并重新加载，您将再次获得屏幕 CSS。

HTH。

【讨论】：

渲染与打印预览大不相同。也许这是我的 CSS 中的一个怪癖。无论如何，它不能解决问题。不过谢谢。
是的，对我来说也完全不同。我关注了这个 jsfiddle (jsfiddle.net/2wk6Q/3) 并打印预览显示带有红色边距的页面，但这完全不同。
我必须说这种“解决方法”最适合我。也许我很幸运，这就是为什么本机打印屏幕和 Web 开发人员打印屏幕之间只有很小的差异，但它肯定帮助我找出了为什么会出现差距以及最重要的是什么——我可以用 firebug 浏览代码，看看发生了什么上

【解决方案6】：

在 DreamWeaver 中，有一个工具栏，几乎可以显示您想要的任何渲染选项：屏幕、打印、手持媒体、投影屏幕、电视媒体、指定时间样式表等。这是我特别使用的，因为它：只需按一下按钮即可立即显示预览。

【讨论】：

很高兴知道，但它需要使用与我们开发的不同的渲染引擎，并且仍然需要重新加载。不过谢谢。
早在 2011 年，它就已经是专有的、仅限购买的软件，只能在有限的平台上使用，您需要付费才能获得调试开放网络所需的功能。

【解决方案7】：

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

打开 DevTools 检查器（mac：Cmd + Shift + C，windows：Ctrl + Shift + C)
单击位于 DevTools 面板左上角的 切换设备模式 图标。（windows：Ctrl+Shift+M，mac：Cmd+Shift+ M）。
点击浏览器视口右上角的More overrides图标打开devtools抽屉。
然后，在仿真抽屉中选择 Media，并选中 CSS media 复选框。

这应该可以解决问题。

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

来源：Google DevTools page*

【讨论】：

谢谢，这就是我要找的东西，找不到它：/ 虽然快捷方式不再起作用。我只是在右下角做F12 +齿轮图标，然后设置在Overrides选项卡下，
不幸的是它不是 100% 准确:(
在 Chrome 32.0.1700.14 beta-m Aura 中，缺少“模拟 CSS 媒体 [打印]” :(
这个答案需要更正。从 Chrome 48 开始，打印样式表模拟器不再位于“Emulation”下，而是位于“Rendering”下。
检查器中的三点菜单（右侧）> 更多工具> 渲染设置> 模拟媒体> 打印

【解决方案8】：

根据 rflnogueira 的回答，当前的 Chrome 设置 (40.0.*) 将如下所示：

【讨论】：

我花了一点时间来识别“媒体”标签。我一直在“设备”标签中寻找它。

【解决方案9】：

在 Chrome v41 中，它就在那里，但位置略有不同。

【讨论】：

在 v53 中，它位于“渲染”选项卡上，在底部有一个“模拟媒体”复选框，它将启用一个下拉菜单，您可以选择“打印”，类似于提供的屏幕截图

【解决方案10】：

Chrome 48您可以在渲染标签中调试打印样式。

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

编辑
对于 Chrome 58，位置已更改为 Web Inspector > Menu > More Tools > Rendering

【讨论】：

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

【解决方案11】：

Chrome 的用户界面再次与 v53 不同。

我不需要经常使用此功能，但每当我使用此功能时，我都需要花很长时间才能弄清楚 Chrome 团队自上次尝试追踪它以来将其移至何处。

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

现在在“渲染”部分向下滚动。它通常在首屏。

【讨论】：

你节省了我几天的 print.css 调试时间。你太棒了！

【解决方案12】：

2019 - 更新说明

打开 Chrome 检查器
- 来自 Mac => option + command + i
- 来自 Windows => F12
点击三个小点，customize and control devTools
选择More Tools
选择Rendering
滚动到底部Emulate CSS Media
从向下箭头中选择print

【讨论】：

【解决方案13】：

在 Firefox (87.0) 中，“DOM 和样式检查器”有一个用于打印媒体模拟的切换按钮。

一个缺点是它没有清楚地描绘页面边界。

【讨论】：