Schnellere Möglichkeit, Druckstylesheets zu entwickeln und zu testen (Druckvorschau jedes Mal vermeiden)?

179

Dies ist momentan mein Prozess:

  1. Speichern Sie die Änderungen in print.css
  2. Öffnen Sie den Browser und aktualisieren Sie die Seite.
  3. Klicken Sie mit der rechten Maustaste und wählen Sie Drucken> Seitenansicht (Firefox, aber wirklich jeder Browser).

Es ist Schritt 3, der mich nervt und ich frage mich, ob es möglich ist, ihn mit einem Plugin oder so aus dem Prozess herauszuschneiden. Wählen Sie einfach, eine Seite als Druckmedium anzuzeigen, und aktualisieren Sie sie dann einfach, um die Änderungen anzuzeigen.

Wie testen Sie Ihre Druckstylesheets? Klicken Sie nach einer Aktualisierung immer auf Druckvorschau?

css firefox Michael
quelle
Vielen Dank für die Vorschläge, alle. Ich würde es lieben, wenn Mozilla eine Entwicklereinstellung hinzufügen würde, um die "Aktualisierungs" -Funktionen im Druckvorschau-Fenster zu aktivieren (nicht standardmäßig, um natürlich Verwirrung durch Endbenutzer zu vermeiden). Das ist meine ideale Lösung, da ich sie (in Übereinstimmung mit Faust) normalerweise in der Seitenansicht sehen muss, um genau zu zeigen , wie sie angezeigt wird (Hintergrundbilder, Seitenumbrüche, Ränder usw.). Chrome kann ein wenig helfen, da standardmäßig eine Vorschau angezeigt wird. Ich werde mir auch das von slolife empfohlene Firefox PrintPreview-Add-On ansehen.
Michael
Dies funktioniert für Mac nicht, da es keine Druckvorschau-Option gibt. Möglicherweise haben Sie jedoch eine PDF-Option in Ihrem Druckdialog, in der Sie eine Vorschau öffnen können, die in eine temporäre PDF-Datei "gedruckt" wurde. Ich bin mir nicht sicher, ob diese Funktion in OSX integriert ist oder ob ich Acrobat installiert habe.
Neil Monroe
Nur zur Verdeutlichung: In OSX ist die Option "Druckvorschau" im Menü "Datei ..." nicht verfügbar. Mit der Erweiterung "Druck- / Druckvorschau" können Sie jedoch eine Schaltfläche zum Starten verwenden. addons.mozilla.org/en-US/firefox/addon/printprint-preview
Neil Monroe

Antworten:

208

Sie können die Chrome Media Type Emulation verwenden, wie im Beitrag akzeptiert. Siehe Druck-CSS im Browser .

UPDATE 21/11/2017

Das aktualisierte DevTools-Dokument finden Sie hier: Zeigen Sie eine Seite im Druckmodus an .

So zeigen Sie eine Seite im Druckmodus an:
1. Öffnen Sie das Befehlsmenü . ( tl; dr Cmd+Shift+P (Mac) oder Ctrl+Shift+P(Windows, Linux))
2. Beginnen Sie mit der Eingabe Renderingund wählen Sie Show Rendering.
3. Wählen Sie in der Dropdown-Liste CSS-Medien emulieren die Option Drucken aus .

UPDATE 29/02/2016

Die DevTools-Dokumente wurden verschoben und der obige Link enthält ungenaue Informationen. Die aktualisierten Dokumente zur Medientypemulation finden Sie hier: Vorschau der Stile für weitere Medientypen .

Öffnen Sie die DevTools-Emulationsschublade, indem Sie oben rechts im Browser-Ansichtsfenster auf das Symbol Weitere Überschreibungen ••• weitere Überschreibungen klicken . Wählen Sie dann Medien in der Emulationsschublade.

UPDATE 12/04/2016

Leider scheinen die Dokumente in Bezug auf die Druckemulation nicht aktualisiert worden zu sein. Der Print Media Emulator wurde jedoch (erneut) verschoben:

  1. Öffnen Sie Chrome DevTools
  2. Drücken Sie escauf Ihrer Tastatur
  3. Klicken Sie auf ⋮ (vertikale Auslassungspunkte)
  4. Wählen Sie Rendern
  5. Tick Emulate Printmedien

