Druckvorschaumodus erzwingen

Mit der CSS-Druckmedienabfrage können Sie CSS-Formatvorlagen definieren, die nur beim Drucken einer Seite gelten.

Verwenden Sie das Renderingtool , um eine Webseite in den Druckvorschaumodus zu erzwingen, um Ihre Druckformate zu debuggen.

So erzwingen Sie eine Seite in den Druckvorschaumodus:

  1. Navigieren Sie zu einer Webseite, z. B. der Todo-Demo-App.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. DevTools wird geöffnet.

  3. Wenn der Bereich oder die Symbolleiste für die Schnellansicht am unteren Rand von DevTools nicht angezeigt wird, drücken Sie ESC , wenn sich der Fokus auf DevTools befindet. Der Bereich Schnellansicht wird geöffnet.

  4. Klicken Sie auf der Symbolleiste Schnellansicht auf die Schaltfläche Weitere Tools (+), und wählen Sie dann das Renderingtool aus.

    Das Renderingtool wird im Bereich Schnellansicht geöffnet:

    Das Renderingtool im Bereich

  5. Scrollen Sie nach unten zum Abschnitt Emulate CSS media type (CSS-Medientyp emulieren ), und wählen Sie dann in der Dropdownliste drucken statt Keine Emulation aus:

    Der Abschnitt Emulate CSS media type (CSS-Medientyp emulieren) im Renderingtool

    Die Webseite wird mit ihren CSS-Formatvorlagen für Printmedien gerendert.

  6. Bearbeiten Sie im Tool Elemente die CSS-Formatvorlagen für Druckmedien:

    Das Tool Elemente überprüft ein Element auf der Seite, das mit seinen Druckformaten gerendert wird.

    Weitere Informationen zum Ändern von CSS finden Sie unter Erste Schritte beim Anzeigen und Ändern von CSS.

Beenden des Druckvorschaumodus

  • Wählen Sie im Renderingtool im Abschnitt Emulate CSS media type (CSS-Medientyp emulieren ) im Dropdownmenü Die Option Keine Emulation aus.

    Die Webseite wird mit angewendeten Bildschirmformatvorlagen gerendert.

Siehe auch

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.