如何在Firebug中查看打印媒体CSS？
Firebug是一个很好的工具来显示一些HTML元素的屏幕媒体CSS，但有没有办法看看印刷媒体的CSS呢？ 或者是否有任何其他工具看到打印媒体的CSS？
我从来没有想到这个工作，但它确实。 安装Firebug和Web Developer的1.5testing版。 当您从Web Developer中selectprint css时，Firebug中的工具突然在新的打印版本上工作。 到目前为止，我还没有发现在同一时间运行的任何问题。
那么Web Developer Toolbar呢？
https://addons.mozilla.org/en-US/firefox/addon/60
当安装转到CSS – >按媒体types显示CSS – >打印
Firefox现在不需要firebug。
- 通过按
Shift+F2运行开发人员工具栏 - 键入
media emulate print
键入media reset为了返回到标准视图。
使用Web Developer插件。然后，您可以从CSS菜单中select要将页面显示为的媒体。
你可能想看看web开发工具栏 – 它允许你select你想看到的CSS。 配合萤火虫，应该可以看到印刷媒体的CSS。
在Firefox（以及其他一些浏览器）中，您可以使用“打印预览”来查看打印样式表的静态显示。 它远不如Web开发者工具栏有用，但它也可以帮助您了解将要打印的内容。
实际上，请注意，如果您不期望，可能会看到@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 。）
编辑2在阅读Arjan的答案后 ，我意识到这个解决scheme不能正确地解决使用（或滥用） @media print CSS的网站。 （请看下面的例子）。但是我认为这个解决scheme仍然是一个“不完美的快速和肮脏的诡计”，对于你已经写好的代码，事先知道它没有这个。
使用Firebug，您也可以编辑<link rel="stylesheet" type="text/css" ...>和<style>标签以方便您的使用。
例如，您可以切换原件
<link rel="stylesheet" type="text/css" media="print">
至
<link rel="stylesheet" type="text/css" media="screen">
浏览器将会应用它。 您还必须停用仅限屏幕的屏幕。
当然，这只有在你只想用几个样式表链接快速检查一些页面的时候才有用，但是至less你不需要安装任何额外的插件。
编辑1这个技巧build议我使用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 – 媒体属性 ）。 这可以用在一个button来显示页面预览。 唯一的缺点是您必须重新加载页面才能恢复原始视图。
正如上面指出的，这个解决scheme不能像这样的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>
Web开发人员工具栏有一个CSSdebugging的大缺点，但是：每次刷新页面，它都会返回到屏幕样式表。
我最近倾向于在开发过程中暂时将打印样式表的媒体切换到屏幕上，然后在上线前切换回来。
