Szybszy sposób opracowywania i testowania arkuszy stylów drukowania (unikanie podglądu wydruku za każdym razem)?

179

To jest teraz mój proces:

  1. Zapisz zmiany w print.css
  2. Otwórz przeglądarkę i odśwież stronę.
  3. Kliknij prawym przyciskiem myszy i wybierz polecenie Drukuj> Podgląd wydruku (Firefox, ale naprawdę każda przeglądarka)

To krok 3 mnie wkurza i zastanawiam się, czy można to wyciąć z procesu za pomocą wtyczki lub czegoś takiego. Wystarczy wybrać stronę jako nośnik wydruku, a następnie po prostu odświeżyć, aby zobaczyć zmiany.

Jak testujesz swoje arkusze stylów drukowania? Czy zawsze po odświeżeniu klikasz podgląd wydruku?

css firefox Michael
źródło
Dziękuję wszystkim za sugestie. Bardzo bym chciał, gdyby Mozilla dodała ustawienie programisty, aby włączyć funkcje „Odśwież” w oknie podglądu wydruku (nie jest to domyślne ustawienie, aby uniknąć pomyłek użytkownika końcowego). To jest moje idealne rozwiązanie, ponieważ (zgadzając się z Faustem) zazwyczaj muszę go zobaczyć w podglądzie wydruku, aby dokładnie pokazać , jak będzie wyświetlany (obrazy tła, podziały stron, marginesy itp.). Chrome może trochę pomóc, ponieważ domyślnie wyświetla podgląd. Przyjrzę się również temu dodatkowi Firefox PrintPreview zalecanemu przez slolife.
Michael
Nie działa to na komputerach Mac, ponieważ nie ma opcji Podgląd wydruku, jednak w oknie dialogowym drukowania może być dostępna opcja PDF, w której można otworzyć podgląd „wydrukowany” do tymczasowego pliku PDF. Nie jestem pewien, czy ta funkcja jest wbudowana w OSX, czy dlatego, że mam zainstalowany program Acrobat.
Neil Monroe
Po prostu wyjaśnienie, wydaje się, że w OSX opcja Podgląd wydruku nie jest dostępna w menu Plik ..., ale z rozszerzeniem Drukuj / Podgląd wydruku możesz mieć przycisk, który ją uruchamia. addons.mozilla.org/en-US/firefox/addon/printprint-preview
Neil Monroe

Odpowiedzi:

208

Możesz użyć emulacji Chrome Media Type zgodnie z zaakceptowaniem w poście Zobacz print css w przeglądarce .

AKTUALIZACJA 21.11.2017

Zaktualizowany dokument DevTools można znaleźć tutaj: Wyświetl stronę w trybie drukowania .

Aby wyświetlić stronę w trybie drukowania:
1. Otwórz menu poleceń . ( tl; dr Cmd+Shift+P (Mac) lub Ctrl+Shift+P(Windows, Linux))
2. Zacznij pisać Renderingi wybierz Show Rendering.
3. W menu rozwijanym Emuluj media CSS wybierz drukuj .

AKTUALIZACJA 29.02.2016

Dokumenty DevTools zostały przeniesione, a powyższy link zawiera niedokładne informacje. Zaktualizowane dokumenty dotyczące emulacji typu mediów można znaleźć tutaj: Podgląd stylów dla większej liczby typów mediów .

Otwórz szufladę emulacji DevTools, klikając ikonę Więcej przesłonięć ••• więcej przesłonięć w prawym górnym rogu okna przeglądarki. Następnie wybierz Media w szufladzie emulacji.

AKTUALIZACJA 12.04.2016

Niestety wydaje się, że dokumenty nie zostały zaktualizowane w zakresie emulacji wydruku. Jednak emulator nośnika wydruku został przeniesiony (ponownie):

  1. Otwórz Chrome DevTools
  2. Naciśnij escna klawiaturze
  3. Kliknij ⋮ (elipsa pionowa)
  4. Wybierz Rendering
  5. Zaznacz Emuluj nośniki wydruku

