Question

Firebug是一个很好的工具，可以显示某些HTML元素的屏幕媒体CSS，但有没有办法查看打印媒体CSS呢？或者还有其他工具可以查看打印介质CSS吗？

Answer 1

Web Developer Toolbar怎么样？
https://addons.mozilla.org/en-US/firefox/addon/60
安装时转到CSS - ＆gt;按媒体类型显示CSS - ＆gt;打印

Answer 2

Firefox现在不需要firebug。

按Shift+F2
输入media emulate print

键入media reset以返回标准视图。

Answer 3

我从来没有想到这会起作用，但确实如此。安装 - 两个Firebug和Web Developer的1.5 beta版。当您从Web Developer中选择print css时，Firebug中的工具会突然出现在页面的新打印版本上。到目前为止，我没有发现同时运行这两个问题。

Answer 4

使用Web Developer插件。然后，您可以从CSS菜单中选择希望页面显示为哪种媒体。

Answer 5

您可能需要查看Web开发人员工具栏 - 它允许您选择要查看的CSS。与firebug一起，应该可以看到打印介质CSS。

Answer 6

在Firefox（以及其他一些浏览器）中，您可以使用“打印预览”查看打印样式表的静态显示。它远不如Web开发人员工具栏那么有用，但它也可以帮助您了解将要打印的内容。

Answer 7

实际上，请注意，当您不期望它时，您可能会看到@media print CSS。

赞SO uses：

[..]@media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]

...因此人们可能希望Firebug中的CSS面板以某种方式显示：

@media print {
  #sidebar, #nav, [..], div.vote {
    display: none;
  }
}

但它显示了CSS，好像@media print实际上是活动的，如：

#sidebar, #nav, [..], div.vote {
  display: none;
}

（另请参阅相关问题报告：CSS Panel does not have @media UI。）

Answer 8

编辑2 阅读Arjan的answer后，我发现此解决方案无法正确使用（或滥用）@media print CSS的网站。（参见下面的示例。）但我认为这个解决方案仍然有效，因为“非完美 - 快速和肮脏的技巧”，首先是你编写的代码，而且你事先知道它没有这个

使用Firebug，您还可以编辑<link rel="stylesheet" type="text/css" ...>和<style>代码以方便使用。

例如，您可以切换原始

<link rel="stylesheet" type="text/css" media="print">

到

<link rel="stylesheet" type="text/css" media="screen">

，浏览器将应用它。您还必须停用仅限屏幕的。

当然，这只有在您只想快速查看几个样式表链接的页面时才有用，但至少，您不需要安装任何其他插件。

编辑1 这个技巧建议我使用javascript自动执行此操作...

（免责声明：为了简单起见，我将使用JQuery。我不是Javascript专家。）

// Save all stylesheet links
allStylesheets   = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');

// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
    allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
    printStylesheets.attr("media", "screen");
}

请注意，默认media为"screen"（w3.org - media attribute）。这可以在按钮中用于显示页面预览。唯一的缺点是您必须重新加载页面才能恢复原始视图。

如上所述，此解决方案不适用于这样的html代码，因为浏览器不会应用@media print内的样式：

<html>
    <head>
        <title>Hello world</title>
        <style type="text/css" media="all">
            @media print { h1 { color: red; }}
        </style>
    </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>

Answer 9

Web开发人员工具栏在CSS调试方面有一个很大的缺点：每次刷新页面时它都会恢复到屏幕样式表。

这些天我倾向于在我开发时暂时将打印样式表的介质切换到屏幕，然后在上线之前将其切换回来。

如何在Firebug中查看打印介质CSS？

9 个答案: