代码之家 › 专栏 › 技术社区 › Dan Fabulich

如何调试可打印的CSS?

css

Dan Fabulich · 技术社区 · 15 年前

我一直使用Firebug和IE开发者工具栏来调试棘手的CSS问题。但偶尔会出现一个棘手的错误,只有当你去打印页面时才会出现。

您使用什么技术/工具来诊断这样的问题?有没有一种方法可以让传统的CSS调试工具在打印视图中得到更多的使用?

更新:我已经使用了PDF打印机来避免浪费纸张;我的问题是我不能右键单击打印的DOM。下面的一些其他答案非常有用,谢谢。-)

9 回复 | 直到 5 年前

Simon Sarris 8 年前

铬51:

开放DeVoices CTRL + F12 或 CTRL + SHIFT + I )然后点击 ... 菜单,单击 More Tools > Rendering settings 打开 Rendering 开发人员控制台的选项卡(或者,如果控制台打开,则导航到此选项卡)。

在该选项卡中,选择并选中 Emulate Media: print .

Wolfgang Ulmer 6 年前

刚找到一条评论 lee-penkman 关于火狐的新功能 here 新闻界 Shift-F2 在firefox中打开浏览器控制台(而不是javascript控制台),然后输入 media emulate print . 真是太棒了!

更新日期:2018年9月 :从firefox 62开始,开发人员控制台消失了。现在似乎没有激活打印样式模拟的方法。

tvanfosson 15 年前

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

Michael B. 15 年前

我使用火狐和 developer toolbar .

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

我也会在你的网站上使用大纲功能,它是DIV和类似鼠标悬停的东西。找到Div真的很有帮助。

对于打印问题,请转到“CSS->按媒体显示CSS样式->打印”

这个工具还有很多其他可用的工具,我可能使用了大约10%的工具。

也许你能找到有用的东西。

Oleg Belousov 9 年前

在chrome开发者工具(f12\ctrl(mac上的cmd)+shift+c)中: 在仿真选项卡(从Chrome32到IMHO)中,有一个“媒体”选项卡。

在这里,您可以选中“媒体模拟”复选框并选择要模拟的媒体(“打印”、“屏幕”等)。

danblaker 13 年前

最后列出您的打印CSS,并从您的CSS链接或导入语句中删除“打印”条件,怎么样?然后在浏览器窗口中调试打印CSS。

evilpenguin 15 年前

我使用AdobePDF虚拟打印机,因为它是最接近真正打印机的东西,不会浪费墨水和纸张。

不管怎样,建议在打印时使用一个单独的CSS,它具有更简单的图形和更少的仅用于设计目的的图像。

ThiefMaster 5 年前

我总是使用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());
        }
    }
})()

Mike Robinson 15 年前

如果不想付钱,请打印到Microsoft XPS文档编写器。或使用 SnagIt 如果你有资金(现场免费试用)。