Używanie Inspektora elementów Chrome w trybie podglądu wydruku?

Pracuję nad stworzeniem strony internetowej i muszę pracować nad widokiem drukowania. Zazwyczaj, gdy mam problemy z układem, używam Inspektora elementów Chrome. Nie ma to jednak miejsca w trybie podglądu wydruku.

Czy istnieje Wtyczka Chrome lub inny sposób na zmianę nośnika wyświetlania w samym chrome, aby wyświetlić stronę tak,jak drukarka? Przypuszczam, że nie ma konkretnego rozwiązania Chrome, ale to jest moja podstawowa przeglądarka, więc byłoby miło mieć w przeglądarce rozwiązanie.

W tej chwili skupiam się tylko na nośniku podglądu wydruku, ale byłoby idealne, aby móc zmienić na dowolny z obsługiwanych typów nośników (tj. wszystkie/braille/tłoczone/handheld/print/projection/screen/speech/tty/tv).

Author: Flimm, 2012-03-02
Source

11 answers

Uwaga: Ta odpowiedź dotyczy kilku wersji Chrome, przewiń, aby zobaczyć v52, v48, v46, v43 i V42 każdy z ich zaktualizowanymi zmianami.

Chrome v52+:

  • Otwórz Narzędzia programistyczne (Windows: F12 lub Ctrl+Shift+i, Mac: Cmd+Opt+I )
  • Kliknij przycisk Customize and control DevTools hamburger menu i wybierz Więcej narzędzi > ustawienia renderowania (lub Rendering w nowszych wersjach).
  • zaznacz pole wyboru Emuluj nośnik wydruku na karcie Rendering i wybierz typ nośnika Print .

Chrome v52+

Chrome v48+ (dzięki Alex za Zauważenie):

  • Otwórz Narzędzia programistyczne (CTRLSHIFTI lub F12 )
  • Kliknij przycisk Przełącz tryb urządzenia W lewy górny róg (CTRLSHIFTM ).
  • upewnij się, że konsola jest wyświetlana, klikając Pokaż konsolę w menu w (1) ( ESC klawisz włącza konsolę, jeśli pasek narzędzi programisty ma focus).
  • zaznacz Emuluj nośnik wydrukuna karcie renderowania, którą można otworzyć wybierając renderowanie w menu w (2).

Chrome v48+

Chrome v46+:

  • Otwórz Narzędzia programistyczne (CTRLSHIFTI lub 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) > Show console (3) lub naciskając klawisz ESC, aby włączyć konsolę (działa tylko wtedy, gdy pasek narzędzi programisty ma fokus).
  • otwórz zakładkę Emulacja (4) > Media (5) , sprawdź CSS media i wybierz print (3).

Chrome V46 + wsparcie

Chrome v43+:

  • ikona szuflady w Kroku 2 została zmieniona.

Emuluj Zapytanie o media drukowania w Chrome v43