Zobacz zrzut ekranu poniżej:

ustawienia renderowania 12.04.2016

AKTUALIZACJA 28.06.2016

Dokumenty Google Developers dotyczące Chrome DevTools i opcja „Emuluj media” zostały zaktualizowane dla Chrome> 51:

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

Aby wyświetlić stronę w trybie podglądu wydruku, otwórz menu główne DevTools, wybierz Więcej narzędzi > Ustawienia renderowania , a następnie zaznacz pole wyboru emuluj media z menu rozwijanym ustawionym do drukowania .

ustawienia renderowania 28.06.2016

AKTUALIZACJA 24.05.2016

Nazwy ustawień zmieniły się ponownie:

Aby wyświetlić stronę w trybie podglądu wydruku, otwórz menu główne DevTools, wybierz Więcej narzędzi > Rendering , a następnie zaznacz pole wyboru Emuluj media CSS z menu rozwijanym ustawionym do drukowania .

emulować media CSS

Patrik Affentranger
źródło
2
@SupaIrish Tak, w przypadku przeglądarki Firefox zobacz odpowiedź Szymona.
djule5
Dokumentacja jest całkowicie przestarzała i nie ma emulacji mediów css nigdzie w obszarze „więcej przesłonięć”. Gdzie to poszło?
TetraDev,
2
Znajduje się pod „konsolą (esc)”, potem „3 pionowe kropki”, potem „renderowanie”, a następnie „emulować nośniki wydruku” na dole - dlaczego tak ukryty, nie mam pojęcia.
TetraDev
na osx wybranie tej opcji wydaje się nic nie robić?
v3nt
165

W Firefoksie możesz wpisać, Shift+F2aby otworzyć wiersz polecenia Developer Toolbar, a następnie wpisaćmedia emulate print

W ten sposób możesz także emulować inne typy mediów.

Szymon Świtała
źródło
3
Zauważyłem, że może to nie odzwierciedlać tego samego widoku, co w podglądzie wydruku - szczególnie jeśli chodzi o dodatkowe białe znaki - upewnij się, że twój podgląd wydruku nie różni się po zakończeniu tego podetapu.
jave.web
15
Niestety GLCI została usunięta z Firefoxa w wersji 62. Przeciągnięcie.
zerpsed
4
Jak to włączyć bez GLCI (shift + F12)?
StR
3
@StR Możesz teraz emulować style drukowania w Firefoksie w inny sposób: stackoverflow.com/questions/47877112/...
TylerH
2
Właśnie przetestowałem to, co @TylerH powiedział w Firefoksie v68 i działa.
StR
22

Rozszerzenie paska narzędzi przeglądarki Firefox + Web Developer umożliwia włączanie / wyłączanie różnych arkuszy stylów.

Zajrzyj do menu CSS. Istnieje menu do wyłączania i włączania poszczególnych arkuszy stylów, a także menu „Wyświetlaj według typu multimediów”.

Ponadto, aby zmniejszyć liczbę kroków związanych z przejściem do PrintPreview w przeglądarce Firefox, wypróbuj rozszerzenie PrintPreview , które utworzy przycisk paska narzędzi.

W przypadku Chrome istnieje port tego rozszerzenia . Z tego, co mogę powiedzieć w wersji dla Chrome, możesz wybrać „Pokaż style wydruku”

slolife
źródło
12

Nie użyłbym żadnej metody testowania, która nie wymagałaby podglądu wydruku. Istnieje zbyt wiele różnic: obrazy tła w ogóle nie działają w druku, ale pojawiają się w normalnych kontekstach ekranu, które są wśród nich najważniejsze.

W Chrome control+pprzechodzi od razu do podglądu wydruku. (Po prostu zapomnij myszki do paska menu). To całkiem proste.

