Использование инспектора элементов Chrome в режиме предварительного просмотра?
Я работаю над разработкой веб-сайта и должен работать над представлением печати. Обычно, когда у меня есть проблемы с макетом, я использую инспектор элементов Chrome. Однако это не существует в режиме предварительного просмотра.
есть ли плагин Chrome или какой-либо другой способ изменить свой носитель просмотра в самом chrome, чтобы просмотреть страницу как принтер? Я полагаю, что у него нет специального решения для Chrome, но это мой основной браузер, поэтому было бы неплохо иметь в браузере решение.
сейчас я сосредоточен только на средстве предварительного просмотра печати, но было бы идеально, чтобы иметь возможность перейти на любой из поддерживаемых типов носителей (т. е. все/Брайль/тиснение/ручной/печать/проекция/экран/речь/tty/tv).
10 ответов:
Примечание: этот ответ охватывает несколько версий Chrome, прокрутите, чтобы увидеть v52,v48,v46,v43 и v42 каждый со своими изменениями.
Chrome v52+:
- открыть Инструменты Разработчика (Windows:F12 или Ctrl+ Shift+я, Mac: Cmd+ Opt+я)
- выберите настройка и управление DevTools кнопка меню гамбургера и выберите на перевода вкладка и выберите Print СМИ тип.
Chrome v48+ (спасибо Алекс за внимание):
- откройте инструменты разработчика (CTRL SHIFTя или F12)
- выберите переключить устройство в режим кнопка в левом верхнем углу (CTRL SHIFTM).
- убедитесь, что консоль отображается, нажав кнопку показать консоль в меню в (1) ( ESC клавиша переключает консоль, если панель имеет фокус).
- Регистрация эмуляция печатных носителей на вкладке рендеринга, которую можно открыть, выбрав перевода в меню в (2).
Chrome v46+:
- откройте инструменты разработчика (CTRL SHIFTя или F12)
- выберите переключить устройство в режим в левом верхнем углу (1).
- убедитесь, что консоль отображается, нажав кнопку Меню (2)>показать консоль (3) или нажав ESC клавиша для переключения консоли (работает только тогда, когда панель инструментов разработчика имеет фокус).
- открыть Эмуляция (4) > Носитель (5) вкладки, проверить CSS media и выберите print (3).
Chrome v43+:
- значок ящика на Шаге 2 изменился.
Chrome v42:
- откройте инструменты разработчика (CTRL SHIFTя или F12)
- выберите переключить устройство в режим в левом верхнем углу (1).
- сделать убедитесь, что ящик отображается, нажав кнопку показать ящик кнопка (2) или нажатие кнопки ESC ключ для переключения ящика.
- под Эмуляция > СМИ Регистрация CSS media и выберите print (3).
изменено в Chrome
3235+(в Chrome 35+ вкладка "эмуляция" присутствует по умолчанию. Кроме того, консоль доступна на любой основной вкладке.)
в DevTools, перейдите в настройки-> переопределяетвключить "показать вид эмуляции в ящике консоли"закрыть настройки, перейти на вкладку 'элементы'- нажмите Esc воспитывать консоль
- выберите вкладку "эмуляция", нажмите кнопку"экран"
- прокрутите вниз до "CSS Media", выберите "print"
этой опции нет (пока?) доступно на вкладке консоли.
С Chrome 32 у вас есть на раздела
Emulationtab.просто включите его, выберите
использовать Esc чтобы поднять ящик, если он не виден.
см. в этой статье
затем перейдите на вкладку "переопределения"
начиная с Chrome 48 (и, возможно, несколькими версиями ранее), функция, похоже, снова переместилась:
первые несколько шагов остаются неизменными:
пресс F12 чтобы вызвать инструменты разработчика
пресс ESC открыть консоль
согласно предыдущим ответам, настройка может быть найдена на вкладке "эмуляция". Как показано на изображениях ниже, он имеет теперь был перемещен на вкладку "рендеринг", который можно вызвать, нажав на три точки слева от вкладки" консоль".
начиная с Chrome 48+, вы можете получить доступ к предварительному просмотру печати с помощью следующих шагов:
Open dev tools -Ctrl / Cmd + Shift + Я или щелкните правой кнопкой мыши на странице и выбрать "инспекции".
нажмите Esc открыть дополнительный ящик.
Если "рендеринг" еще не показывается, нажмите 3 dot kebab и выберите "рендеринг".
установите флажок "эмулировать печатные носители".
оттуда Chrome покажет вам печатную версию вашей страницы, и вы можете проверить элемент и устранить неполадки, как и в версии браузера.
в Chrome v51 на Mac я нашел настройки рендеринга, щелкнув в правом верхнем углу, выбрав "дополнительные инструменты" > "настройки рендеринга" и проверив кнопку "эмулировать медиа" в параметрах, предлагаемых в нижней части окна.
спасибо всем другим плакатам, которые привели меня к этому, и кредит тем, которые предоставили ответ без изображений.
Если вы отлаживаете свой CSS с помощью Print As PDF в Google Chrome и ваши цвета фона элемента CSS не отображаются, то убедитесь, что флажок "фоновая графика" установлен. Я потратил почти 30 минут на отладку своего CSS и задавался вопросом, что вызывает игнорирование моего фона CSS.
Chrome v67 (mac):
- удерживая Cmd + opt+j чтобы открыть dev tools
- выберите
...на правой стороне, и выберите: Дополнительные инструменты > > рендеринг- когда окно рендеринга появится в нижней части экрана, эмулируйте раздел css Media и выберите: "экран" из выпадающего списка.
- перейдите в "файл >> печать", и вы должны увидеть вид, который вы хотите распечатать.
изображения из приведенного выше описания для Chrome v67 на mac:
где найти вкладку рендеринга: Нажмите кнопку
...на правой стороне, и выберите: Дополнительные инструменты > > рендеринг
Как получить вид" Экран "для печати: когда окно рендеринга появляется в нижней части экрана, эмулировать раздел CSS Media и выберите:" экран " из выпадающего списка.
надеюсь, что это помогает.
Chrome v50:
Способ 1:
- меню > Дополнительные инструменты > настройки рендеринга (см. рисунок)
- вниз: вкладка рендеринга > эмулировать медиа "печать"
Способ 2:
- открыть консоль [esc]
- консоль "меню" > перевода
