如何调试可打印的CSS？

Question

如何调试可打印的CSS？

css

79

我经常使用Firebug和IE开发者工具来调试疑难的CSS问题。但是偶尔会遇到一些棘手的bug，只有在打印页面时才会出现。

您使用什么技术/工具来诊断这样的问题？是否有一种方法可以在打印视图中更充分地利用传统的CSS调试工具？

更新：我已经使用PDF打印机以避免浪费纸张；我的问题是我无法右键单击打印的DOM。下面的一些其他答案非常有帮助，谢谢。 :-)

- Dan Fabulich

2

更好的答案在这里：https://dev59.com/b3E95IYBdhLWcg3wHqIV - Mark E. Haase

有关：https://dev59.com/b3E95IYBdhLWcg3wHqIV，https://dev59.com/jWkw5IYBdhLWcg3w8fFJ - user719662

请参考此答案，了解2021年可行的技术：https://dev59.com/r3RB5IYBdhLWcg3wFz4g#58015662 - Puka

10个回答

71

在Chrome 51中：

打开开发者工具（按下CTRL + F12或CTRL + SHIFT + I），点击...菜单，选择更多工具 > 渲染设置以打开开发人员控制台的渲染选项卡（或者如果控制台已经打开，只需导航到该选项卡）。

在该选项卡中，选择并勾选模拟媒体：打印复选框。

- Simon Sarris

1

注意：这不会模拟隐藏背景图像/颜色之类的东西（火狐浏览器的答案可以）。 - Gavin S. Yancey

IE 上有打印模拟器吗？ - Menna Ramadan

23

我使用WebDeveloper插件和CSS -->按媒体类型显示CSS -->打印来查看CSS在打印时的效果。Firebug的检查工具与由插件过滤的CSS一起使用。

- tvanfosson

21

遗憾的是，那种观点与Firefox实际打印的内容几乎没有任何相似之处（在打印时它似乎也使用了仅屏幕样式）。在Firebug编辑样式时，我没有找到比频繁使用打印预览选项更好的选择。 - Tgr

1

实际上，我认为这是因为没有页面的概念...但是至少，您可以查看它而无需预览。 - gamov

3

它似乎只使用打印样式。一个不错的技巧是，不仅设置你特定的媒体类型，还要将所有其他样式表设置为media="all, print"。对我很有用 :-) - Jeroen

9

在 Firefox 69 中，我找到了一个模拟打印媒体的按钮。只需打开开发者工具（F12），然后单击检查器(Inspector)。切换按钮是下面截图中突出显示的区域中最左边的图标，看起来像一张纸。

- mzuther

1

这应该被视为与FireFox相关的答案。 - keepAlive

是的，差点错过了那个小蓝色纸片图标，谢谢。 - IliasT

点击了，但是没有任何反应。 - Andrii Kovalenko

@Andrii，你能详细说明一下吗？ - mzuther

6

我使用Firefox浏览器和开发者工具栏。

我在任务栏中使用实时CSS编辑工具，它非常有用，可以随时修改CSS并实时查看结果。

我还使用轮廓功能，在网站上鼠标悬停时显示div等内容。这对于查找div非常有帮助。

解决打印问题，请转到CSS ->按媒体显示CSS样式 ->打印

此工具中还有很多其他工具可用，我可能只使用了其中的10％。

尝试一下，也许您会发现一些有用的东西。

- Michael B.

4

在Chrome开发者工具中（F12 \ Ctrl(cmd on mac) + Shift + C）：在仿真选项卡中（从Chrome 32开始，我认为），有一个名为“媒体”的选项卡。在那里，您可以勾选媒体仿真复选框并选择您想要模拟的媒体类型（如“打印”，“屏幕”等）。

- Oleg Belousov

3

把打印样式表放在最后，同时去掉 CSS 链接或导入语句中的“print”条件如何？这样你就可以在浏览器窗口中调试打印样式表了。

- danblaker

3

一定要确保设置 #body { width: 8.5in; height:11in;}。 - ZMorek

太棒了！这对我非常有效。 - veeTrain

在Firefox v22中对我没有起作用。看起来与实际打印的样子非常不同。 - reflexiv

在FF37中工作。打印链接标签是CSS链接标签列表中的最后一个。将该链接标签中的media属性从“print”切换到“screen”。保持所有其他链接标签不变。 - Rich C

1

我一直使用Web开发者工具栏（如其他答案所述），但Firebug有时会错过一些样式。因此，我在浏览器中添加了一个书签，并将以下Javascript作为书签的URL。现在，我只需点击书签即可切换到打印样式：

javascript:(function(){var%20h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href&&(f.media=='print'||f.media=='screen')){var%20g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');if(f.media.toLowerCase().match(/screen/))f.media="dontshow";if(f.media.toLowerCase().match(/print/))f.media="all";f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new%20Date().valueOf());}}})()

以上代码查找所有的样式表链接，测试其是否为media=print，如果是，则将其更改为media=all（并通过将其替换为media=dontshow隐藏所有的media=screen），并通过将时间标记添加到URL中重新加载样式表。基本的重新加载脚本来自于其他人，我添加了媒体部分。
这对我非常有效！

以下是JavaScript URL的更易读版本，用于解释：

javascript: (function() {
    var h, a, f;
    a = document.getElementsByTagName('link');
    for (h = 0; h < a.length; h++) {
        f = a[h];
        if (f.rel.toLowerCase().match(/stylesheet/) && f.href && (f.media == 'print' || f.media == 'screen')) {
            var g = f.href.replace(/(&|\?)forceReload=\d /, '');
            if (f.media.toLowerCase().match(/screen/)) f.media = "dontshow";
            if (f.media.toLowerCase().match(/print/)) f.media = "all";
            f.href = g(g.match(/\?/) ? '&' : '?')
            'forceReload=' (new Date().valueOf());
        }
    }
})()

- ESP32

1

我使用Adobe PDF虚拟打印机，因为它是最接近真实打印机的东西，而不会浪费墨水和纸张。

无论如何，建议为打印单独设置CSS，其中包含更简单的图形和少量仅用于设计目的的图像。

- evilpenguin

是的，我正在尝试调试单独的CSS。（PDF打印机是个好建议；我经常使用它。） - Dan Fabulich

0

如果您不想花钱，可以打印到Microsoft XPS文档编写器。或者，如果您有资金（网站上提供免费试用），可以使用SnagIt。

- Mike Robinson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wolfgang Ulmer · Accepted Answer

在这里发现 lee-penkman 在Firefox中关于新功能的评论：这里：按下Shift-F2在Firefox中打开浏览器控制台（不是JavaScript控制台），然后输入media emulate print。效果非常棒!

更新于2018年9月：从Firefox 62开始，开发者控制台已经消失了。目前似乎没有办法激活打印样式仿真。

更新于2019年11月：在Firefox 69中，似乎又增加了一个用于打印样式仿真的新按钮。请参见此页面上的其他答案：https://dev59.com/r3RB5IYBdhLWcg3wFz4g#58015662