Verwenden Sie den Elementinspektor von Chrome im Druckvorschau-Modus?

666

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).

David Stinemetze
quelle

Antworten:

1158

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 v52 +

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 v48 +

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).

Unterstützung für Chrome v46 +

Chrome v43 +:

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

Emulieren Sie Druckmedienabfragen in Chrome v43

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).

Emulieren Sie Druckmedienabfragen in Chrome v42

lmeurs
quelle
14
Ich kann dies bestätigen und habe dies zur genehmigten Antwort gemacht. Ich bin mir nicht sicher, warum sie darauf bestehen, es alle paar Veröffentlichungen zu verschieben.
David Stinemetze
8
Gefunden in Chrome 48, aber sie haben es erneut verschoben: Gehen Sie in der Schublade zu "Rendern" und aktivieren Sie "Druckmedien emulieren".
Olemak
7
Diese häufigen Änderungen sind das Dümmste, was ich bisher bei Google gesehen habe! So eine Zeitverschwendung.
Isapir
8
Leider emuliert dies nicht immer das Gleiche wie die Druckvorschau, daher nicht so gut zum Debuggen. Es ist jedoch gut zu sehen, wie das allgemeine Layout und die Stile aussehen.
Verwirren
18
Dieser 'Print'-Emulator ist völlig nutzlos. Die Seite wird nicht richtig emuliert, da das, was Sie im Browser sehen, nicht dem entspricht, was Sie in der Druckvorschau sehen. Hat jemand eine funktionierende Lösung?
Ian S
168

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.

Überschreibungen aktivieren

Noco
quelle
1
Um dieses Update wiederzugeben, habe ich dies jetzt als die richtige Antwort markiert.
David Stinemetze
3
Die Registerkarte "Überschreibungen" ist in Chrome 36 nicht mehr vorhanden (ich weiß nicht, wann dies geändert wurde). Die Registerkarte Emulation ist standardmäßig vorhanden.
Ebruchez
1
Ist es nur ich oder ist die CSS-Medienoption in Chrome 36 weg? Jetzt kann nur basierend auf bestimmten Mobilgeräten ausgewählt werden. UPDATE: doh. Gemäß den obigen Anweisungen muss buchstäblich auf "Bildschirm" geklickt werden. Nicht sofort ersichtlich, dass es anklickbar ist.
Ted
1
Das einzige Problem, das ich gefunden habe, nachdem ich es verwendet habe, ist, dass es nicht das ist, was Chrome ausdruckt. Dies ist bei Bootstrap 3.x sehr offensichtlich, wo die Medien grid-md verwenden, während die Druckvorschau grid-sm verwendet
Sammaye
3
Chrome 39 ist dies unter "Medien". Sie müssen die Geräteemulation aktivieren, indem Sie zuerst auf das kleine Telefonsymbol links in der oberen Leiste von devtools und dann auf die 3 Punkte oben rechts im Geräteemulator klicken.
Danny Staple
73

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.

Alexander Pawlow
quelle
Ich hatte gehofft, es wäre einfacher als das, aber ich nehme an, es muss vorerst reichen. Es wäre schön, wenn dies irgendwann automatisch in eines der Tools eingebaut würde.
David Stinemetze
Wenn ich die Chance habe, muss ich es versuchen. Ich kann mich bis dahin einfach an die Methode von @ Jon-YYC halten.
David Stinemetze
Ich benutze Version 28 auf dem Mac und sehe diese Option nicht ... hat noch jemand dieses Problem?
Aaron Hill
2
@ AaronHill Ich verwende Version 28 auf einem Mac und habe kein Problem damit. Obwohl Sie vielleicht nicht wirklich in den Einstellungsdialog gekommen sind. Sie finden dies, indem Sie auf das Zahnradsymbol in der unteren rechten Ecke des Elementinspektors klicken.
David Stinemetze
2
Diese Antwort ist jetzt veraltet.
Flimm
23

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.

Registerkartenauswahl

Auswahl einstellen

Halle Knast
quelle
20

Bitte lesen Sie diesen Artikel

Öffnen Sie den Inspektor für Chromentwicklungswerkzeuge

Gehen Sie dann zur Registerkarte "Überschreibungen"

Öffnen Sie config / Settings

Adardesign
quelle
3
Diese Antwort ist jetzt veraltet.
Flimm
14

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.

Image of Chrome 49+ Druckvorschau-Option in Dev Tools

NilsyNils
quelle
Haben Sie eine Quelle für eine aktualisierte DevTools-Anleitung? Ich kann die meisten von ihnen herausfinden, aber ich habe überall danach gesucht und ich habe das Gefühl, dass es viele hilfreiche neue Funktionen gibt, die sich vor mir verstecken.
Crystal Miller
1
Die beste Quelle, die ich für allgemeine Informationen zu Entwicklertools gefunden habe, ist developer.google.com/web/tools/chrome-devtools/?hl=de . Ich habe es auch sehr genossen, die Updates für die neueste Version in diesem Video zu sehen: youtube.com/watch?v=dJR-n8szgBc .
NilsyNils
7

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.

Die Hintergrundfarbe von Google Chrome Print wird ignoriert

Rosdi Kasim
quelle
6

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.

Chrome v51 Mac Die Auswahlliste zum Emulieren von Medien wird unten angezeigt

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

user2182349
quelle
Unabhängig davon, ob ich unter "Medien emulieren" Druck oder Bildschirm auswähle, wird immer noch mit dem Druck-Stylesheet gedruckt. Ich habe stattdessen eine ganzseitige Screenshot-Erweiterung verwendet. chrome.google.com/webstore/detail/full-page-screen-capture/…
Niknah
4

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

Screenshot 1

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.

Screenshot 2

Ich hoffe es hilft.

Matt
quelle
4

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ü

    Ändern Sie die Emulation des Medientyps über das Befehlsmenü

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.

Kariem
quelle
1

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
Ben Richter
quelle