Более быстрый способ разработки и тестирования таблиц стилей печати (каждый раз избегайте предварительного просмотра)?

Ответ 1

Вы можете использовать Chrome Эмуляция типа мультимедиа, как принято в сообщении См. печать css в браузере.

ОБНОВЛЕНИЕ 21/11/2017

Обновленный документ DevTools можно найти здесь: Просмотр страницы в режиме печати.

Чтобы просмотреть страницу в режиме печати:
 1. Откройте Меню команд. (tl; dr Cmd+Shift+P (Mac) или Ctrl+Shift+P (Windows, Linux))
 2. Начните вводить Rendering и выберите Show Rendering.
 3. В раскрывающемся списке Эмуляция CSS Media выберите распечатать.

ОБНОВЛЕНИЕ 29/02/2016

Документы DevTools перемещены, а ссылка выше содержит неточную информацию. Обновленные документы о эмуляции типа мультимедиа можно найти здесь: Предварительный просмотр стилей для других типов мультимедиа.

Откройте ящик эмуляции DevTools, щелкнув значок Больше переопределений и бычков; & bull; & bull;, в верхнем правом углу окна просмотра браузера. Затем выберите Медиа в ящике эмуляции.

ОБНОВЛЕНИЕ 12/04/2016

К сожалению, похоже, что документы не были обновлены в отношении эмуляции печати. Тем не менее, эмулятор печати печати перемещается (снова):

• Откройте Chrome DevTools
• Нажмите esc на клавиатуре.
• Нажмите ⋮ (вертикальный эллипс)
• Выберите Рендеринг
• Тик Эмуляция печатных носителей

Смотрите снимок экрана ниже:

ОБНОВЛЕНИЕ 28/06/2016

Документы Google Developers для Chrome DevTools и опция "Эмуляция медиа" были обновлены для Chrome > 51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

Чтобы просмотреть страницу в режиме предварительного просмотра, откройте главное меню DevTools, выберите Дополнительные инструменты > Настройки рендеринга, а затем включите эмуляционный носитель strong > с выпадающим меню, установленным на печать.

ОБНОВЛЕНИЕ 24/05/2016

Именование настроек изменилось еще раз:

Чтобы просмотреть страницу в режиме предварительного просмотра, откройте главное меню DevTools, выберите Дополнительные инструменты > Рендеринг, а затем включите Emulate CSS Media с выпадающим меню, установленным на печать.

Ответ 2

В Firefox вы можете ввести Shift+F2, чтобы открыть командную строку панели инструментов разработчика, а затем введите media emulate print

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

Ответ 3

Firefox + Расширение панели инструментов веб-разработчика позволяет включить/отключить различные таблицы стилей.

Посмотрите в меню CSS. Существует меню для отключения и включения отдельных таблиц стилей и меню "Отображать по типу мультимедиа".

Кроме того, чтобы просто уменьшить шаги, чтобы перейти к PrintPreview в Firefox, попробуйте расширение PrintPreview, которое создаст кнопку на панели инструментов.

Для Chrome существует порт этого расширения. Из того, что я могу сказать с помощью версии Chrome, вы можете выбрать "Показать стили печати"

Ответ 4

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

В Chrome control+p немедленно отправляется на печать. (Просто забудьте о том, чтобы вывести вашу панель меню). Это довольно легко.

Ответ 5

Вы можете просто отключить стили экрана и изменить тип носителя на "экран" для своей таблицы стилей печати во время тестирования. Это будет не совсем то же самое, что использовать реальный предварительный просмотр (разрывы страниц, ширину документа и т.д.), Но это все равно дает вам неплохую идею.

Ответ 6

простой для меня (не имеющий @screen частей или подобных ¹) с FF:

• добавьте часть @media print { ... в конец вашего содержимого CSS
• out-comment только объявление обертки /*@media print {*/ ... /*}*/
  • таким образом применяя печатные материалы к вашим стилям, сразу же переопределяя их там, где это применимо.
• (Я использую LiveReload, поэтому моя страница браузера обновляется сразу после сохранения изменения)
• ( в противном случае, если не использовать LiveReload:) нажмите CTRL+R, чтобы перезагрузить страницу
• теперь вы уже можете выполнить множество типичных настроек CSS CSS (стиль шрифта, размер шрифта, расстояния, цвета), где пока не требуется предварительный просмотр
• нажмите ALT+F+V, чтобы открыть предварительный просмотр и ALT+W, чтобы закрыть его снова

¹: если у них есть, out/in-commenting те, в зависимости от ваших протестированных носителей, могут быть неважными.

Ответ 7

Как описано в этом другом сообщении (Использование Инспектора элементов Chrome в режиме предварительного просмотра?), вы можете использовать хром, чтобы просто эмулировать таблицу стилей печати. Это замечательно, так как вы можете использовать инспектора, чтобы увидеть, откуда идут стили, а не гадать, когда вы видите диалог печати. ​​

Откройте диалоговое окно "Параметры переопределения", щелкнув значок шестеренки в нижнем правом углу Инспектора Chrome Element. Затем выберите печать в качестве целевого типа носителя.

Awesome!

Ответ 8

По крайней мере, в Chrome: во время разработки добавьте тег body onload="window.print()". Это приведет к тому, что режим печати откроется сразу после обновления.

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

Кстати, есть способы устранить шаг 2. Одним из популярных является LiveReload.

Ответ 9

Вы можете попробовать временно удалить обычную таблицу стилей и только загрузить в печать с помощью обычного тега ссылки.

Ответ 10

В Chrome 62 cmd-R/cmd-P хорошо работает на Mac, чтобы открыть хороший превью страницы, посвященной печати в формате.

Это доступно через вертикальный elipsis в правом верхнем углу самого окна браузера (не инструменты для разработчиков)/Print...

Используйте esc для отмены окна предварительного просмотра.

Итак, для моего рабочего процесса с IntelliJ IDEA и Chrome это: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab и я вернулся в среду IDE.

Chrome 62 в Windows 10 имеет одно и то же Print... меню в том же месте, доступное ctrl-p: