Используете инспектор элементов Chrome в режиме предварительного просмотра?

Я работаю над разработкой веб-сайта, и мне нужно поработать в режиме печати. Обычно, когда у меня возникают проблемы с макетом, я использую инспектор элементов Chrome. Однако в режиме предварительного просмотра этого нет.

Есть ли плагин Chrome или какой-либо другой способ изменить среду просмотра в самом Chrome, чтобы просматривать страницу, как на принтере? Я полагаю, что это не специальное решение для Chrome, но это мой основной браузер, поэтому было бы неплохо иметь решение в браузере.

Прямо сейчас я сосредоточен только на носителе предварительного просмотра, но было бы идеально иметь возможность перейти на любой из поддерживаемых типов носителей (например, all / braille / embossed / handheld / print / projection / screen / speech / tty / телевидение).


google-chrome google-chrome-devtools web-inspector print-preview
person David Stinemetze    schedule 02.03.2012    source источник
comment
связанные: stackoverflow.com/questions/2452713/, stackoverflow.com/questions/726825/   -  person    schedule 05.12.2017

Ответы (11)


arrow_upward
1216
arrow_downward

Примечание. Этот ответ относится к нескольким версиям Chrome. Прокрутите, чтобы увидеть v52, v48, v46, v43 и v42 каждый со своими обновленными изменениями.

Chrome v52 +:

  • Откройте Инструменты разработчика (Windows: F12 или Ctrl + Shift + I, Mac: Cmd + Opt + I)
  • Нажмите кнопку гамбургер-меню Настройка и управление DevTools и выберите Дополнительные инструменты ›Параметры рендеринга (или Рендеринг в более новых версиях).
  • Установите флажок Эмулировать печатный носитель на вкладке Визуализация и выберите тип носителя Печать.

Chrome v52 +

Chrome v48 + (спасибо, Алекс, что заметил):

  • Откройте Инструменты разработчика (CTRL SHIFT I или F12)
  • Нажмите кнопку Переключить режим устройства в левом верхнем углу (CTRL SHIFT M).
  • Убедитесь, что консоль отображается, нажав Показать консоль в меню в (1) (клавиша ESC переключает консоль, если панель инструментов разработчика имеет фокус).
  • Установите флажок Эмулировать печатный носитель на вкладке рендеринга, которую можно открыть, выбрав Рендеринг в меню в (2).

Chrome v48 +

Chrome v46 +:

  • Откройте Инструменты разработчика (CTRL SHIFT I или F12)
  • Нажмите кнопку Переключить режим устройства в левом верхнем углу (1).
  • Убедитесь, что консоль отображается, нажав кнопку меню (2) ›Показать консоль (3) или нажав клавишу ESC для переключения консоли (работает только в том случае, если на панели инструментов разработчика есть фокус).
  • Откройте вкладки Эмуляция (4) ›Мультимедиа (5), установите флажок CSS media и выберите Печать (3).

Поддержка Chrome v46 +

Chrome v43 +:

  • Значок ящика на шаге 2 изменился.

Эмуляция медиа-запроса для печати в Chrome v43

Chrome v42:

  • Откройте Инструменты разработчика (CTRL SHIFT I или F12)
  • Нажмите кнопку Переключить режим устройства в левом верхнем углу (1).
  • Убедитесь, что ящик отображается, нажав кнопку Показать ящик (2) или нажав клавишу ESC, чтобы переключить ящик.
  • В разделе Эмуляция ›Медиа установите флажок CSS media и выберите печать (3).

Эмуляция медиа-запроса для печати в Chrome v42

