你如何调试可打印的CSS？

Question

我一直使用Firebug和IE Developer Toolbar来调试棘手的CSS问题。但偶尔会出现一个棘手的错误，只有在你打印页面时才出现。

您使用哪些技巧/工具来诊断此类问题？有没有办法在打印视图中更多地使用传统的CSS调试工具？

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

Answer 1

lee-penkman刚刚找到关于Firefox here中的新功能的评论：在Firefox中按Shift-F2打开浏览器控制台（不是javascript控制台），然后输入{{1 }}。工作绝对好！

---

2018年9月更新：从Firefox 62开始，开发者控制台已经消失。现在似乎没有一种激活打印样式仿真的方法。

Answer 2

在Chrome 51中：

打开devtools（CTRL + F12或CTRL + SHIFT + I）并点击...菜单，点击More Tools > Rendering settings打开开发者控制台的Rendering标签（或者，如果控制台处于打开状态，只需导航到此选项卡。）

在该标签中，选中并选中Emulate Media: print。

框

Answer 3

我使用WebDeveloper插件和CSS - ＆gt;按媒体类型显示CSS - ＆gt;打印以查看打印时的CSS。 Firebug的检查实用程序与CSS一起使用，由插件过滤。

Answer 4

我使用的是Firefox和developer toolbar。

我在任务栏中使用实时css编辑工具，实时修改你的css非常有用，可以实时查看结果。

我还在你的网站上使用了大纲功能，其中div和鼠标悬停在你的网站上。找到div真的很有帮助。

有关打印问题，请转到CSS - ＆gt;按媒体显示CSS样式 - ＆gt;打印

这个中还有很多其他工具，我可能会使用它的大约10％。

尝试一下你可能会发现一些有用的东西。

Answer 5

在chrome开发人员工具中（F12 \ Ctrl（cmd on mac）+ Shift + C）： 在仿真标签（从Chrome 32以后的恕我直言）中，有一个“媒体”标签。

您可以在此处查看媒体模拟复选框，然后选择您要模拟的媒体（'打印'，'屏幕'等）

Answer 6

如何最后列出您的打印CSS，并从CSS链接或导入语句中删除“打印”条件？然后你在浏览器窗口中调试打印CSS。

Answer 7

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

无论如何，建议使用单独的CSS打印，图形更简单，用于设计目的的图像更少。

Answer 8

我总是使用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 =屏幕）并通过添加a重新加载样式表时间令牌到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());
        }
    }
})()

Answer 9

在Firefox 69中，我找到了一个模拟打印介质的按钮。只需打开开发人员工具（F12）并单击检查器：

Answer 10

如果您不想付钱，请打印到Microsoft XPS Document Writer。如果您有资金（在网站上免费试用），请使用SnagIt。