css - titel - title tag wordpress




Wie debuggen Sie druckbares CSS? (6)

Ich benutze die Firebug und IE Developer Toolbar ständig, um knifflige CSS-Probleme zu beheben. Gelegentlich tritt jedoch ein kniffliger Fehler auf, der nur erscheint, wenn Sie die Seite drucken.

Welche Techniken / Werkzeuge verwenden Sie, um solche Probleme zu diagnostizieren? Gibt es eine Möglichkeit, traditionelle 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 das gedruckte DOM nicht mit der rechten Maustaste anklicken kann. Einige der anderen Antworten sind sehr hilfreich, danke. :-)


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


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

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, prüft, ob es media = print ist und ändert es in media = all (und verbirgt alle media = screen, indem es durch media = dontshow ersetzt wird), und lädt die Stylesheets erneut, indem sie ein Zeit-Token hinzufügen die URL Das grundlegende Skript zum erneuten Laden stammt von jemand anderem. Das funktioniert super für mich!

Dies wäre die besser lesbare Version der JavaScript-URL, die zur Erläuterung oben aufgeführt ist:

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

Ich verwende das WebDeveloper-Plugin und das CSS -> CSS nach Medientyp anzeigen -> Drucken, um das CSS so anzuzeigen, wie es beim Drucken wäre. Die Inspektionsprogramme von Firebug arbeiten mit dem vom Plugin gefilterten CSS.


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

Es wird jedoch empfohlen, ein separates CSS für Ausdrucke zu verwenden, mit wesentlich einfacheren Grafiken und weniger Bildern, die Sie nur für Designzwecke verwenden.


In Chrome-Entwicklerwerkzeugen (F12 \ Ctrl (Cmd auf Mac) + Umschalttaste + C): Auf der Registerkarte Emulation (Ab Chrome 32 IMHO) befindet sich eine Registerkarte für "Medien".

Dort können Sie das Kontrollkästchen für die Medienemulation markieren und die Medien auswählen, die Sie emulieren möchten ("Drucken", "Bildschirm" usw.).


Wie wäre es, wenn Sie Ihr Druck-CSS zuletzt auflisten und die Bedingung "Drucken" aus Ihrem CSS-Link oder Ihrer Import-Anweisung entfernen? Dann debuggen Sie das Druck-CSS im Browserfenster.







css