Ich arbeite an der Entwicklung einer Website und muss an der Druckansicht arbeiten. Wenn ich Layoutprobleme habe, verwende ich normalerweise den Elementinspektor von Chrome. Dies ist jedoch im Druckvorschau-Modus nicht vorhanden.

Gibt es ein Chrome-Plugin oder eine andere Möglichkeit, Ihr Anzeigemedium in Chrome selbst zu ändern und eine Seite wie ein Drucker anzuzeigen? Ich nehme an, es handelt sich nicht um eine Chrome-spezifische Lösung, aber das ist mein primärer Browser. Es wäre also schön, eine In-Browser-Lösung zu haben.

Im Moment konzentriere ich mich nur auf das Druckvorschau-Medium, aber es wäre ideal, zu einem der unterstützten Medientypen wechseln zu können (dh alle / Braille / geprägt / Handheld / Druck / Projektion / Bildschirm / Sprache / tty / Fernseher).

Hinweis: Diese Antwort umfasst mehrere Versionen von Chrome, blättern Sie zu sehen v52 , v48 , v46 , v43 und v42 jeden mit ihren aktualisierten Änderungen.

Chrome v52 +:

• Öffnen Sie die Entwicklertools (Windows: F12oder Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I).
• Klicken Sie auf die Menüschaltfläche DevTools- Hamburger anpassen und steuern und wählen Sie Weitere Tools> Rendereinstellungen (oder Rendering in neueren Versionen).
• Überprüfen Sie die Emulate Printmedien Kontrollkästchen am Rendering Registerkarte und wählen Sie den Druckmedientyp.

Chrome v48 + (Danke, Alex, dass du es bemerkt hast):

• Öffnen Sie die Entwicklertools ( CTRLSHIFTIoder F12)
• Klicken Sie auf die Schaltfläche Gerätemodus umschalten in der linken oberen Ecke ( CTRLSHIFTM).
• Stellen Sie sicher , dass die Konsole , indem Sie gezeigt Show - Konsole im Menü (1) ( ESCTaste schaltet die Konsole , wenn Developer Toolbar Fokus hat).
• Überprüfen Sie emulieren Printmedien auf die Registerkarte Wiedergabe , die durch die Auswahl geöffnet werden kann Rendering in Menü (2).

Chrome v46 +:

• Öffnen Sie die Entwicklertools ( CTRLSHIFTIoder F12)
• Klicken Sie in der linken oberen Ecke auf die Schaltfläche Gerätemodus umschalten (1).
• Stellen Sie sicher, dass die Konsole angezeigt wird, indem Sie auf die Menüschaltfläche (2)> Konsole anzeigen (3) klicken oder die ESCTaste drücken, um die Konsole umzuschalten (funktioniert nur, wenn die Entwickler-Symbolleiste den Fokus hat).
• Öffnen Sie die Registerkarten Emulation (4)> Medien (5) , überprüfen Sie CSS-Medien und wählen Sie Drucken (3).

Chrome v43 +:

• Das Schubladensymbol in Schritt 2 hat sich geändert.

Chrome v42:

• Öffnen Sie die Entwicklertools ( CTRLSHIFTIoder F12)
• Klicken Sie in der linken oberen Ecke auf die Schaltfläche Gerätemodus umschalten (1).
• Stellen Sie sicher, dass die Schublade angezeigt wird, indem Sie auf die Schaltfläche Schublade anzeigen (2) klicken oder die ESCTaste drücken, um die Schublade umzuschalten.
• Überprüfen Sie unter Emulation> Medien CSS-Medien und wählen Sie Drucken (3).

In Chrome 32 35+ geändert

(In Chrome 35+ ist standardmäßig die Registerkarte "Emulation" vorhanden. Die Konsole ist auch auf jeder primären Registerkarte verfügbar.)

1. Gehen Sie in DevTools zu Einstellungen-> Überschreibungen
2. Aktivieren Sie "Emulationsansicht in Konsolenschublade anzeigen".
3. Schließen Sie die Einstellungen und wechseln Sie zur Registerkarte "Elemente"
4. Drücken Sie Esc, um die Konsole aufzurufen
5. Wählen Sie die Registerkarte "Emulation" und klicken Sie auf "Bildschirm".
6. Scrollen Sie nach unten zu "CSS Media" und wählen Sie "Drucken".

Diese Option ist (noch?) Nicht auf der Registerkarte "Konsole" verfügbar.

Seit Chrome 32 haben Sie die CSS mediaOption im ScreenBereich der Schubladenregisterkarte Emulation.

Aktivieren Sie es einfach, wählen Sie es printals Zielmedientyp aus und - siehe - Ihre Seite wird [fast] so gerendert, wie sie gedruckt wird.

