您如何调试可打印的CSS？

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

您使用什么技术/工具来诊断此类问题？有没有办法在打印视图中充分利用传统的CSS调试工具？

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

在Chrome 51中：

打开devtools（CTRL + F12或CTRL + SHIFT + I），然后单击...菜单，单击More Tools > Rendering settings以打开Rendering开发人员控制台的选项卡（或者，如果控制台已打开，则导航至该选项卡）。

在该标签中，选中，然后选中复选框Emulate Media: print。

lee-penkman刚刚在这里找到了有关Firefox的新功能的评论：Shift-F2在Firefox中按打开浏览器控制台（不是javascript控制台），然后输入media emulate print。绝对不错！

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

2019年11月更新：似乎在Firefox 69中，再次出现了一个用于打印样式仿真的新按钮。请参阅此页面上的其他答案：https : //stackoverflow.com/a/58015662/195476

我使用WebDeveloper插件和CSS->“按媒体类型显示CSS”->“打印”来查看打印时的CSS。Firebug的检查实用程序可以使用由插件过滤的CSS。

我使用Firefox和开发人员工具栏。

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

我还使用了大纲功能，您的网站上的div和类似鼠标悬停的东西。找到div非常有帮助。

对于打印问题，请转到CSS->通过媒体显示CSS样式->打印

这个工具还有很多其他工具，我大概会用掉10％。

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

在Firefox 69中，我找到了一个模拟打印介质的按钮。只需打开开发人员工具（F12），然后单击检查器。切换按钮是下面屏幕截图中突出显示的部分中最左侧的图标，看起来像一张纸。

在Chrome开发者工具中（F12 \ Ctrl（在Mac上为cmd）+ Shift + C）：在仿真标签（从Chrome 32开始，恕我直言）中，有一个“媒体”标签。

您可以在此处选中媒体仿真复选框，并选择要仿真的媒体（“打印”，“屏幕”等）。

只列出最后一个打印CSS，然后从CSS链接或import语句中删除“打印”条件，该怎么办？然后，您正在浏览器窗口中调试打印CSS。

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

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

我一直使用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），并通过向其添加时间标记来重新加载样式表网址。基本的重载脚本来自其他人，我添加了媒体部分。这对我来说很棒！

这将是上面的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());
        }
    }
})()

如果您不想付款，请打印到Microsoft XPS Document Writer。如果您有资金，也可以使用SnagIt（现场免费试用）。