Chrome v42:

  • Otwórz Narzędzia programistyczne (CTRLSHIFTI lub 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 ESC klucz do przełączania szuflady.
  • Pod Emulacja > Media sprawdź CSS media i wybierz print (3).

Emuluj Zapytanie o media drukowania w Chrome v42

 1196
Author: lmeurs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55

Zmieniony w Chrome 32 35+

(w Chrome 35 + domyślnie występuje zakładka "Emulacja". Ponadto konsola jest dostępna z dowolnej karty podstawowej.)

  1. w DevTools przejdź do Ustawienia - > nadpisuje
  2. Włącz "Pokaż Widok emulacji w szufladzie konsoli"
  3. Zamknij ustawienia, przejdź do zakładki "Elementy"
  4. Naciśnij Esc aby wywołać konsolę
  5. wybierz zakładkę "Emulacja", kliknij "Ekran"
  6. przewiń w dół do "CSS Media", wybierz "Drukuj"

Ta opcja nie jest (jeszcze?) dostępne w zakładce konsola.

Włącz Przesłonięcia

 168
Author: Noco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-30 20:00:39

Od Chrome 32 masz opcję CSS media w sekcji Screen w zakładce Emulation szuflady.

Po prostu ją włącz, wybierz print jako docelowy typ nośnika i-oto-Twoja strona zostanie renderowana [prawie] w sposób, w jaki zostanie wydrukowana.

Użyj Esc , aby podnieść szufladę, jeśli nie jest widoczna.

 73
Author: Alexander Pavlov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-18 15:32:24

Od Chrome 48 (i być może kilka wersji wcześniej), funkcja wydaje się być przesunięta po raz kolejny:

Pierwsze kroki pozostają bez zmian:

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

  2. Naciśnij ESC , aby otworzyć konsolę

Zgodnie z poprzednimi odpowiedziami, ustawienie można znaleźć w zakładce "Emulacja". Jak pokazano na poniższych zdjęciach, został on teraz przeniesiony do zakładki "Rendering" , która może być wywołane przez kliknięcie na trzy kropki po lewej stronie zakładki "konsola".

Wybór karty

Wybór ustawień

 23
Author: Halle Knast,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-15 19:54:19

Zobacz Ten artykuł

Otwórz chrome dev tools inspector

Następnie przejdź do zakładki "overrides"

Otwórz config / Settings

 20
Author: adardesign,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55

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

  1. Otwórz Narzędzia dev- Ctrl / Cmd + Shift + I lub kliknij prawym przyciskiem myszy na stronie i wybierz "Inspect".

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

  3. Jeśli 'Rendering' nie jest już wyświetlany, kliknij 3 kropkę i wybierz 'rendering'.

  4. Zaznacz pole wyboru "Emuluj media drukowane".

Stamtąd Chrome wyświetli wersję drukowaną strony, a Ty możesz sprawdzić element i rozwiązywać problemy, tak jak w wersji przeglądarki.

Obraz Chrome 49 + opcja podglądu wydruku w Dev Tools

 14
Author: NilsyNils,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-15 19:55:09

Jeśli debugujesz swój CSS za pomocą Print As PDF w Google Chrome, a kolory tła elementu CSS nie są widoczne, upewnij się, że pole wyboru "Grafika w tle" jest zaznaczone. Spędziłem prawie 30 minut debugowania mojego CSS i zastanawiając się, co powoduje, że moje tło CSS jest ignorowane.

Kolor tła wydruku Google Chrome ignorowany

 7
Author: Rosdi Kasim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-18 06:27:56

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 media w opcjach oferowanych na dole okna.

Chrome V51 MacW dolnej części wyświetlony jest selektor nośników emulacji

Dziękuję wszystkim innym plakatom, które mnie do tego DOPROWADZIŁY, i podziękowania dla tych, którzy udzielili odpowiedzi bez obrazów.

 6
Author: user2182349,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-27 12:51:05

Z dostępnymi skrótami, najszybszym sposobem jest

  1. Otwórz Narzędzia programistyczne

    • Windows: F12 lub Ctrl+Shift+I
    • Mac: Cmd+Opt+I

  2. Otwórz menu poleceń

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

  3. Wpisz print i wybierz Emuluj typ nośnika druku CSS z menu kontekstowego

    Zmień Emulację Typu Nośnika Za Pomocą Menu Poleceń

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

 5
Author: Kariem,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-25 06:29:59

Chrome v67 (mac):

  1. przytrzymaj Cmd+opt + j , aby otworzyć narzędzia dev
  2. Kliknij ... po prawej stronie i wybierz: Więcej narzędzi > > Rendering
  3. gdy okno renderowania pojawi się u dołu ekranu, Emuluj sekcję multimediów CSS i wybierz z listy rozwijanej: "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ładka Rendering: kliknij ... po prawej stronie i wybierz: Więcej narzędzi > > Rendering

zrzut ekranu 1

Jak wydrukować widok "screen": gdy okno renderowania pojawi się u dołu ekranu, Emuluj sekcję multimediów CSS i wybierz: "Screen" z listy rozwijanej.

zrzut ekranu 2

Mam nadzieję, że to pomoże.
 4
Author: Matt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-15 11:17:09

Chrome v50:

Sposób 1:

  1. Menu > Więcej narzędzi > ustawienia renderowania (patrz zdjęcie)
  2. dół: Karta renderowania > Emuluj media "Drukuj"

Sposób 2:

  1. otwórz Konsolę [esc]
  2. menu konsoli > rendering
 1
Author: Ben Richter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-11 15:28:29