person lmeurs    schedule 30.04.2015
comment
Я могу подтвердить это, поэтому я сделал это утвержденным ответом. Я не уверен, почему они продолжают настаивать на переносе его каждые несколько выпусков. - person David Stinemetze; 30.04.2015
comment
К сожалению, в v46.0.2490.80 он в значительной степени сломан, неправильно его применяет (частично применяет), когда вы не эмулируете какое-то устройство. Похоже, нужно иметь возможность включить эмуляцию мультимедиа, не пропуская кроличью нору эмуляции мобильных устройств, линейок и тому подобного. - person T.J. Crowder; 07.11.2015
comment
Больше не могу найти его в Chrome 48 - person Alex; 06.02.2016
comment
Нашли его в Chrome 48, но они переместили его снова: перейдите к рендерингу в ящике, установите флажок «Эмулировать печатный носитель». - person Olemak; 06.02.2016
comment
Эти частые изменения - самое глупое, что я когда-либо видел в Google! Такая трата моего времени. - person isapir; 05.04.2016
comment
Все еще работает в V51, но вам не нужно переключать режим устройства. Параметры рендеринга доступны всегда. - person DanielH; 14.06.2016
comment
Обратите внимание, что иногда Chrome скрывает содержимое ПОД нижним меню. Вам нужно перетащить эту панель (на которой есть слова «Рендеринг» и «Консоль») вверх с помощью мыши, чтобы открыть те настройки («Эмуляция печатных носителей» и т. Д.), Которые вы видите под ними. - person sameers; 03.08.2016
comment
Даже в новейшей версии Chrome иногда кажется, что страница остается в режиме печати даже после того, как вы сняли флажок. Не уверен, какая именно комбинация событий вызвала это, но я открыл предварительный просмотр и вернулся. - person trysis; 03.10.2016
comment
Это не гамбургер-меню, это меню шашлыка twitter.com/lukew/status/591296890030915585 - ура, загадочное мясо! - person Erics; 02.12.2016
comment
Кажется, что свойство css: page-break-before не поддерживается этим эмулятором. - person harryfeng; 09.05.2017
comment
К сожалению, это не всегда имитирует то же самое, что показывает предварительный просмотр печати, поэтому не очень удобен для отладки. Тем не менее, это полезно для того, чтобы увидеть, что такое общий макет и стили. - person Confuzing; 11.10.2017
comment
Этот эмулятор печати совершенно бесполезен. Он не эмулирует страницу должным образом, так как то, что вы видите в браузере, будет совсем не похоже на то, что вы видите в предварительном просмотре печати. У кого-нибудь есть рабочее решение? - person Ian S; 16.11.2017
comment
@imueurs, вы можете снова обновить скриншоты, поскольку флажка больше нет. - person grappler; 24.11.2017
comment
Спасибо! Прекрасное описание! - person Arerrac; 18.07.2018
comment
Я также обнаружил, что стили эмулятора ведут себя более желательно, чем фактический предварительный просмотр печати (Windows 10 Pro) - я бы хотел, чтобы он выглядел так, как это отображал эмулятор! - person user1063287; 30.10.2018

arrow_upward
168
arrow_downward

Изменено в Chrome 32 35+

(В Chrome 35+ вкладка «Эмуляция» присутствует по умолчанию. Кроме того, консоль доступна из любой основной вкладки.)

  1. В DevTools перейдите в настройки-> Переопределения
  2. включить "Показать представление эмуляции в панели консоли"
  3. Закройте настройки, перейдите на вкладку «Элементы»
  4. Нажмите Esc, чтобы открыть консоль.
  5. Выберите вкладку «Эмуляция», нажмите «Экран»
  6. Прокрутите вниз до «CSS Media», выберите «печать».

Эта опция (пока?) недоступна на вкладке консоли.

Включить переопределения

