Wie wird das Printmedien-CSS in Firebug angezeigt?

68

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?

Janko Mivšek
quelle

Antworten:

31

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.

Clintm
quelle
17
Nach der Installation des Webentwicklers ( addons.mozilla.org/en-US/firefox/addon/web-developer ) sah die Druckansicht ganz anders aus als ein tatsächlicher Druck.
David Silva Smith
3
Es scheint NUR die Druckstile zu verwenden. :(
Jezmck
2
@jezmck zu meiner Verteidigung, das war in '09. :)
Clintm
Es scheint NUR Druckstile zu verwenden. Ein guter Trick besteht darin, nicht nur Ihre spezifischen Medientypen festzulegen, sondern auch alle anderen Stylesheets auf media = "all, print" zu setzen. Funktioniert für mich :-)
Jeroen
1
Für mich scheint es auch Bildschirmstile zu verwenden und nur den Druck oben anzuwenden
Andy
35

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

Mads Mobæk
quelle
10
Möglicherweise möchten Sie die Persist-Funktionen im Optionsmenü aktivieren , um beim erneuten Laden von Änderungen ein wenig
Alex
Dies ist jetzt tot, aber siehe Kern Firefox Antwort stackoverflow.com/a/40377948/623519
artfulrobot
32

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.

Alexander Chzhen
quelle
Ich wusste es gerade, es gibt viele Automatisierungen, die Firefox kürzlich hinzugefügt hat.
Abbas
4

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.

Tvanfosson
quelle
3

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.

Tomjen
quelle
3

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.

Alex
quelle
3

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

Arjan
quelle
3

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>
Alberto
quelle
2

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.

whereesrhys
quelle
10
"Jedes Mal, wenn Sie die Seite aktualisieren, wird sie auf das Bildschirm-Stylesheet zurückgesetzt" Optionen> Funktionen
beibehalten
Ambrose, danke für diesen Hinweis. Ich hätte nie gedacht, dass Optionen> Persist Features das bedeuten könnten!
Janko Mivšek