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

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

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

   • Окна: Ctrl+Shift+P
   • Mac: Cmd+Shift+P

3. Тип printи выберите в контекстном меню Emulate CSS print media type.

   

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

Answer 5

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

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

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

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

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

Answer 6

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

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

Answer 7

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

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

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

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

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

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

Answer 8

Chrome v67 (mac):

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

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

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

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

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

Answer 9

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

Answer 10

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

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

Answer 11

Chrome v50:

Способ 1:

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

Способ 2:

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