person Noco    schedule 16.01.2014
comment
Чтобы отразить это обновление, я пошел дальше и пометил это как правильный ответ. - person David Stinemetze; 11.02.2014
comment
Вкладки «Переопределения» больше нет в Chrome 36 (я не знаю, когда это было изменено). Вкладка «Эмуляция» присутствует по умолчанию. - person ebruchez; 18.04.2014
comment
Вам не нужно переключаться на панель «Элементы», чтобы открыть ящик с помощью Esc. Это работает на любой панели. По сути. - person Alexander Pavlov; 18.04.2014
comment
Это только у меня или в Chrome 36 нет опции мультимедиа CSS? Теперь можно выбирать только для конкретного мобильного устройства. ОБНОВЛЕНИЕ: дох. Согласно приведенным выше инструкциям, буквально нужно нажать на Экран. Не сразу очевидно, что это кликабельно. - person Ted; 13.08.2014
comment
Единственная проблема, которую я обнаружил, теперь, когда я его использую, заключается в том, что на самом деле это не то, что выводит Chrome. Это особенно очевидно с Bootstrap 3.x, где носитель будет использовать grid-md, тогда как предварительный просмотр печати использует grid-sm. - person Sammaye; 24.10.2014
comment
Chrome 39 находится под медиа. вы должны включить эмуляцию устройства, сначала щелкнув маленький значок телефона слева от верхней панели инструментов разработчика, а затем щелкнув 3 точки в правом верхнем углу эмулятора устройства. - person Danny Staple; 29.12.2014
comment
Включение эмуляции и установка типа носителя для меня ничего не дает. Я вижу CSS для типа мультимедиа на экране, что совершенно не похоже на то, что я вижу в предварительном просмотре печати. - person David Given; 05.04.2015
comment
Я выполнил вышеуказанные шаги, когда открывается экран предварительного просмотра печати, я проверяю элемент, и теперь открывается другое окно Chrome, как мне отразить изменения на экране предварительного просмотра печати с помощью изменений css? - person Muneem Habib; 25.06.2015
comment
Этот ответ устарел. - person Flimm; 19.01.2017

arrow_upward
73
arrow_downward

Начиная с Chrome 32 у вас есть опция CSS media в разделе Screen вкладки Emulation ящика.

Просто включите его, выберите print в качестве целевого типа носителя, и вот ваша страница отображается [почти] так, как будет напечатана.

Используйте Esc, чтобы открыть ящик, если он не виден.

person Alexander Pavlov    schedule 09.03.2012
comment
Я надеялся, что это будет проще, но полагаю, что пока придется. Было бы неплохо, если бы это в конечном итоге было автоматически встроено в один из инструментов. - person David Stinemetze; 14.03.2012
comment
Когда у меня будет возможность, мне придется попробовать. Я могу просто придерживаться метода @Jon-YYC до тех пор. - person David Stinemetze; 27.12.2012
comment
Я использую версию 28 на Mac и не вижу этой опции ... у кого-нибудь еще есть эта проблема? - person Aaron Hill; 19.07.2013
comment
@AaronHill Я использую версию 28 на Mac, и у меня с ней нет проблем. Хотя, возможно, вы вообще не попали в диалог настроек. Вы можете найти его, щелкнув значок шестеренки в правом нижнем углу Element Inspector. - person David Stinemetze; 05.08.2013
comment
Этот ответ устарел. - person Flimm; 19.01.2017

arrow_upward
24
arrow_downward

Что касается Chrome 48 (и, возможно, нескольких версий ранее), функция, похоже, снова переместилась:

Первые несколько шагов остались без изменений:

  1. Нажмите F12, чтобы открыть инструменты разработчика.

  2. Нажмите ESC, чтобы открыть консоль.

Согласно предыдущим ответам, настройку можно было найти на вкладке «Эмуляция». Как показано на изображениях ниже, теперь он перемещен на вкладку «Рендеринг», которую можно вызвать, щелкнув три точки слева от вкладки «Консоль».

«Выбор

«Выбор

person Halle Knast    schedule 27.01.2016

arrow_upward
20
arrow_downward

См. эту статью

Откройте инспектор инструментов Chrome для разработчиков

Затем перейдите на вкладку переопределений

Открыть config / Settings

person adardesign    schedule 26.02.2013
comment
Этот ответ устарел. - person Flimm; 19.01.2017

arrow_upward
14
arrow_downward

Начиная с Chrome 48+, вы можете получить доступ к предварительному просмотру печати, выполнив следующие действия:

  1. Откройте инструменты разработчика - Ctrl / Cmd + Shift + I или щелкните страницу правой кнопкой мыши и выберите «Проверить».

  2. Нажмите Esc, чтобы открыть дополнительный ящик.

  3. Если «Рендеринг» еще не отображается, щелкните трехточечный кебаб и выберите «Рендеринг».

  4. Установите флажок «Эмулировать печатный носитель».

Оттуда Chrome покажет вам версию вашей страницы для печати, и вы сможете проверить элемент и устранить неполадки, как и версию браузера.

