代码之家 › 专栏 › 技术社区 › Janko MivÅ¡ek

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

print-css firebug printing css

Janko MivÅ¡ek · 技术社区 · 17 年前

Firebug是为某些HTML元素显示屏幕媒体CSS的极好工具,但是否也有办法查看打印媒体CSS?还是有其他工具可以查看打印媒体CSS?

9 回复 | 直到 9 年前

clintm 16 年前

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

à¤¶à¥à¤à¤° 12 年前

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

Alexander C 9 年前

火狐现在不需要Firebug。

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

类型 media reset 以便返回标准视图。

tvanfosson 17 年前

使用Web开发人员插件。然后,您可以从CSS菜单中选择希望页面显示为哪个媒体。

tomjen 17 年前

您可能想看看WebDeveloper工具栏-它允许您选择要查看的CSS。结合Firebug,应该可以看到打印媒体的CSS。

alex 17 年前

在火狐(和其他一些浏览器)中,您可以通过使用打印预览看到打印样式表的静态显示。它远不如Web开发人员工具栏有用,但它也可以帮助您了解将要打印的内容。

Arjan 15 年前

实际上,要知道你可能看到 @media print 当你不期望它的时候。

喜欢 SO uses :

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

…因此,我们可能期望Firebug中的CSS面板以某种方式显示:

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

但相反,它显示的CSS就像 @媒体打印 实际上是活跃的,比如:

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

(另见相关问题报告: CSS Panel does not have @media UI )

Community Mohan Dere 9 年前

编辑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代码,因为 @媒体打印 浏览器不会应用:

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

wheresrhys 17 年前

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

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