Wie debuggt man druckbares CSS?

Ich verwende die ganze Zeit Firebug und IE Developer Toolbar, um knifflige CSS-Probleme zu beheben. Gelegentlich tritt jedoch ein kniffliger Fehler auf, der nur auftritt, wenn Sie die Seite drucken.

Mit welchen Techniken / Tools diagnostizieren Sie solche Probleme? Gibt es eine Möglichkeit, herkömmliche CSS-Debugging-Tools in der Druckansicht besser zu nutzen?

Aktualisiert: Ich verwende bereits einen PDF-Drucker, um Papierverschwendung zu vermeiden. Mein Problem ist, dass ich nicht mit der rechten Maustaste auf das gedruckte DOM klicken kann. Einige der anderen Antworten unten sind sehr hilfreich, danke. :-)

In Chrome 51:

Öffnen Sie devtools ( CTRL + F12oder CTRL + SHIFT + I) und klicken Sie auf das ...Menü, More Tools > Rendering settingsum die RenderingRegisterkarte der Entwicklerkonsole zu öffnen (alternativ, wenn die Konsole geöffnet ist, navigieren Sie einfach zu dieser Registerkarte).

Aktivieren und aktivieren Sie auf dieser Registerkarte das Kontrollkästchen für Emulate Media: print.

Ich habe gerade einen Kommentar von lee-penkman zu einer neuen Funktion in Firefox hier gefunden : Drücken SieShift-F2 in Firefox, um die Browserkonsole (nicht die Javascript-Konsole) zu öffnen, und geben Sie dann ein media emulate print. Funktioniert absolut super!

Update Sept. 2018 : Ab Firefox 62 ist die Entwicklerkonsole verschwunden. Es scheint derzeit keine Möglichkeit zu geben, die Druckstilemulation zu aktivieren.

Update Nov. 2019 : Es scheint, dass es in Firefox 69 wieder eine neue Schaltfläche für die Emulation des Druckstils gibt. Siehe die andere Antwort auf dieser Seite: https://stackoverflow.com/a/58015662/195476

Ich verwende das WebDeveloper-Plugin und das CSS -> CSS nach Medientyp anzeigen -> Drucken, um das CSS wie beim Drucken anzuzeigen. Die Inspektionsdienstprogramme von Firebug arbeiten mit dem vom Plugin gefilterten CSS.

Ich benutze Firefox und die Entwickler-Symbolleiste .

Ich verwende das Echtzeit-CSS-Bearbeitungstool in der Taskleiste. Es ist ziemlich nützlich, Ihr CSS im laufenden Betrieb zu ändern, um die Ergebnisse in Echtzeit zu sehen.

Ich benutze auch die Gliederungsfunktion, die das Div und ähnliches mit der Maus auf Ihrer Website verwendet. Wirklich hilfreich, um div zu finden.

Gehen Sie für das Druckproblem zu CSS -> CSS-Stil nach Medien anzeigen -> Drucken

Es gibt viele andere Tools in diesem, ich benutze wahrscheinlich ungefähr 10% davon.

Versuchen Sie vielleicht, etwas Nützliches zu finden.

In Firefox 69 habe ich eine Schaltfläche zum Simulieren von Druckmedien gefunden. Öffnen Sie einfach die Entwicklertools (F12) und klicken Sie auf Inspektor. Die Umschalttaste ist das Symbol ganz links im hervorgehobenen Bereich des Screenshots unten, das wie ein Blatt Papier aussieht.

In Chrome-Entwicklertools (F12 \ Strg (cmd auf Mac) + Umschalt + C): Auf der Registerkarte "Emulation" (ab Chrome 32 IMHO) gibt es eine Registerkarte für "Medien".

Dort können Sie das Kontrollkästchen Medienemulation aktivieren und das Medium auswählen, das Sie emulieren möchten ('Drucken', 'Bildschirm' usw.).

Wie wäre es, wenn Sie nur Ihr letztes Druck-CSS auflisten und die Bedingung "Drucken" aus Ihrem CSS-Link oder Ihrer Importanweisung entfernen? Anschließend debuggen Sie das Druck-CSS im Browserfenster.

Ich verwende den virtuellen Adobe PDF-Drucker, da er einem realen Drucker am nächsten kommt, ohne Tinte und Papier zu verschwenden.

Auf jeden Fall wird empfohlen, ein separates CSS für Ausdrucke mit viel einfacheren Grafiken und weniger Bildern zu verwenden, die Sie nur für Designzwecke verwenden.

Ich habe immer die Webentwickler-Symbolleiste verwendet (wie in den anderen Antworten beschrieben), aber Firebug scheint von Zeit zu Zeit einige Stile zu vermissen. Also habe ich meinem Browser ein Lesezeichen hinzugefügt und das folgende Javascript als URL des Lesezeichens hinzugefügt. Jetzt kann ich einfach zum Druckstil wechseln, indem ich auf das Lesezeichen klicke:

javascript:(function(){var%20h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href&&(f.media=='print'||f.media=='screen')){var%20g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');if(f.media.toLowerCase().match(/screen/))f.media="dontshow";if(f.media.toLowerCase().match(/print/))f.media="all";f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new%20Date().valueOf());}}})()

Der obige Code findet alle Stylesheet-Links, testet, ob es sich um media = print handelt, und ändert ihn in media = all (und verbirgt alle media = screen, indem er durch media = dontshow ersetzt wird) und lädt die Stylesheets neu, indem ein Zeit-Token hinzugefügt wird die URL. Das grundlegende Skript zum erneuten Laden stammt von einer anderen Person. Ich habe einen Medienteil hinzugefügt. Das funktioniert super für mich!

Dies wäre die besser lesbare Version der obigen JavaScript-URL zur Erläuterung:

javascript: (function() {
    var h, a, f;
    a = document.getElementsByTagName('link');
    for (h = 0; h < a.length; h++) {
        f = a[h];
        if (f.rel.toLowerCase().match(/stylesheet/) && f.href && (f.media == 'print' || f.media == 'screen')) {
            var g = f.href.replace(/(&|\?)forceReload=\d /, '');
            if (f.media.toLowerCase().match(/screen/)) f.media = "dontshow";
            if (f.media.toLowerCase().match(/print/)) f.media = "all";
            f.href = g(g.match(/\?/) ? '&' : '?')
            'forceReload=' (new Date().valueOf());
        }
    }
})()

Drucken Sie in Microsoft XPS Document Writer, wenn Sie kein Geld bezahlen möchten. Oder verwenden Sie SnagIt, wenn Sie das Geld haben (kostenlose Testversion vor Ort).