Vorschläge zum Debuggen von Druckstylesheets?

238

Ich habe kürzlich an einem Druck-Stylesheet für eine Website gearbeitet und festgestellt, dass ich keine effektiven Möglichkeiten zur Optimierung hatte. Es ist eine Sache, einen Nachladezyklus für die Arbeit am Bildschirmlayout zu haben:

  • Code ändern
  • Befehlsregisterkarte
  • neu laden

Aber dieser ganze Prozess wird viel schwieriger, wenn Sie versuchen zu drucken:

  • Code ändern
  • Befehlsregisterkarte
  • neu laden
  • drucken
  • Schielen Sie auf das Bild mit der Druckvorschau
  • Öffnen Sie das PDF in der Vorschau zur weiteren Überprüfung

Gibt es Werkzeuge, die ich hier verpasse? Verfügt der Inspektor von WebKit über das Kontrollkästchen "Dies ist ein ausgelagertes Medium"? Gibt es etwas Magie, die Firebug ( Schauder ) bewirken kann?

Jim Puls
quelle
4
Wie wäre es mit der Funktion "Druckvorschau" eines Browsers, der dies unterstützt (z. B. Firefox)? Ich habe (meistens genau) einige Webseiten für den Druck damit getestet.
Halil Özgür
2
Mögliches Duplikat von Wie debuggen Sie druckbares CSS?
Outis
3
Öffnen Sie in Firefox die "Developer Toolbar" mit Umschalt + F2, geben Sie "media emulate print" (oder "emu" + Tab + "print") ein und geben Sie die Eingabetaste ein.
Marcello Nuccio
@MarcelloNuccio Dies sollte eine Antwort sein. stackoverflow.com/a/28873496/1696030 hat zum Vergleich einige positive Stimmen erhalten. "Developer Toolbar" ist etwas irreführend, da es sich um eine Befehlszeilenschnittstelle handelt.
Volker E.

Antworten:

327

Dafür gibt es im Chrome-Inspektor eine Option.

  1. Öffnen Sie den DevTools-Inspektor (Mac: Cmd+ Shift+ C, Windows: Ctrl+ Shift+ C).
  2. Klicken Sie auf das Toggle - Gerät - Modus - Symbol Schalten Sie die Gerätemodustaste um, das sich auf der oberen linken Ecke des DevTools Panel. (Windows: Ctrl+ Shift+ M, Mac: Cmd+ Shift+ M).
  3. Klicken Sie auf das Symbol Weitere Überschreibungen mehr Überschreibungen in der oberen rechten Ecke des Browser-Ansichtsfensters, um die devtools-Schublade zu öffnen.
  4. Wählen Sie dann Medien in der Emulationsschublade aus und aktivieren Sie das Kontrollkästchen CSS-Medien .

    Geben Sie hier die Bildbeschreibung ein

Dies sollte den Trick tun.

Update: Die Menüs haben sich in DevTools geändert. Sie finden es jetzt, indem Sie oben rechts auf das Menü "Drei Punkte" klicken> Weitere Tools> Rendereinstellungen> Medien emulieren> Drucken.

Quelle: Google DevTools-Seite *

