我经常使用Firebug和IE开发者工具来调试疑难的CSS问题。但是偶尔会遇到一些棘手的bug,只有在打印页面时才会出现。
您使用什么技术/工具来诊断这样的问题?是否有一种方法可以在打印视图中更充分地利用传统的CSS调试工具?
更新:我已经使用PDF打印机以避免浪费纸张;我的问题是我无法右键单击打印的DOM。下面的一些其他答案非常有帮助,谢谢。 :-)
我经常使用Firebug和IE开发者工具来调试疑难的CSS问题。但是偶尔会遇到一些棘手的bug,只有在打印页面时才会出现。
您使用什么技术/工具来诊断这样的问题?是否有一种方法可以在打印视图中更充分地利用传统的CSS调试工具?
更新:我已经使用PDF打印机以避免浪费纸张;我的问题是我无法右键单击打印的DOM。下面的一些其他答案非常有帮助,谢谢。 :-)
在这里发现 lee-penkman 在Firefox中关于新功能的评论:这里:按下Shift-F2
在Firefox中打开浏览器控制台(不是JavaScript控制台),然后输入media emulate print
。效果非常棒!
更新于2018年9月:从Firefox 62开始,开发者控制台已经消失了。目前似乎没有办法激活打印样式仿真。
更新于2019年11月:在Firefox 69中,似乎又增加了一个用于打印样式仿真的新按钮。请参见此页面上的其他答案:https://dev59.com/r3RB5IYBdhLWcg3wFz4g#58015662
我使用WebDeveloper插件和CSS -->按媒体类型显示CSS -->打印来查看CSS在打印时的效果。Firebug的检查工具与由插件过滤的CSS一起使用。
我使用Firefox浏览器和开发者工具栏。
我在任务栏中使用实时CSS编辑工具,它非常有用,可以随时修改CSS并实时查看结果。
我还使用轮廓功能,在网站上鼠标悬停时显示div等内容。这对于查找div非常有帮助。
解决打印问题,请转到CSS ->按媒体显示CSS样式 ->打印
此工具中还有很多其他工具可用,我可能只使用了其中的10%。
尝试一下,也许您会发现一些有用的东西。
#body { width: 8.5in; height:11in;}
。 - ZMorekjavascript:(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());
}
}
})()
我使用Adobe PDF虚拟打印机,因为它是最接近真实打印机的东西,而不会浪费墨水和纸张。
无论如何,建议为打印单独设置CSS,其中包含更简单的图形和少量仅用于设计目的的图像。