我一直使用 Firebug 和 IE Developer Toolbar 来调试棘手的 CSS 问题。但偶尔会出现一个棘手的错误，该错误仅在您打印页面时才会出现。
您使用什么技术/工具来诊断此类问题？有没有办法在打印视图中充分利用传统的 CSS 调试工具？
更新：我已经使用 PDF 打印机来避免浪费纸张；我的问题是我无法右键单击打印的 DOM。下面的一些其他答案非常有帮助，谢谢。 :-)
【问题讨论】：
标签： css
我使用 Adobe PDF 虚拟打印机，因为它最接近您所获得的真实打印机，而且不会浪费墨水和纸张。
无论如何，建议使用单独的 CSS 进行打印，图形要简单得多，而仅用于设计目的的图像更少。
【讨论】：
我使用 WebDeveloper 插件和 CSS --> 按媒体类型显示 CSS --> 打印来查看打印时的 CSS。 Firebug 的检查实用程序使用插件过滤的 CSS。
【讨论】：
如果您不想付钱，请打印到 Microsoft XPS Document Writer。或者，如果您有足够的资金，请使用SnagIt（现场免费试用）。
【讨论】：
我使用 Firefox 和 developer toolbar。
我使用任务栏中的实时 css 编辑工具，它非常有用，可以实时修改 css 并实时查看结果。
我还在您的网站上使用了大纲功能，即鼠标悬停时的 div 和类似内容。找到 div 真的很有帮助。
对于打印问题，去 CSS -> 按媒体显示 CSS 样式 -> 打印
这个工具里还有很多其他的工具，我大概用了10%左右。
尝试一下，也许你会发现一些有用的东西。
【讨论】：
最后列出您的打印 CSS，然后从您的 CSS 链接或导入语句中删除“打印”条件如何？然后在浏览器窗口中调试打印 CSS。
【讨论】：
#body { width: 8.5in; height:11in;}
刚刚发现lee-penkman 对 Firefox 中的一项新功能here 的评论：在 Firefox 中按 Shift-F2 打开浏览器控制台（不是 javascript 控制台），然后输入 media emulate print。效果非常好！
2018 年 9 月更新：从 Firefox 62 开始，开发者控制台已消失。现在似乎没有办法激活打印样式模拟。
2019 年 11 月更新：在 Firefox 69 中，似乎又多了一个用于打印样式模拟的新按钮。请参阅此页面上的其他答案：https://stackoverflow.com/a/58015662/195476
【讨论】：
fn+shift+F2
我一直使用 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());
}
}
})()
【讨论】：
在 chrome 开发者工具中 (F12 \ Ctrl(mac 上的 cmd) + Shift + C): 在仿真选项卡中（从 Chrome 32 起恕我直言），有一个“媒体”选项卡。
您可以在此处选中媒体模拟复选框并选择您想要模拟的媒体（“打印”、“屏幕”等）
【讨论】：