css - 如何在 Firebug 中查看打印媒体 CSS？

Question

Firebug 是显示某些 HTML 元素的屏幕媒体 CSS 的绝佳工具，但有没有办法查看打印媒体 CSS 呢？或者是否有任何其他工具可以查看打印媒体 CSS？

score 35 · Accepted Answer

Web 开发者工具栏呢？
https://addons.mozilla.org/en-US/firefox/addon/60
安装后转到 CSS -> 按媒体类型显示 CSS -> 打印

score 32 · Accepted Answer

较新的火狐

使用 F12 打开 devtools。
转到检查器选项卡。
打开规则子选项卡。
将有打印媒体按钮。

老火狐

Firefox 现在不需要 firebug。

通过按运行开发人员工具栏Shift+F2
类型media emulate print

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

score 31 · Accepted Answer

I would have never expected this to work, but it does. Install -both- the 1.5 beta of Firebug and Web Developer. When you choose the print css from Web Developer, the tools in Firebug suddenly work on the new print version of the page. So far I haven't found any problems with running both at the same time.

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

你可能想看看 webdeveloper 工具栏——它允许你选择你想看到的 CSS。结合firebug，应该可以看到打印媒体CSS。

score 3 · Accepted Answer

实际上，请注意，您可能会@media print在意想不到的时候看到 CSS。

像这样使用：

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

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

@媒体打印{
  #sidebar, #nav, [..], div.vote {
    显示：无；
  }
}

但相反，它显示 CSS 就好像@media print它实际上是活动的一样，例如：

#sidebar, #nav, [..], div.vote {
  显示：无；
}

（另请参阅相关问题报告：CSS 面板没有 @media UI。）

score 3 · Accepted Answer

编辑 2阅读Arjan的回答后，我意识到该解决方案无法正确处理使用（或滥用）@media printCSS 的站点。（见下面的例子。）但我认为这个解决方案仍然有效作为“非完美的快速和肮脏的技巧”，最重要的是你编写的代码并且你事先知道它没有这个.

使用 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 属性）。这可以在按钮中使用以显示页面预览。唯一的缺点是您必须重新加载页面才能恢复原始视图。

如上所述，此解决方案不适用于这样的 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>

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

Firefox 68 在页面检查器的规则视图中添加了一个“切换页面的打印媒体模拟”按钮（错误 1534984）：

在“检查和编辑 CSS”页面的“查看打印的 @media 规则”部分中有一个有关如何使用按钮的视频。

css - 如何在 Firebug 中查看打印媒体 CSS？

10 回答 10

较新的火狐

老火狐

Related

Reference