Korzystasz z Inspektora elementów Chrome w trybie podglądu wydruku?

666

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

David Stinemetze
źródło

Odpowiedzi:

1158

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

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

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

Obsługa Chrome v46 +

Chrome v43 +:

  • Ikona szuflady w kroku 2 uległa zmianie.

Emuluj zapytanie dotyczące mediów drukowanych w Chrome v43

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

Emuluj zapytanie dotyczące mediów drukowanych w Chrome v42

lmeurs
źródło
14
Mogę to potwierdzić, więc zatwierdziłem odpowiedź. Nie jestem pewien, dlaczego wciąż nalegają na przenoszenie go co kilka wydań.
David Stinemetze
8
Znalazłem go w Chrome 48, ale przenieśli go ponownie: przejdź do „renderowania” w szufladzie, zaznacz „Emuluj nośniki wydruku”.
Olemak
7
Te częste zmiany to najgłupsza rzecz, jaką do tej pory widziałem w Google! Co za strata mojego czasu.
isapir
8
Niestety nie zawsze naśladuje to samo, co pokazuje podgląd wydruku, więc nie jest tak świetne do debugowania. Dobrze jest jednak zobaczyć ogólny układ i style.
Confuzing,
18
Ten emulator „wydruku” jest całkowicie bezużyteczny. Nie poprawnie emuluje stronę, ponieważ to, co widzisz w przeglądarce, nie będzie podobne do tego, co widzisz w podglądzie wydruku. Czy ktoś ma działające rozwiązanie?
Ian S
168

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.

Włącz przesłonięcia

Noco
źródło
1
Aby odzwierciedlić tę aktualizację, poszedłem naprzód i oznaczyłem ją jako poprawną odpowiedź.
David Stinemetze
3
Karta Zastąpienia nie jest już dostępna w Chrome 36 (nie wiem, kiedy to zostało zmienione). Karta Emulacja jest domyślnie dostępna.
ebruchez
1
Czy to tylko ja, czy też opcja multimediów CSS zniknęła w Chrome 36? Teraz można wybrać tylko na podstawie konkretnego urządzenia mobilnego. AKTUALIZACJA: doh. Zgodnie z powyższymi instrukcjami, dosłownie trzeba kliknąć „Ekran”. Nie od razu wiadomo, że można ją kliknąć.
Ted
1
Jedyny problem, jaki znalazłem, teraz, gdy go używam, polega na tym, że tak naprawdę nie jest to, co Chrome drukuje. Jest to szczególnie widoczne w przypadku Bootstrap 3.x, w którym media będą używać grid-md, podczas gdy podgląd wydruku używa grid-sm
Sammaye
3
Chrome 39 znajduje się pod „multimediami”. musisz włączyć emulację urządzenia, klikając najpierw małą ikonę telefonu po lewej stronie górnego paska devtools, a następnie klikając 3 kropki w prawym górnym rogu emulatora urządzenia.
Danny Staple
73

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.

Alexander Pavlov
źródło
Miałem nadzieję, że to będzie prostsze, ale przypuszczam, że na razie będzie trzeba. Byłoby miło, gdyby ostatecznie zostało automatycznie wbudowane w jedno z narzędzi.
David Stinemetze
Kiedy będę miał okazję, będę musiał spróbować. Do tego czasu mogę po prostu trzymać się metody @ Jon-YYC.
David Stinemetze
Używam wersji 28 na komputerze Mac i nie widzę tej opcji ... ktoś jeszcze ma ten problem?
Aaron Hill,
2
@AaronHill Używam wersji 28 na komputerze Mac i nie mam z tym problemu. Chociaż być może nie wszedłeś do okna ustawień. Możesz to znaleźć, klikając ikonę koła zębatego w prawym dolnym rogu Inspektora Elementów.
David Stinemetze
2
Ta odpowiedź jest nieaktualna.
Flimm,
23

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

Wybór zakładki

Ustawienie wyboru

Halle Knast
źródło
20

Zobacz ten artykuł

Otwórz inspektora narzędzi chrome dev

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

Otwórz config / Settings

adardesign
źródło
3
Ta odpowiedź jest nieaktualna.
Flimm,
14

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.

Obraz opcji podglądu wydruku Chrome 49+ w Narzędziach programistycznych

NilsyNils
źródło
Czy masz źródło zaktualizowanych instrukcji DevTools? Mogę rozgryźć większość z nich, ale szukałem tego wszystkiego i mam wrażenie, że ukrywa się przede mną wiele nowych przydatnych funkcji.
Crystal Miller,
1
Najlepsze źródło, jakie znalazłem dla ogólnych informacji o narzędziach programistycznych, to developers.google.com/web/tools/chrome-devtools/?hl=pl . Bardzo podobało mi się też oglądanie aktualizacji najnowszej wersji w tym filmie: youtube.com/watch?v=dJR-n8szgBc .
NilsyNils,
7

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.

Kolor tła wydruku w Google Chrome jest ignorowany

Rosdi Kasim
źródło
6

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.

Chrome v51 Mac Na dole pojawi się selektor Emuluj media

Dziękuję wszystkim innym plakatom, które mnie do tego doprowadziły, i dziękuję tym, którzy udzielili odpowiedzi bez zdjęć.

użytkownik2182349
źródło
Niezależnie od tego, czy wybiorę opcję drukowania lub ekranu w opcji „Emuluj nośnik”, nadal drukuje z arkuszem stylów drukowania. Zamiast tego użyłem pełnego zrzutu ekranu. chrome.google.com/webstore/detail/full-page-screen-capture/…
niknah
4

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

zrzut ekranu 1

Jak uzyskać widok „ekranu” do wydrukowania: Gdy u dołu ekranu pojawi się okno renderowania, Emuluj CSS Media i wybierz z menu: „Ekran”.

zrzut ekranu 2

Mam nadzieję, że to pomoże.

Matt
źródło
4

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

    Zmień emulację typu nośnika za pomocą menu poleceń

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.

Kariem
źródło
1

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
Ben Richter
źródło