如何在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。

  1. 通过按Shift+F2运行开发人员工具栏
  2. 键入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的大缺点,但是:每次刷新页面,它都会返回到屏幕样式表。

我最近倾向于在开发过程中暂时将打印样式表的媒体切换到屏幕上,然后在上线前切换回来。