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

Question

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

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

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

Answer 1

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

Chrome v52 +:

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

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

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

Chrome v46 +:

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

Chrome v43 +:

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

Chrome v42:

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

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

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

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

Answer 5

Пожалуйста, смотрите Эта статья

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

Answer 6

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

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

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

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

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

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

Answer 7

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

Answer 8

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

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

Answer 9

Chrome v67 (mac):

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

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

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

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

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

Answer 10

При наличии ярлыков самый быстрый способ -

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

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

2. Открыть Меню команд

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

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

   

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