Изображение варианта предварительного просмотра печати Chrome 49+ в инструментах разработчика

person NilsyNils    schedule 23.11.2015
comment
У вас есть источник обновленных инструкций DevTools? Я могу понять большинство из них, но я искал это повсюду, и мне кажется, что есть много полезных новых функций, которые скрываются от меня. - person Crystal Miller; 02.12.2015
comment
Лучший источник общей информации об инструментах разработки, который я нашел, - это developers.google. com / web / tools / chrome-devtools /? hl = ru. Мне также очень понравилось смотреть обновления последней версии в этом видео: youtube.com/watch ? v = dJR-n8szgBc. - person NilsyNils; 03.12.2015

arrow_upward
7
arrow_downward

Если вы отлаживаете свой CSS с помощью функции «Печать как PDF» в Google Chrome и цвета фона элементов CSS не отображаются, убедитесь, что установлен флажок «Фоновая графика». Я потратил почти 30 минут на отладку своего CSS и задавался вопросом, почему игнорируется мой фон CSS.

Цвет фона печати Google Chrome игнорируется

person Rosdi Kasim    schedule 18.10.2015

arrow_upward
6
arrow_downward

В Chrome v51 на Mac я нашел настройки рендеринга, щелкнув в правом верхнем углу, выбрав «Дополнительные инструменты»> «Настройки рендеринга» и нажав кнопку «Эмулировать медиа» в параметрах, предлагаемых в нижней части окна.

Chrome v51 MacСелектор эмуляции мультимедиа появляется внизу

Спасибо всем другим плакатам, которые привели меня к этому, и благодарность тем, которые предоставили ответ без изображений.

person user2182349    schedule 27.05.2016
comment
Независимо от того, выберу ли я печать или экран в эмуляционном носителе, он все равно будет печатать с таблицей стилей печати. Вместо этого я использовал расширение для полного скриншота страницы. chrome.google.com/webstore/detail/full-page- снимок экрана / - person niknah; 21.02.2019

arrow_upward
5
arrow_downward

С доступными ярлыками самый быстрый способ -

  1. Откройте Инструменты разработчика

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

  2. Откройте меню команд

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

  3. Введите print и выберите Эмулировать тип мультимедиа для печати CSS в контекстном меню.

    «Изменить

Глядя на превосходный и получивший наибольшее количество голосов ответ lmeurs, я думаю, что это решение также может оставаться стабильным с течением времени.

person Kariem    schedule 25.04.2019
comment
То же самое через графический интерфейс DevTools: Меню - ›Дополнительные инструменты -› Рендеринг. См. Вкладку «Рендеринг» и прокрутите вниз до раскрывающегося списка «Эмуляция типа мультимедиа CSS». - person user297500; 11.12.2020

arrow_upward
4
arrow_downward

Chrome v67 (mac):

  1. Удерживайте Cmd + opt + j, чтобы открыть инструменты разработчика.
  2. щелкните ... справа и выберите: Дополнительные инструменты >> Рендеринг.
  3. Когда в нижней части экрана появится окно «Рендеринг», перейдите в раздел «Эмуляция CSS Media» и выберите «Экран» в раскрывающемся списке.
  4. Перейдите в «Файл >> Печать», и вы должны увидеть вид, который хотите распечатать.

Изображения приведенного выше описания для Chrome v67 на Mac:

Где найти вкладку «Рендеринг»: нажмите ... справа и выберите: «Дополнительные инструменты» >> «Рендеринг».

скриншот 1

Как получить "экранный" вид для печати: Когда в нижней части экрана появляется окно рендеринга, перейдите в раздел «Эмуляция CSS Media» и выберите «Экран» в раскрывающемся списке.

скриншот 2

Надеюсь, это поможет.

person Matt    schedule 15.06.2018

arrow_upward
1
arrow_downward

Chrome версии 50:

Способ 1:

  1. Меню> Дополнительные инструменты> Настройки рендеринга (см. Изображение)
  2. Вниз: вкладка «Рендеринг»> «Эмулировать медиа-печать».

Способ 2:

  1. Открыть консоль [esc]
  2. Меню консоли> рендеринг
person Ben Richter    schedule 11.05.2016