Rafael Nogueira
quelle
5
Danke, das habe ich gesucht, konnte es nicht finden: / Die Verknüpfung funktioniert aber nicht mehr. Ich mache nur F12 + Zahnradsymbol in der unteren rechten Ecke, dann ist die Einstellung unter der Registerkarte Overrides,
Aurelien
18
Leider ist es nicht 100% genau :(
Maazza
9
In Chrome 32.0.1700.14 beta-m Aurafehlt "Emulate CSS media [print]" :(
Rocket Hazmat
11
Diese Antwort muss korrigiert werden. Ab Chrome 48 befindet sich der Emulator für Druckstylesheets nicht mehr unter "Emulation", sondern unter "Rendern".
Chharvey
13
Drei-Punkte-Menü (rechte Seite) im Inspektor> Weitere Tools> Rendereinstellungen> Medien emulieren> Drucken
Allicarn
74

Ich gehe davon aus, dass Sie so viel Kontrolle wie möglich über das gedruckte Fenster haben möchten, ohne einen HTML-zu-PDF-Ansatz zu verwenden ... Verwenden Sie den @ media-Bildschirm zum Debuggen - @ media-Druck für das endgültige CSS

Moderne Browser können Ihnen mithilfe von Zoll und Punkt in a ein schnelles Bild davon geben, was zur Druckzeit passieren wird @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Sobald Ihr Browser "Zoll" anzeigt, haben Sie eine bessere Vorstellung davon, was Sie erwartet. Dieser Ansatz sollte die Druckvorschau-Methode so gut wie beenden. Alle Drucker arbeiten mit ptund inEinheiten, und mit der @ media-Technik können Sie schnell sehen, was passieren wird, und entsprechend anpassen. Firebug (oder gleichwertig) beschleunigt diesen Prozess absolut. Wenn Sie Ihre Änderungen zu @media hinzugefügt haben, verfügen Sie über den gesamten Code, den Sie für eine verknüpfte CSS-Datei mithilfe des media = "print"Attributs benötigen. Kopieren Sie einfach die @ media-Bildschirmregeln in die Datei, auf die verwiesen wird.

Viel Glück. Das Web wurde nicht für den Druck erstellt. Es kann manchmal unmöglich sein, eine Lösung zu erstellen, die all Ihre Inhalte und Stile liefert, die denen im Browser entsprechen. Zum Beispiel lässt sich ein flüssiges Layout für ein überwiegend 1280 x 1024 großes Publikum nicht immer leicht in einen schönen und ordentlichen 8,5 x 11-Laserdruck übersetzen.

W3C-Referenz zur Reinigung: http://www.w3.org/TR/css3-mediaqueries/

Dawson
quelle
Ich wollte nur kommentieren, dass diese Methode ziemlich clever ist. Es ist viel einfacher, die Fenstergröße geringfügig zu ändern, um die Druckstile umzuschalten, als eine Druckvorschau zu verwenden. Während Sie dies manchmal aus Gründen der IE-Kompatibilität und dergleichen noch tun müssen, eignet sich dies hervorragend für die anfängliche Iteration von Druckstilen.
Chucknelson
@Futter. Danke, Mann. Hey, ich habe festgestellt, dass meine Demo offline ist, also habe ich eine Geige dafür erstellt. jsfiddle.net/dNEmT
Dawson
20

In Chrome 48 können Sie Druckstile auf der Registerkarte Rendern debuggen .

Klicken Sie oben rechts im Inspektor und in den Rendereinstellungen auf das Menüsymbol .

Bearbeiten
Für Chrome 58 wurde der Speicherort in Web Inspector> Menü> Weitere Tools> Rendern geändert

Minlare
quelle
4
Chrome 49: F12 (Entwicklerkonsole) -> ESC (Konsole) -> Rendern -> Druckmedien emulieren
user1477388
19

In Chrome v41 ist es da, aber an einer etwas anderen Stelle.

Geben Sie hier die Bildbeschreibung ein

johntrepreneur
quelle
3
In Version 53 befindet es sich stattdessen auf der Registerkarte Rendern. Unten befindet sich ein Kontrollkästchen für Medien emulieren, mit dem Sie ein Dropdown-Menü aktivieren können, in dem Sie Drucken auswählen können, ähnlich dem bereitgestellten Screenshot
James Gray,
16

Es gibt eine einfache Möglichkeit, Ihr Druck-Stylesheet zu debuggen, ohne ein Medienattribut in Ihrem HTML-Code zu ändern (wie bereits erwähnt, wird das Problem mit Breite / Seiten natürlich nicht gelöst):

  • Verwenden Sie die Firefox + Web Developer-Erweiterung.
  • Wählen Sie im Menü Web Developer die Option CSS / CSS nach Medientyp / Druck anzeigen
  • Kehren Sie zum Webentwickler-Menü zurück und wählen Sie Optionen / Funktionen beibehalten

Jetzt sehen Sie das gedruckte CSS und können Ihre Seite auf unbestimmte Zeit neu laden. Wenn Sie fertig sind, deaktivieren Sie "Features beibehalten" und laden Sie neu. Sie erhalten erneut das CSS des Bildschirms.

HTH.

Kapsel
quelle
7
Rendert wesentlich anders als die Druckvorschau. Vielleicht ist das eine Eigenart in meinem CSS. In jedem Fall löst es das Problem nicht. trotzdem danke.
Heartpunk
Ja, auch für mich ganz anders. Ich folgte dieser jsfiddle ( jsfiddle.net/2wk6Q/3 ) und die Druckvorschau zeigt Seiten mit roten Rändern, aber das ist einfach ganz anders.
Dualität_
1
Ich muss sagen, dass diese "Problemumgehung" am besten für mich funktioniert. Vielleicht habe ich Glück und deshalb gibt es nur kleine Unterschiede zwischen dem nativen Druckbildschirm und dem Druckbildschirm der Webentwickler, aber es hat mir definitiv geholfen herauszufinden, warum Lücken auftreten und was am wichtigsten ist - ich kann den Code mit Firebug durchgehen und sehen, was los ist am
Erik Čerpnjak
13

Die Benutzeroberfläche von Chrome ist ab Version 53 wieder anders.

Ich muss diese Funktion nicht oft verwenden, aber wenn ich das tue, brauche ich ewig, um herauszufinden, wohin das Chrome-Team sie verschoben hat, seit ich das letzte Mal Zyklen gebrannt habe, um sie aufzuspüren.

Beachten Sie, dass es sich um das Menü ... im Bereich " Dev Tools" und nicht um das Menü ... im Bereich "Chrome Browser" handelt.

Druckervorschau ab Version 53 unter MacOS

Jetzt scrollen Sie in der Rendering - Seite. Es ist oft unter der Falte.

TrophyGeek
quelle
1
Sie haben mir gerade Tage beim Debuggen von print.css erspart. Du bist toll!
Zazvorniki
8

Nach der Antwort von rflnogueira sehen die aktuellen Chrome-Einstellungen (40.0. *) Wie folgt aus:

Chromdruck CSS-Emulation

Anil Vangari
quelle
Ich habe ein wenig Zeit gebraucht, um die Registerkarte "Medien" zu identifizieren. Ich habe auf der Registerkarte "Gerät" weiter danach gesucht.
Lorin Rivers
5

Zeigen Sie beim Drucken einfach das Druck-Stylesheet in Ihrem Browser an media="screen". Die Druckvorschau-Ansicht verwendet dieselbe Rendering-Engine wie der normale Browsermodus, sodass Sie damit genaue Ergebnisse erzielen können.

Tatu Ulmanen
quelle
14
Außer im normalen Browsermodus gibt es keine Seiten, daher habe ich keine Ahnung, wie der Inhalt fließen wird. Der normale Browsermodus hat eine Breite von einer bestimmten Anzahl von Pixeln, während eine Seite eine Breite von einer bestimmten Anzahl von Zoll oder Zentimetern hat. Es gibt grundlegende implementierungsunabhängige Unterschiede zwischen Bildschirm und Druck. Das Debuggen zwischen diesen ist das, wonach ich strebe.
Jim Puls
1
Auf Chrom ist das Rendering allein mit diesem Vorschlag ganz anders. Wird nicht funktionieren.
Heartpunk
Die Breite der "Seite" ist nicht schwer zu bestimmen, die Höhe ist wirklich schwierig. Sowohl Browser als auch Drucker spielen eine Rolle bei den 11-Zoll-Kopfschmerzen. Webseiten sind durchgehend lang. Ohne die Garantie des Ausgabegerätetyps und des Browsers werden Sie es wahrscheinlich nicht jedes Mal aufs Neue treffen. Die Verwendung eines HTML-zu-PDF-Ansatzes würde funktionieren, aber das würde den Rahmen Ihrer Frage sprengen.
Dawson
3

2019 - Aktualisierte Anweisungen

  1. Öffnen Sie den Chrome-Inspektor
    • Von Mac => option+ command+i
    • Von Windows =>F12
  2. Klicken Sie auf die kleinen 3 Punkte, customize and control devTools Geben Sie hier die Bildbeschreibung ein

  3. Wählen More Tools

  4. Wählen Rendering

  5. Scrollen Sie nach unten zu Emulate CSS Media

  6. Wählen Sie printaus dem Abwärtspfeil

Geben Sie hier die Bildbeschreibung ein

jso1919
quelle
0

Wenn Sie über eine Druckfunktion verfügen, mit der der Inhalt der Seite in ein neues Fenster umgeschrieben wird, auf das Ihr Druckstilblatt verweist, erhalten Sie eine bessere Vorstellung davon, wie es auf Papier aussehen wird, und können es debuggen mit solchen wie Firebug auch.

Hier ist ein Beispiel, wie dies mit JavaScript / jquery gemacht werden kann

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });
Blowsie
quelle
2
Das Problem bei diesem Ansatz ist, dass diese Javascript-Funktion niemals aufgerufen wird, wenn ein Benutzer einfach "Drucken ..." in seinem Browser auswählt.
Ken Liu
Sie müssen dem Benutzer die Druckfunktion nicht anzeigen, Sie können sie einfach zum Debuggen verwenden, wenn Sie möchten
Blowsie
Dies ist eine überentwickelte Lösung für etwas, das der Browser bereits tut. Verwenden Sie einfach ein media="print"und die media="screen"jeweils für Ihre Stylesheets und benutzen Sie einfach das Browser - Menü oder Tastenkombinationen aufzurufen Druckvorschau. (In diesem Fall unterscheidet es sich nicht vom Öffnen eines Popups.) Wenn Sie nur debuggen, wenden Sie das media="screen"Attribut auf Ihre Druckstile an, bis Sie mit dem Debuggen fertig sind.
ORyan
-1