Siehe Screenshot unten:

Rendering-Einstellungen 12/04/2016

UPDATE 28/06/2016

Google Developers Docs rund um Chrome DevTools und die Option "Medien emulieren" wurden für Chrome> 51 aktualisiert:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=de#emulate-print-media

Um eine Seite in Druckvorschaumodus anzuzeigen, öffnen Sie das DevTools Hauptmenü wählen Sie Weitere Tools > Rendering - Einstellungen , und aktivieren Sie dann die emulieren Medien Checkbox mit dem Dropdown - Menü Satz zu drucken .

Rendering-Einstellungen 28/06/2016

UPDATE 24/05/2016

Die Benennung der Einstellungen hat sich erneut geändert:

Um eine Seite im Druckvorschau-Modus anzuzeigen, öffnen Sie das DevTools-Hauptmenü, wählen Sie Weitere Tools > Rendern und aktivieren Sie das Kontrollkästchen CSS-Medien emulieren, wobei das Dropdown-Menü auf Drucken eingestellt ist .

CSS-Medien emulieren

Patrik Affentranger
quelle
2
@SupaIrish Ja, für Firefox siehe Szymons Antwort.
djule5
Die Dokumentation ist vollständig veraltet und es gibt keine emulierten CSS-Medien im Bereich "Mehr Überschreibungen". Wo ist es hin?
TetraDev
2
Es befindet sich unter "Konsole (esc)", dann "3 vertikale Punkte", dann "Rendern" und dann "Druckmedien emulieren" unten - warum so versteckt, habe ich keine Ahnung.
TetraDev
auf osx scheint die auswahl dieser option nichts zu bewirken?
v3nt
165

In Firefox können Sie eingeben Shift+F2, um eine Befehlszeile der Developer Toolbar zu öffnen, und dann eingebenmedia emulate print

Auf diese Weise können Sie auch andere Medientypen emulieren.

Szymon Świtała
quelle
3
Ich habe festgestellt, dass dies möglicherweise nicht die gleiche Ansicht wie in der Druckvorschau widerspiegelt - insbesondere, wenn es um zusätzliche Leerzeichen geht. Stellen Sie sicher, dass Ihre Druckvorschau nach Abschluss dieses Unterschritts nicht anders ist.
jave.web
15
Leider wurde der GLCI mit Version 62 aus Firefox entfernt. Ein Drag.
Zerpsed
4
Wie kann ich dies ohne GLCI aktivieren (Shift + F12)?
StR
3
@StR Sie können Druckstile in Firefox jetzt auf andere Weise emulieren: stackoverflow.com/questions/47877112/…
TylerH
2
Ich habe gerade getestet, was @TylerH in Firefox v68 gesagt hat, und es funktioniert.
StR
22

Mit der Symbolleistenerweiterung von Firefox + Web Developer können verschiedene Stylesheets aktiviert / deaktiviert werden.

Schauen Sie im CSS-Menü nach. Es gibt ein Menü zum Deaktivieren und Aktivieren einzelner Stylesheets sowie ein Menü "Nach Medientyp anzeigen".

Versuchen Sie auch die PrintPreview-Erweiterung , mit der eine Symbolleistenschaltfläche erstellt wird, um die Schritte zum Aufrufen von PrintPreview in Firefox zu reduzieren .

Für Chrome gibt es einen Port dieser Erweiterung . Nach dem, was ich mit der Chrome-Version sagen kann, können Sie "Druckstile anzeigen" auswählen.

Slolife
quelle
12

Ich würde keine Testmethode verwenden, die keine Druckvorschau beinhaltet. Es gibt zu viele Unterschiede: Hintergrundbilder funktionieren im Druck überhaupt nicht, werden aber in normalen Bildschirmkontexten angezeigt.

Geht in Chrome control+psofort zur Druckvorschau. (Vergessen Sie einfach, mit der Maus in Ihre Menüleiste zu gehen). Das ist ziemlich einfach.

