调试打印样式表的建议？

Posted 2023-02-14

技术标签:

【中文标题】调试打印样式表的建议？【英文标题】：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”），回车。相关：***.com/questions/9540990/…，***.com/questions/726825/… @MarcelloNuccio 这应该是一个答案。 ***.com/a/28873496/1696030 得到了相当多的比较赞成票。 “开发者工具栏”有点误导，因为它是一个命令行界面。 【参考方案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 的检查器中有一个选项。

Cmd

Shift

C

Ctrl

Shift

C

切换设备模式

Ctrl

Shift

M

Cmd

Shift

M

More overrides

然后，在仿真抽屉中选择 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 - 更新说明

Mac

option

command

i

Windows

F12

点击三个小点，customize and control devTools

选择More Tools

选择Rendering

滚动到底部Emulate CSS Media

从向下箭头中选择print

【讨论】：

【参考方案13】：

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

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

【讨论】：

以上是关于调试打印样式表的建议？的主要内容，如果未能解决你的问题，请参考以下文章

xsl 在带有样式表的 Multiple 的 xml 文档上创建

样式表的基本概念和属性

css中给指定元素设置样式表的问题

样式表的样式

带有默认样式表的动态内联样式 React Native

带有外部样式表的div？