Pracuję nad opracowaniem strony internetowej i muszę pracować nad widokiem do wydruku. Zazwyczaj, gdy mam problemy z układem, korzystam z Inspektora elementów Chrome. Jednak nie istnieje to w trybie podglądu wydruku.
Czy istnieje wtyczka do Chrome lub jakiś inny sposób zmiany nośnika wyświetlania w samym chrome, aby wyświetlić stronę tak jak drukarka? Przypuszczam, że nie jest to rozwiązanie specyficzne dla Chrome, ale to moja główna przeglądarka, więc fajnie byłoby mieć rozwiązanie w przeglądarce.
W tej chwili skupiam się tylko na nośniku podglądu wydruku, ale byłoby idealnie, aby móc przejść na dowolny obsługiwany typ nośnika (tj. Wszystkie / Braille / embossed / handheld / print / projection / screen / speech / tty / telewizor).
google-chrome
google-chrome-devtools
web-inspector
print-preview
David Stinemetze
źródło
źródło
Odpowiedzi:
Uwaga: Ta odpowiedź obejmuje kilka wersji Chrome, przewijać, aby zobaczyć V52 , V48 , V46 , v43 i V42 każdą ze swoich aktualnych zmian.
Chrome v52 +:
Chrome v48 + (Dziękujemy Alexowi za zauważenie):
Chrome v46 +:
Chrome v43 +:
Chrome v42:
źródło
Zmieniono w Chrome
3235+(W przeglądarce Chrome 35+ karta „Emulacja” jest domyślnie dostępna. Konsola jest dostępna z dowolnej karty podstawowej).
W DevTools przejdź do ustawień-> Przesłaniawłącz „Pokaż widok emulacji w szufladzie konsoli”Zamknij ustawienia, przejdź do zakładki „Elementy”Ta opcja nie jest (jeszcze?) Dostępna na karcie konsoli.źródło
Od Chrome 32 masz
CSS media
opcję wScreen
sekcjiEmulation
zakładki szuflady .Po prostu włącz ją, wybierz
print
jako docelowy typ nośnika i - oto - twoja strona jest renderowana [prawie] w sposób, w jaki zostanie wydrukowana.Użyj, Escaby wyświetlić szufladę, jeśli nie jest widoczna.
źródło
Począwszy od Chrome 48 (i być może kilku wcześniejszych wersji), funkcja wydaje się ponownie działać:
Pierwsze kilka kroków pozostaje niezmienionych:
Naciśnij, F12aby wyświetlić narzędzia programistyczne
Naciśnij, ESCaby otworzyć konsolę
Zgodnie z poprzednimi odpowiedziami ustawienie można było znaleźć w zakładce „Emulacja”. Jak pokazano na poniższych obrazkach, został on przeniesiony do zakładki „Rendering”, którą można wywołać klikając trzy kropki po lewej stronie zakładki „Konsola”.
źródło
Zobacz ten artykuł
Następnie przejdź do zakładki „przesłonięcia”
źródło
Począwszy od Chrome 48+, możesz uzyskać dostęp do podglądu wydruku, wykonując następujące czynności:
Otwórz narzędzia programistyczne - Ctrl/Cmd+ Shift+ Ilub kliknij prawym przyciskiem myszy stronę i wybierz „Sprawdź”.
Naciśnij, Escaby otworzyć dodatkową szufladę.
Jeśli „Rendering” jeszcze nie jest wyświetlany, kliknij 3-kropkowy kebab i wybierz „Rendering”.
Zaznacz pole wyboru „Emuluj nośniki wydruku”.
Stamtąd Chrome wyświetli wersję strony do wydrukowania. Możesz sprawdzić element i rozwiązać problem tak, jak w przypadku wersji przeglądarki.
źródło
Jeśli debugujesz swój CSS za pomocą opcji Drukuj jako PDF w Google Chrome, a kolory tła elementu CSS nie są wyświetlane, upewnij się, że pole wyboru „Grafika w tle” jest zaznaczone. Spędziłem prawie 30 minut debugując mój CSS i zastanawiając się, co powoduje, że moje tło CSS jest ignorowane.
źródło
W Chrome v51 na komputerze Mac znalazłem ustawienia renderowania, klikając w prawym górnym rogu, wybierając Więcej narzędzi> Ustawienia renderowania i zaznaczając przycisk Emuluj multimedia w opcjach oferowanych w dolnej części okna.
Dziękuję wszystkim innym plakatom, które mnie do tego doprowadziły, i dziękuję tym, którzy udzielili odpowiedzi bez zdjęć.
źródło
Chrome v67 (mac):
...
po prawej stronie i wybierz: Więcej narzędzi >> RenderingObrazy powyższego opisu dla Chrome v67 na komputerze Mac:
Gdzie znaleźć zakładkę Rendering: Kliknij
...
po prawej stronie i wybierz: Więcej narzędzi >> RenderingJak uzyskać widok „ekranu” do wydrukowania: Gdy u dołu ekranu pojawi się okno renderowania, Emuluj CSS Media i wybierz z menu: „Ekran”.
Mam nadzieję, że to pomoże.
źródło
Przy dostępnych skrótach najszybszym sposobem jest
Otwórz Narzędzia programistyczne
Otwórz menu poleceń
Wpisz
print
i wybierz Emuluj typ nośnika wydruku CSS z menu kontekstowegoPatrząc na doskonałą i obecnie najlepiej ocenianą odpowiedź przez lmeurs , myślę, że to rozwiązanie może również pozostać stabilne w czasie.
źródło
Chrome v50:
Sposób 1:
Sposób 2:
źródło