Faust
quelle
Chrome hält sich definitiv nicht an das, was in der Printmedienemulation angezeigt wird. Ich habe festgestellt, dass die Änderung nicht gedruckt wird, wenn die Vorabdruckfunktion für Chrome-Medienabfragen nicht in weniger als 2 ms ausgeführt wird.
Cchamberlain
1
Das Problem bei der Druckvorschau besteht darin, dass keine Elementinspektion möglich ist. Daher ist das Debuggen von Elementen wie Auffüllen und Rändern äußerst schwierig. Diese Elemente separat zu sehen, ist das Beste, was Sie beim Debuggen von Box-Problemen haben können.
Seiyria
6

Sie können einfach Ihre Bildschirmstile deaktivieren und Ihren Medientyp beim Testen für Ihr Druck-Stylesheet in "Bildschirm" ändern. Dies entspricht nicht genau der Verwendung einer echten Druckvorschau (Seitenumbrüche, Dokumentbreite usw.), bietet Ihnen jedoch eine gute Idee.

Löwe
quelle
5

einfach für mich (ohne @screenTeile oder ähnliches 1 ) mit FF :

  • Fügen Sie den @media print { ...Teil am Ende Ihres CSS-Inhalts ein
  • out-Kommentar nur die Wrapper - Erklärung/*@media print {*/ ... /*}*/
    • Auf diese Weise können Sie das Druckmaterial auf Ihre Stile anwenden und diese gegebenenfalls sofort überschreiben
  • (Ich verwende LiveReload, daher wird meine Browserseite sofort nach dem Speichern der Änderungen aktualisiert. )
  • ( Andernfalls , wenn Sie LiveReload nicht verwenden :) Drücken Sie CTRL+R, um die Seite neu zu laden
  • Jetzt können Sie bereits viele typische Druck-CSS-Anpassungen vornehmen (Schriftstil, Schriftgröße, Abstände, Farben), für die die Druckvorschau noch nicht benötigt wird
  • Drücken Sie ALT+F+V, um die Druckvorschau zu öffnen und wieder ALT+Wzu schließen

1 : Wenn man sie hat, kann es sein, dass es je nach den getesteten Medien keine große Sache ist, diese zu kommentieren

Andreas Dietrich
quelle
3

Wie in diesem anderen Beitrag beschrieben ( Verwenden des Chrome-Elementinspektors im Druckvorschau-Modus? ), verwenden, um das Druck-Stylesheet einfach zu emulieren. Dies ist großartig, da Sie den Inspektor verwenden können, um zu sehen, woher die Stile stammen, anstatt zu erraten, wann der Druckdialog angezeigt wird.

Rufen Sie das Dialogfeld "Einstellungen überschreiben" auf, indem Sie auf das Zahnradsymbol in der unteren rechten Ecke des Elementinspektors von Chrome klicken. Wählen Sie dann Drucken als Zielmedientyp.

Genial!

Nächstenliebe
quelle
2

Zumindest in Chrome: Fügen Sie während der Entwicklung das Body-Tag hinzu onload="window.print()" . Dadurch wird der Druckmodus sofort nach dem Aktualisieren geöffnet.

Leider scheinen die Entwicklertools nicht sehr nützlich zu sein, da es sich im Wesentlichen um ein eingebettetes PDF handelt.

Übrigens gibt es Möglichkeiten, Schritt 2 zu eliminieren. Eine beliebte ist LiveReload.

nafg
quelle
0

Sie können versuchen, Ihr reguläres Stylesheet vorübergehend zu entfernen und nur das gedruckte mit einem normalen Link-Tag zu laden.

Andrew
quelle
0

In Chrome 62 funktioniert cmd-R / cmd-P auf einem Mac gut, um eine schöne Vorschau einer Seite im @ media-Druckstil anzuzeigen.

Dies ist über die vertikale Elipse oben rechts im Browserfenster selbst möglich (nicht über Entwicklertools) / Drucken ...

Verwenden Sie esc, um das Vorschaufenster abzubrechen.

Für meinen Workflow mit IntelliJ IDEA und Chrome sind es also: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab und ich bin wieder in der IDE.

Chrome 62 in Windows 10 verfügt über dasselbe Menü "Drucken ..." an derselben Stelle, auf das mit Strg-P ​​zugegriffen werden kann: Drucken in Chrome 62

Mojo Techno
quelle