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

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

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

Сейчас я сосредоточен только на средстве предварительного просмотра, но было бы идеально, чтобы иметь возможность переключаться на любой из поддерживаемых типов носителей (т.е. все/шрифт Брайля/тиснение/карманный/печать/проекция/экран/речь/терминал/тв).

ОТВЕТЫ

Ответ 1

Примечание. Этот ответ охватывает несколько версий 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-носители и выберите "Печать" (3).

Chrome v46+ support

Chrome v43+:

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

Emulate print media query on Chrome v43

Chrome v42:

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

Emulate print media query on Chrome v42

Ответ 2

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

(В Chrome 35+ вкладка "Эмуляция" присутствует по умолчанию. Также консоль доступна из любой основной вкладки.)

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

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

Enable Overrides

Ответ 3

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

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

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

Ответ 4

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

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

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

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

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

Tab selection

Setting selection

Ответ 5

См. Эта статья

Open chrome dev tools inspector

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

Open config/Settings

Ответ 6

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

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

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

  3. Если "Рендеринг" еще не показывается, нажмите 3-точечный шашлык и выберите "Рендеринг".

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

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

Image of Chrome 49+ Print Preview option in Dev Tools

Ответ 7

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

Google Chrome Print background color ignored

Ответ 8

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

Chrome v51 MacEmulate media selector appears in the bottom

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

Ответ 9

Chrome v67 (mac):

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

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

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

.screenshot 1

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

screenshot 2

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

Ответ 10

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

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

    • Windows: F12 или Ctrl + Shift + I
    • Mac: Cmd + Opt + I

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

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

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

    Change Media Type Emulation Via Command Menu

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

Ответ 11

Chrome v50:

Способ 1:

  • Меню > Дополнительные инструменты > Настройки рендеринга (см. изображение)
  • Вниз: вкладка "Рендеринг" > "Эмуляция" "печать"

Способ 2:

  • Открыть консоль [esc]
  • Меню консоли > рендеринг

Ответ 12

Когда я изменяю настройки рендеринга, они не сохраняются?