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

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

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

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

Chrome v52 +:

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

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

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

Chrome v46 +:

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

Chrome v43 +:

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

Chrome v42:

• Откройте Инструменты разработчика ( CTRLSHIFTIили F12)
• Нажмите кнопку переключения режима устройства в левом верхнем углу (1).
• Убедитесь, что ящик отображается, нажав кнопку Показать ящик (2) или нажав ESCклавишу, чтобы включить ящик.
• Под Emulation> Media проверьте CSS media и выберите print (3).

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

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

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

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

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

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

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

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

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

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

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

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

Пожалуйста, смотрите эту статью

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

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

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

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

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

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

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

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

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

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

Chrome v67 (mac):

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

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

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

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

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

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

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

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

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

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

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

   

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

Chrome v50:

Способ 1:

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

Способ 2:

1. Открытая консоль [esc]
2. Консольное меню> Рендеринг