Verwenden Sie Escdiese Option , um die Schublade aufzurufen, wenn sie nicht sichtbar ist.

Ab Chrome 48 (und möglicherweise einigen früheren Versionen) scheint sich die Funktion erneut verschoben zu haben:

Die ersten Schritte bleiben unverändert:

1. Drücken Sie F12, um die Entwicklertools aufzurufen

2. Drücken Sie ESC, um die Konsole zu öffnen

Gemäß den vorherigen Antworten konnte die Einstellung dann unter der Registerkarte "Emulation" gefunden werden. Wie in den folgenden Bildern gezeigt, wurde es jetzt auf die Registerkarte "Rendern" verschoben, die durch Klicken auf die drei Punkte links neben der Registerkarte "Konsole" aufgerufen werden kann.

Bitte lesen Sie diesen Artikel

Gehen Sie dann zur Registerkarte "Überschreibungen"

Ab Chrome 48+ können Sie über die folgenden Schritte auf die Druckvorschau zugreifen:

1. Öffnen Sie die Entwicklungswerkzeuge - Ctrl/Cmd+ Shift+ Ioder klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie "Inspizieren".

2. Drücken Sie Esc, um die zusätzliche Schublade zu öffnen.

3. Wenn "Rendern" noch nicht angezeigt wird, klicken Sie auf den 3-Punkt-Kebab und wählen Sie "Rendern".

4. Aktivieren Sie das Kontrollkästchen "Druckmedien emulieren".

Von dort aus zeigt Chrome Ihnen eine Druckversion Ihrer Seite an und Sie können das Element überprüfen und Fehler beheben, wie Sie es bei der Browserversion tun würden.

Wenn Sie Ihr CSS mit "Als PDF drucken" in Google Chrome debuggen und die Hintergrundfarben Ihres CSS-Elements nicht angezeigt werden, stellen Sie sicher, dass das Kontrollkästchen "Hintergrundgrafiken" aktiviert ist. Ich habe fast 30 Minuten damit verbracht, mein CSS zu debuggen und mich zu fragen, warum mein CSS-Hintergrund ignoriert wird.

Unter Chrome v51 auf einem Mac habe ich die Rendereinstellungen gefunden, indem ich in der oberen rechten Ecke auf Weitere Tools> Rendereinstellungen geklickt und in den unten im Fenster angebotenen Optionen die Schaltfläche Medien emulieren aktiviert habe.

Vielen Dank an alle anderen Poster, die mich dazu geführt haben, und an diejenigen, die die Antwort ohne die Bilder geliefert haben.

Chrome v67 (Mac):

1. Halten Sie Cmd+opt+jdie Taste gedrückt, um die Entwicklungswerkzeuge zu öffnen
2. Klicken Sie ...auf der rechten Seite auf und wählen Sie: Weitere Tools >> Rendern
3. Wenn das Rendering-Fenster am unteren Bildschirmrand angezeigt wird, wählen Sie den Abschnitt CSS-Medien emulieren und wählen Sie: "Bildschirm" aus der Dropdown-Liste.
4. Gehen Sie zu "Datei >> Drucken" und Sie sollten die Ansicht sehen, die Sie drucken möchten.

Bilder der obigen Beschreibung für Chrome v67 auf einem Mac:

Wo Sie die Registerkarte "Rendern" finden: Klicken Sie ...auf der rechten Seite auf und wählen Sie: Weitere Tools >> Rendern

So drucken Sie die "Bildschirm" -Ansicht: Wenn das Rendering-Fenster am unteren Bildschirmrand angezeigt wird, wählen Sie den Abschnitt "CSS-Medien emulieren" und wählen Sie "Bildschirm" aus der Dropdown-Liste.

Ich hoffe es hilft.

Mit verfügbaren Verknüpfungen ist der schnellste Weg zu

1. Öffnen Sie die Entwicklertools

   • Windows: F12oder Ctrl+ Shift+I
   • Mac: Cmd+ Opt+I

2. Öffnen Sie das Befehlsmenü

   • Windows: Ctrl+ Shift+P
   • Mac: Cmd+ Shift+P

3. Typ printund wählen Sie den Medientyp Emulate CSS Druck aus dem Kontextmenü

   

Angesichts der hervorragenden und derzeit am besten bewerteten Antwort von lmeurs denke ich, dass diese Lösung auch im Laufe der Zeit stabil bleiben könnte.

Chrome v50:

Weg 1:

1. Menü> Weitere Tools> Rendereinstellungen (siehe Bild)
2. Unten: Registerkarte "Rendern"> Medien "Drucken" emulieren

Weg 2:

1. Konsole öffnen [esc]
2. Konsolenmenü> Rendern