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

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

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

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

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

Chrome v52+:
============

* открыть *Инструменты Разработчика* (Windows:`F12` или  `Ctrl`+ `Shift`+`я`, Mac:  `Cmd`+ `Opt`+`я`)
* выберите  *настройка и управление DevTools* кнопка меню гамбургера и выберите  на *перевода* вкладка и выберите *печати* СМИ тип.

[![Chrome v52+](/images/content/9540990/f3db4ec471fa221e0e8e1004e9a996bd.png)](https://i.stack.imgur.com/7BCx7.png)

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

* откройте инструменты разработчика ( `CTRL` `SHIFT``я` или `F12`)
* выберите *переключить устройство в режим* кнопка в левом верхнем углу ( `CTRL` `SHIFT``M`).
* убедитесь, что консоль выводится нажатием *показать консоль* в меню в (1) ( `ESC` клавиша переключает консоль, если панель имеет фокус).
* Регистрация *эмуляция печатных носителей* на вкладке рендеринга, которую можно открыть, выбрав *перевода* в меню в (2).

[![Chrome v48+](/images/content/9540990/445c4ee637c7b4c09f89d4b59e77e3dc.png)](https://i.stack.imgur.com/ClmyX.png)

Chrome v46+:
============

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

[![Chrome v46+ support](/images/content/9540990/346b5c04baf289ebbb8f7e2f6415d95a.png)](https://i.stack.imgur.com/Gyoil.png)

Chrome v43+:
============

* значок ящика на Шаге 2 изменился.

![Emulate print media query on Chrome v43](/images/content/9540990/4a045068899dd393f0eceede0463fa7b.png)

Chrome v42:
===========

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

![Emulate print media query on Chrome v42](/images/content/9540990/06df7464fb511f96be966498933f0862.png)



 изменено в Chrome 32 35+
-------------------------

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

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

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

![Enable Overrides](/images/content/9540990/d6dd23f6666cc4a25b3879ccf3545ee3.jpg)



С Chrome 32 у вас есть на раздела `Emulation` tab.

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

![](/images/content/9540990/1a999163e37c96985e99a5b56ab57adb.png)

использовать `Esc` чтобы поднять ящик, если его не видно.



см. [в этой статье](http://tjvantoll.com/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/)

![Open chrome dev tools inspector](/images/content/9540990/0e43b18a5a183f2422477ad1ad7d0339.png)

Гото "перекрывает вкладку"

![Open config/Settings](/images/content/9540990/ab9a129c83774d13a52e2a96900687d0.png)



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

первые несколько шагов остаются неизменными:

1. пресс `F12` чтобы поднять инструменты разработчика
2. пресс `ESC` открыть консоль

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

[![Tab selection](/images/content/9540990/ecad026002b1450f06a2b37765414973.png)](https://i.stack.imgur.com/96yVn.png)

[![Setting selection](/images/content/9540990/d343f50713b3c5c1222e1cb0c8986ddc.png)](https://i.stack.imgur.com/pgRuP.png)



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

1. открыть dev tools -`Ctrl / Cmd` + `Shift` + `Я` или щелкните правой кнопкой мыши на странице и выбрать "инспекции".
2. нажмите `Esc` открыть дополнительный ящик.
3. Если "рендеринг" еще не отображается, нажмите 3 dot kebab и выберите "рендеринг".
4. установите флажок "эмулировать печатные носители".

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

![Image of Chrome 49+ Print Preview option in Dev Tools](/images/content/9540990/4186c812d870f95f4ff2d93db8196880.jpg)



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

![Chrome v51 Mac](/images/content/9540990/adf8c18871f454dc42755d6e8794818a.png)![Emulate media selector appears in the bottom](/images/content/9540990/904da9ef3b52909aa3141bfd7eee3bab.png)

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



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

[![Google Chrome Print background color ignored](/images/content/9540990/7869481aaee9664b83a4ac84efa54c09.png)](https://i.stack.imgur.com/OJ93g.png)



 Chrome v67 (mac):

1. удерживая `Cmd+opt+j` чтобы открыть dev tools
2. выберите `...` справа и выберите: Дополнительные инструменты > > рендеринг
3. когда появится окно рендеринга в нижней части экрана, эмулируйте раздел css Media и выберите:" экран " из раскрывающегося списка.
4. перейдите в "файл > > печать", и вы увидите представление, которое хотите распечатать.

изображения выше описание Chrome v67 на mac:

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

![screenshot 1](/images/content/9540990/027abfe6fc1a86d0ec6d23b9a84315cd.png)

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

![screenshot 2](/images/content/9540990/061121e3261a19918031a109949aa627.png)

надеюсь, что это помогает.



 **Chrome v50:**

Способ 1: 

1. меню > Дополнительные инструменты > настройки рендеринга 
[(см. рисунок)](https://i.stack.imgur.com/ZBLD3.jpg)
2. вниз: вкладка рендеринга > эмулировать носитель "печать"

Способ 2:

1. открыть консоль [esc]
2. консоль "меню" > перевода