Faust
źródło
Chrome zdecydowanie nie trzyma się tego, co pokazano w emulacji mediów drukowanych. Przekonałem się, że jeśli nie masz funkcji preprint zapytań chrome media działającej w czasie krótszym niż 2 ms, zmiana nie zostanie pomalowana.
cchamberlain,
1
Problem z podglądem wydruku polega na tym, że nie pozwala on na kontrolę elementu, więc debugowanie takich rzeczy, jak wypełnianie i marginesy, jest niezwykle trudne. Widzenie tych elementów osobno jest najlepszą rzeczą, jaką możesz mieć, próbując debugować problemy ze skrzynkami.
Seiyria,
6

Możesz po prostu wyłączyć style ekranu i zmienić typ nośnika na „ekran” dla arkusza stylów drukowania podczas testowania. Nie będzie to dokładnie to samo, co użycie rzeczywistego podglądu wydruku (podziały stron, szerokość dokumentu itp.), Ale nadal daje całkiem niezły pomysł.

Lew
źródło
5

proste dla mnie (bez @screenczęści lub podobnego 1 ) z FF :

  • umieść tę @media print { ...część na końcu treści CSS
  • wykomentuj tylko deklarację opakowania/*@media print {*/ ... /*}*/
    • w ten sposób nakładając materiały drukowane do swoich stylów, natychmiast zastępujesz je w stosownych przypadkach
  • (Korzystam z LiveReload, więc moja strona przeglądarki odświeża się natychmiast po zapisaniu zmian)
  • (w przeciwnym razie , jeśli nie korzystasz z LiveReload :) naciśnij, CTRL+Raby ponownie załadować stronę
  • teraz możesz już wykonać wiele typowych korekt CSS wydruku (styl czcionki, rozmiar czcionki, odstępy, kolory), w których nie trzeba jeszcze podglądu wydruku
  • naciśnij, ALT+F+Vaby otworzyć podgląd wydruku i ALT+Wzamknąć go ponownie

1 : jeśli je masz, komentowanie / komentowanie tych, w zależności od testowanych mediów, może nie być wielką sprawą, w przeciwnym razie

Andreas Dietrich
źródło
3

Jak opisano w tym drugim poście ( Korzystanie z Inspektora elementów Chrome w trybie podglądu wydruku? ), Możesz użyć chrome, aby po prostu emulować arkusz stylów drukowania. Jest to świetne, ponieważ można użyć inspektora, aby zobaczyć, skąd pochodzą style, zamiast zgadywać, kiedy pojawi się okno dialogowe drukowania.

Przejdź do okna dialogowego Ustawienia zastępowania, klikając ikonę koła zębatego w prawym dolnym rogu Inspektora elementów Chrome. Następnie wybierz druk jako docelowy typ nośnika.

Niesamowite!

Dobroczynność
źródło
2

Przynajmniej w Chrome: podczas programowania dodaj do tagu body onload="window.print()". Spowoduje to, że tryb drukowania otworzy się natychmiast po odświeżeniu.

Niestety nie wydaje się, aby narzędzia dla programistów były bardzo przydatne, ponieważ jest to zasadniczo osadzony plik PDF.

Nawiasem mówiąc, istnieją sposoby na wyeliminowanie kroku 2. Jednym z popularnych jest LiveReload.

nafg
źródło
0

Możesz spróbować tymczasowo usunąć swój zwykły arkusz stylów i ładować tylko do wydruku z normalnym znacznikiem linku.

Andrzej
źródło
0

W Chrome 62 cmd-R / cmd-P działa dobrze na komputerze Mac, aby wyświetlić ładny podgląd strony w stylu wydruku @media.

Jest to dostępne poprzez pionową elipsę w prawym górnym rogu okna przeglądarki (nie Narzędzia dla programistów) / Drukuj ...

Użyj esc, aby anulować okno podglądu.

Tak więc, dla mojego przepływu pracy z IntelliJ IDEA i Chrome, są to: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab i wróciłem do IDE.

Chrome 62 w systemie Windows 10 ma to samo menu Drukuj ... w tym samym miejscu, dostępne za pomocą klawiszy Ctrl-P: wydrukuj w Chrome 62

Mojo Techno
źródło