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

68

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

31

我从没想到这会起作用，但确实如此。同时安装Firebug和Web Developer的1.5 Beta。当您从Web Developer中选择打印CSS时，Firebug中的工具突然可以在页面的新打印版本上使用。到目前为止，我还没有发现同时运行两者都存在任何问题。

— 克林特姆
source

17

安装Web开发人员（addons.mozilla.org/en-US/firefox/addon/web-developer）后，打印视图看起来与实际打印有很大不同。

— 大卫·席尔瓦·史密斯

3

它似乎仅使用打印样式。:(

— jezmck '04年

2

@jezmck为我辩护，那是在09年。:)

— clintm 2012年

它似乎仅使用打印样式。一个不错的技巧是不仅设置您特定的媒体类型，而且将所有其他样式表设置为media =“ all，print”。为我工作:-)

— 耶隆（Jeroen）2013年

1

对我来说，它似乎也使用屏幕样式，并仅在顶部应用打印样式

— Andy

35

Web Developer Toolbar呢？安装后
https://addons.mozilla.org/zh-CN/firefox/addon/60
转到CSS->按媒体类型显示CSS->打印

— MadsMobæk
source

10

您可能想在选项菜单下启用持久性功能，以在重新加载更改时节省一些精力

— Alex

现在已经死了，但是请参阅Firefox的核心答案stackoverflow.com/a/40377948/623519

— artfulrobot

32

Firefox现在不需要萤火虫。

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

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

— 亚历山大·郑
source

刚刚知道，最近已经添加了许多自动化Firefox。

— 阿巴斯

4

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

— 特凡福森
source

3

您可能要看一下webdeveloper工具栏-它允许您选择要查看的CSS。与Firebug结合使用时，应该可以看到印刷媒体CSS。

— 汤姆
source

3

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

— 亚历克斯
source

3

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

像SO一样使用：

[..] @ media print {＃sidebar，＃nav，[..]，div.vote {display：none;}} [..]

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

@media print {
  ＃sidebar，＃nav，[..]，div.vote {
    显示：无；
  }
}

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

＃sidebar，＃nav，[..]，div.vote {
  显示：无；
}

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

— Arjan
source

3

编辑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。我不是Java语言专家。）

// 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>

— 阿尔贝托
source

2

Web开发人员工具栏尽管有CSS调试的一大弊端：每次刷新页面时，它都会恢复为屏幕样式表。

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

— 哪里
source

10

“每次刷新页面时，它都会还原为屏幕样式表”选项>

— 持久

安布罗斯，谢谢你的提示。我从未想到选项>持久功能可能意味着这一点！

— JankoMivšek09年