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

How to see the print media CSS in Firebug?

提问by Janko Miv?ek

Firebug is an excellent tool to to show a screen media CSS for some HTML element, but is there a way to look at the print media CSS too? Or is there any other tool to see the print media CSS?

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

采纳答案by clintm

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.

我从没想过这会奏效，但确实如此。安装 - 两者 - Firebug 和 Web Developer 的 1.5 测试版。当您从 Web Developer 选择打印 css 时，Firebug 中的工具会突然在页面的新打印版本上工作。到目前为止，我还没有发现同时运行两者的任何问题。

回答by Mads Mob?k

What about Web Developer Toolbar?
https://addons.mozilla.org/en-US/firefox/addon/60
when installed go to CSS -> Display CSS by media type -> Print

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

回答by Alexander Chzhen

Firefox does not need firebug now.

Firefox 现在不需要 firebug。

1. Run developer toolbar by pressing Shift+F2
2. Type media emulate print

1. 按运行开发者工具栏 Shift+F2
2. 类型 media emulate print

Type media resetin order to return to standard view.

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

回答by tvanfosson

Use the Web Developer plug in. Then you can choose from the CSS menu which media you want the page to display as.

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

回答by alex

In Firefox (and some other browsers), you can see a static display of the print stylesheet by using Print Preview. It's nowhere near as useful as the web developer toolbar, but it can also help you understand what is going to be printed.

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

回答by Arjan

Actually, be aware that you might see @media printCSS when you don't expect it.

实际上，请注意，您可能会@media print在不期望的情况下看到CSS。

Like SO uses:

像SO 使用：

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

...and hence one might expect the CSS panel in Firebug to somehow show:

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

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

But instead it shows the CSS as if the @media printis actually active, like:

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

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

(See also the related issue report: CSS Panel does not have @media UI.)

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

回答by Alberto

Edit 2After reading Arjan's answer, I realize that this solution does not address correctly sites using (or abusing) the @media printCSS. (See example below.) But I think this solution still holds valid as a "non-perfect-quick-and-dirty-trick", above all for code that you have written and that you know beforehand that it doesn't have this.

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

---

---

With Firebug, you also can edit the <link rel="stylesheet" type="text/css" ...>and <style>tags to your convenience.

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

For example, you can switch an original

例如，您可以切换原始

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

to

到

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

and the browser will apply it. You'll also have to deactivate the screen-only ones.

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

Of course, this is only useful if you only want to quick-check a few pages with very few stylesheet links, but at least, you do not need to install any additional plugins.

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

---

---

Edit 1This trick suggests me using javascript to automate this...

编辑 1这个技巧建议我使用 javascript 来自动化这个......

(Disclaimer: I'll use JQuery for simplicity. I'm not a Javascript expert.)

（免责声明：为了简单起见，我将使用 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");
}

Note that the default mediais "screen"(w3.org - media attribute). This could be used in a button to show a page preview. The only drawback is that you have to reload the page to restore the original view.

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

As pointed out above, this solution does not work with html code like this, because the styling inside the @media printwon't be applied by the browser:

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

回答by tomjen

You might want to take a look at the webdeveloper toolbar - it allows you to select what CSS you want to see. In conjunction with firebug, it should be possible to see the print media CSS.

您可能想看看 webdeveloper 工具栏 - 它允许您选择要查看的 CSS。结合firebug，应该可以看到印刷媒体的CSS。

回答by wheresrhys

Web developer toolbar has one big drawback for CSS debugging though: every time you refresh the page it reverts to the screen stylesheet.

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

What I tend to do these days is temporarily switch the media of the print stylesheet to screen while I'm developing, and then switch it back before going live.

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