Vorschläge zum Debuggen von Druckstylesheets?

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?

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

   

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 *

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/

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

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

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.

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.

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

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

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.

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

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

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();
        });

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.

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