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).
quelle
Antworten:
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 +:
Chrome v48 + (Danke, Alex, dass du es bemerkt hast):
Chrome v46 +:
Chrome v43 +:
Chrome v42:
quelle
In Chrome
3235+ geändert(In Chrome 35+ ist standardmäßig die Registerkarte "Emulation" vorhanden. Die Konsole ist auch auf jeder primären Registerkarte verfügbar.)
Gehen Sie in DevTools zu Einstellungen-> ÜberschreibungenAktivieren Sie "Emulationsansicht in Konsolenschublade anzeigen".Schließen Sie die Einstellungen und wechseln Sie zur Registerkarte "Elemente"Diese Option ist (noch?) Nicht auf der Registerkarte "Konsole" verfügbar.quelle
Seit Chrome 32 haben Sie die
CSS media
Option imScreen
Bereich der SchubladenregisterkarteEmulation
.Aktivieren Sie es einfach, wählen Sie es
print
als 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.
quelle
Ab Chrome 48 (und möglicherweise einigen früheren Versionen) scheint sich die Funktion erneut verschoben zu haben:
Die ersten Schritte bleiben unverändert:
Drücken Sie F12, um die Entwicklertools aufzurufen
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.
quelle
Bitte lesen Sie diesen Artikel
Gehen Sie dann zur Registerkarte "Überschreibungen"
quelle
Ab Chrome 48+ können Sie über die folgenden Schritte auf die Druckvorschau zugreifen:
Öffnen Sie die Entwicklungswerkzeuge - Ctrl/Cmd+ Shift+ Ioder klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie "Inspizieren".
Drücken Sie Esc, um die zusätzliche Schublade zu öffnen.
Wenn "Rendern" noch nicht angezeigt wird, klicken Sie auf den 3-Punkt-Kebab und wählen Sie "Rendern".
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.
quelle
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.
quelle
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.
quelle
Chrome v67 (Mac):
...
auf der rechten Seite auf und wählen Sie: Weitere Tools >> RendernBilder 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 >> RendernSo 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.
quelle
Mit verfügbaren Verknüpfungen ist der schnellste Weg zu
Öffnen Sie die Entwicklertools
Öffnen Sie das Befehlsmenü
Typ
print
und 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.
quelle
Chrome v50:
Weg 1:
Weg 2:
quelle