Print.css debuggen

Diese Sache hat mich fast wahnsinnig gemacht und deshalb möchte ich hier mal eine Lösung anbieten. Wer schon mal vor dem Problem stand, die print.css zu bearbeiten, dem ist vielleicht aufgefallen, dass sich das nur mit Mühe bewerkstelligen lässt. Aus dem einfachen Grund, dass kein Debugger zur Verfügung steht und ich somit nicht weiß, welche class oder id ich da überhaupt grade vor mir habe. Dazu kommt, dass ich eine Seite bearbeiten möchte, ich also nicht einfach den media=”screen” ändern kann und mir auch keine Testseite einrichten möchte.

Abhilfe schafft hier der Browser Google Chrome, mit dem ich mich leider bisher noch nicht genug beschäftigt habe, wie ich zugeben muss. Ich bin Firebug-Fan und blende gerne mal alles andere aus. Mein Kollege Henry Schorradt, dem ich hier noch mal herzlich danken will, zeigte mir folgende einfache Methode die Print-css zu debuggen:

 

Erst einmal müsst ihr die Seite öffnen, von der ihr die print.css bearbeiten möchtet. Dort drückt ihr F12 (ich benutze mal google.de):

bild 1

Dann klickt ihr auf das Smartphone-Icon links unten (Toggle divice mode):

bild2

Die Seite, auf der ihr euch nun befindet, sollte jetzt so aussehen:

bild 3

Um besser arbeiten zu können, klickt oben links auf das momentan gesetzte Häkchen (Emulate screen resolution):

bild4

Jetzt müsst ihr im unteren linken Bereich auf Emulation klicken:

bild 5

Sollte euch im unteren Bereich kein Reiter angezeigt werden, klickt rechts auf folgendes Symbol (Hide drawer):

bild6

Sollte euch Emulation angezeigt werden, klickt auf der linken Seite auf „Media“ und setzt einen Haken bei CSS media:

bild 7

Nun wählt print aus dem Drop-down-Menü aus und ihr befindet euch auf der Print-Ansicht eurer Seite:

bild 8

Hier könnt ihr jetzt loslegen und eure Seite bearbeiten, wie ihr das von eurem Debugging-Fenster gewohnt seid.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>