Wie wird das Printmedien-CSS in Firebug angezeigt?

Firebug ist ein hervorragendes Tool zum Anzeigen eines Bildschirmmedien-CSS für ein HTML-Element. Gibt es jedoch auch eine Möglichkeit, das Druckmedien-CSS anzuzeigen? Oder gibt es ein anderes Tool, um das Printmedien-CSS anzuzeigen?

Ich hätte nie erwartet, dass dies funktioniert, aber es funktioniert. Installieren Sie sowohl die 1.5 Beta von Firebug als auch Web Developer. Wenn Sie das Druck-CSS von Web Developer auswählen, arbeiten die Tools in Firebug plötzlich mit der neuen Druckversion der Seite. Bisher habe ich keine Probleme damit gefunden, beide gleichzeitig auszuführen.

Was ist mit der Web Developer Toolbar?
https://addons.mozilla.org/en-US/firefox/addon/60
Wenn installiert, gehen Sie zu CSS -> CSS nach Medientyp anzeigen -> Drucken

Firefox benötigt jetzt keinen Firebug.

1. Führen Sie die Entwickler-Symbolleiste durch Drücken von aus Shift+F2
2. Art media emulate print

Geben Sie media resetein, um zur Standardansicht zurückzukehren.

Verwenden Sie das Web Developer-Plug-In. Anschließend können Sie im CSS-Menü auswählen, auf welchen Medien die Seite angezeigt werden soll.

Vielleicht möchten Sie einen Blick auf die Symbolleiste des Webentwicklers werfen - hier können Sie auswählen, welches CSS Sie sehen möchten. In Verbindung mit Firebug sollte es möglich sein, das Printmedien-CSS zu sehen.

In Firefox (und einigen anderen Browsern) können Sie mithilfe der Seitenansicht eine statische Anzeige des Druckstylesheets anzeigen. Es ist bei weitem nicht so nützlich wie die Symbolleiste für Webentwickler, kann Ihnen aber auch helfen, zu verstehen, was gedruckt werden soll.

Beachten Sie, dass Sie möglicherweise @media printCSS sehen, wenn Sie es nicht erwarten.

Wie SO verwendet :

[..] @ media print {# Seitenleiste, # nav, [..], div.vote {Anzeige: keine;}} [..]

... und daher könnte man erwarten, dass das CSS-Panel in Firebug irgendwie zeigt:

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

Stattdessen wird das CSS so angezeigt, als ob das @media printtatsächlich aktiv ist, wie z.

#sidebar, #nav, [..], div.vote {
  Anzeige: keine;
}}

(Siehe auch den zugehörigen Problembericht : Das CSS-Panel verfügt nicht über eine @ media-Benutzeroberfläche .)

Edit 2 Nach der Lektüre Arjan ‚s Antwort , ich merke , dass diese Lösung nicht richtig Websites nicht ansprechen (oder Missbrauch) die @media printCSS. (Siehe Beispiel unten.) Aber ich denke, diese Lösung gilt immer noch als "nicht perfekter, schneller und schmutziger Trick", vor allem für Code, den Sie geschrieben haben und von dem Sie vorher wissen, dass er diesen nicht hat .

Mit Firebug können Sie auch die Tags <link rel="stylesheet" type="text/css" ...>und <style>nach Belieben bearbeiten .

Sie können beispielsweise ein Original wechseln

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

zu

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

und der Browser wird es anwenden. Sie müssen auch die Nur-Bildschirm-Deaktivierungen deaktivieren.

Dies ist natürlich nur dann nützlich, wenn Sie nur einige Seiten mit sehr wenigen Stylesheet-Links schnell überprüfen möchten, aber zumindest keine zusätzlichen Plugins installieren müssen.

Bearbeiten 1 Dieser Trick schlägt vor, dass ich Javascript verwende, um dies zu automatisieren ...

(Haftungsausschluss: Der Einfachheit halber verwende ich JQuery. Ich bin kein Javascript-Experte.)

// 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");
}

Beachten Sie, dass die Standardeinstellung mediaist "screen"( w3.org - Attribut media ). Dies kann in einer Schaltfläche verwendet werden, um eine Seitenvorschau anzuzeigen. Der einzige Nachteil ist, dass Sie die Seite neu laden müssen, um die ursprüngliche Ansicht wiederherzustellen.

Wie oben erwähnt, funktioniert diese Lösung nicht mit HTML-Code wie diesem, da das Styling innerhalb des @media printvom Browser nicht angewendet wird:

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

Die Symbolleiste für Webentwickler hat jedoch einen großen Nachteil beim CSS-Debugging: Jedes Mal, wenn Sie die Seite aktualisieren, wird sie auf das Bildschirm-Stylesheet zurückgesetzt.

Was ich heutzutage normalerweise mache, ist, das Medium des Druck-Stylesheets während der Entwicklung vorübergehend auf Bildschirm zu schalten und es dann zurückzuschalten, bevor ich live gehe.