Geben Sie hier die Bildbeschreibung ein

In DreamWeaver gibt es eine Symbolleiste, die praktisch jede gewünschte Renderoption anzeigt: Bildschirm, Druck, Handheld-Medien, Projektionsbildschirm, TV-Medien, Desitn Time Style Sheets usw. Dies verwende ich besonders, weil es: sofort eine Vorschau mit 1 anzeigt einmaliger Knopfdruck.

Sam
quelle
1
Gut zu wissen, aber es würde die Verwendung einer anderen Rendering-Engine als der von uns entwickelten erfordern und erfordert immer noch mehr als ein erneutes Laden. trotzdem danke.
Heartpunk
1
Bereits im Jahr 2011 war dies eine proprietäre Software nur für den Kauf auf begrenzten Plattformen, für die Sie bezahlen mussten, um die angeforderte Funktionalität zum Debuggen des offenen Webs zu erhalten.
Volker E.
-7

Ich benutze Makros, um wiederholt Tastendruck und Mausklicks zu senden. Unter Windows ist AutoHotKey eine großartige Software, und unter OS X können Sie über Automator eine Art alternatives AHK für OsX lesen .

Unter Windows (ersetzen Sie Strg durch Cmd unter OS X) "Strg-s / zum FX-Fenster wechseln, wo immer es in der Liste der geöffneten Fenster steht / Strg-r", gebunden an 1 nicht verwendeten Schlüssel, vermeidet Frustration durch uninteressante Aufgaben und rettet letztendlich meine Arme von RSI :)

FelipeAls
quelle