如何调试可打印的 CSS？

小开

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

无论如何，建议有一个单独的打印 CSS，与更简单的图形和较少的图像，你使用只是为了设计的目的。

小开

我使用 WebDeveloper 插件和 CSS —— > 通过媒体类型显示 CSS —— > 打印来查看打印时的 CSS。Firebug 的检查工具使用经过插件过滤的 CSS。

小开

如果你不想付钱，可以打印到 MicrosoftXPSDocumentWriter。或使用 SnagIt，如果你有资金(现场免费试用)。

小开

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

我使用任务栏中的实时 css 编辑工具，它非常有用的修改您的 css 动态实时查看结果。

我还使用了提纲功能，就是在你的网站上，在鼠标上的 div 和诸如此类的东西。对找到 Div 很有帮助。

对于打印问题，转到 CSS-> Display CSS style by media-> print

有很多其他的工具在这一个，我可能使用它的10% 左右。

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

小开

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

小开

刚刚发现一条关于 Firefox 给你中一个新特性的评论: 在 Firefox 中按 Shift-F2打开浏览器控制台(不是 javascript 控制台) ，然后输入 media emulate print。效果非常好！

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

更新于2019年11月 : 似乎在 Firefox 69中，又出现了一个打印风格模拟的新按钮。在这个页面上可以看到另一个答案: < a href = “ https://stackoverflow./a/58015662/195476”> https://stackoverflow.com/a/58015662/195476

小开

我总是使用 web 开发者工具栏(正如其他答案中所描述的) ，但 Firebug 似乎时不时地会漏掉一些样式。因此，我在浏览器中添加了一个 Bookmark，并添加了以下 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) : 在模拟选项卡(从 Chrome32开始) ，有一个“媒体”选项卡。

在这里你可以选中媒体模拟复选框并选择你想要模拟的媒体(‘ print’，‘ screen’等等)

小开

最佳答案

在 Chrome 51中:

打开 devtools (CTRL + F12或 CTRL + SHIFT + I) ，单击 ...菜单，单击 More Tools > Rendering settings打开开发控制台的 Rendering选项卡(或者，如果控制台打开，只需导航到该选项卡)。

在该选项卡中，选中并选中 Emulate Media: print的复选框。

小开

在 Firefox 69中，我找到了一个模拟打印媒体的按钮。只需打开开发工具(F12)并单击检查器。切换按钮是下面截图中高亮部分最左边的图标，看起来像一张纸。