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

Uwaga: Ta odpowiedź obejmuje kilka wersji Chrome, przewijać, aby zobaczyć V52 , V48 , V46 , v43 i V42 każdą ze swoich aktualnych zmian.

Chrome v52 +:

• Otwórz narzędzia programistyczne (Windows: F12lub Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Kliknij przycisk Dostosuj i kontroluj menu hamburgera DevTools i wybierz Więcej narzędzi> Ustawienia renderowania (lub Renderowanie w nowszych wersjach).
• Zaznacz pole wyboru Emuluj nośnik wydruku na karcie Rendering i wybierz typ nośnika wydruku .

Chrome v48 + (Dziękujemy Alexowi za zauważenie):

• Otwórz Narzędzia programistyczne ( CTRLSHIFTIlub F12)
• Kliknij przycisk Przełącz tryb urządzenia w lewym górnym rogu ( CTRLSHIFTM).
• Upewnij się, że konsola jest wyświetlana, klikając opcję Pokaż konsolę w menu w (1) ( ESCklawisz przełącza konsolę, jeśli fokus jest na pasku narzędzi programisty).
• Zaznacz Emuluj nośniki wydruku na karcie renderowania, którą można otworzyć, wybierając Rendering w menu w (2).

Chrome v46 +:

• Otwórz Narzędzia programistyczne ( CTRLSHIFTIlub F12)
• Kliknij przycisk Przełącz tryb urządzenia w lewym górnym rogu (1).
• Upewnij się, że konsola jest wyświetlana, klikając przycisk menu (2)> Pokaż konsolę (3) lub naciskając ESCklawisz, aby przełączyć konsolę (działa tylko, gdy fokus jest na pasku narzędzi programisty).
• Otwórz zakładki Emulacja (4)> Media (5) , sprawdź media CSS i wybierz drukuj (3).

Chrome v43 +:

• Ikona szuflady w kroku 2 uległa zmianie.

Chrome v42:

• Otwórz Narzędzia programistyczne ( CTRLSHIFTIlub F12)
• Kliknij przycisk Przełącz tryb urządzenia w lewym górnym rogu (1).
• Upewnij się, że szuflada jest wyświetlana, klikając przycisk Pokaż szufladę (2) lub naciskając ESCklawisz, aby przełączyć szufladę.
• W obszarze Emulacja> Media sprawdź media CSS i wybierz drukuj (3).

Zmieniono w Chrome 32 35+

(W przeglądarce Chrome 35+ karta „Emulacja” jest domyślnie dostępna. Konsola jest dostępna z dowolnej karty podstawowej).

1. W DevTools przejdź do ustawień-> Przesłania
2. włącz „Pokaż widok emulacji w szufladzie konsoli”
3. Zamknij ustawienia, przejdź do zakładki „Elementy”
4. Naciśnij, Escaby wyświetlić konsolę
5. Wybierz zakładkę „Emulacja”, kliknij „Ekran”
6. Przewiń w dół do „CSS Media”, wybierz „drukuj”

Ta opcja nie jest (jeszcze?) Dostępna na karcie konsoli.

Od Chrome 32 masz CSS mediaopcję w Screensekcji Emulationzakładki szuflady .

Po prostu włącz ją, wybierz printjako 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.

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:

1. Naciśnij, F12aby wyświetlić narzędzia programistyczne

2. 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”.

Zobacz ten artykuł

Następnie przejdź do zakładki „przesłonięcia”

Począwszy od Chrome 48+, możesz uzyskać dostęp do podglądu wydruku, wykonując następujące czynności:

1. Otwórz narzędzia programistyczne - Ctrl/Cmd+ Shift+ Ilub kliknij prawym przyciskiem myszy stronę i wybierz „Sprawdź”.

2. Naciśnij, Escaby otworzyć dodatkową szufladę.

3. Jeśli „Rendering” jeszcze nie jest wyświetlany, kliknij 3-kropkowy kebab i wybierz „Rendering”.

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

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.

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ęć.

Chrome v67 (mac):

1. Przytrzymaj, Cmd+opt+jaby otworzyć narzędzia programistyczne
2. kliknij ...po prawej stronie i wybierz: Więcej narzędzi >> Rendering
3. Gdy okno renderowania pojawi się na dole ekranu, emuluj sekcję CSS Media i wybierz z menu rozwijanego opcję „Screen”.
4. Przejdź do „Plik >> Drukuj” i powinieneś zobaczyć widok, który chcesz wydrukować.

Obrazy powyższego opisu dla Chrome v67 na komputerze Mac:

Gdzie znaleźć zakładkę Rendering: Kliknij ...po prawej stronie i wybierz: Więcej narzędzi >> Rendering

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

Przy dostępnych skrótach najszybszym sposobem jest

1. Otwórz Narzędzia programistyczne

   • Windows: F12lub Ctrl+ Shift+I
   • Mac: Cmd+ Opt+I

2. Otwórz menu poleceń

   • Windows: Ctrl+ Shift+P
   • Mac: Cmd+ Shift+P

3. Wpisz printi wybierz Emuluj typ nośnika wydruku CSS z menu kontekstowego

   

Patrząc na doskonałą i obecnie najlepiej ocenianą odpowiedź przez lmeurs , myślę, że to rozwiązanie może również pozostać stabilne w czasie.

Chrome v50:

Sposób 1:

1. Menu> Więcej narzędzi> Ustawienia renderowania (patrz zdjęcie)
2. W dół: karta Rendering> Emuluj „drukuj” media

Sposób 2:

1. Otwórz konsolę [esc]
2. Menu konsoli> renderowanie