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

Question

Это мой процесс прямо сейчас:

1. Сохранить изменения в print.css
2. Открыть браузер и обновить страницу.
3. Щелкните правой кнопкой мыши и выберите «Печать»>Предварительный просмотр (Firefox, но на самом деле любой браузер)

Меня беспокоит шаг 3, и мне интересно, можно ли его исключить из процесса с помощью плагина или чего-то еще.Просто выберите просмотр страницы в качестве печатного носителя, а затем просто обновите страницу, чтобы увидеть изменения.

Как вы тестируете свои таблицы стилей печати?Вы всегда нажимаете кнопку предварительного просмотра после обновления?

Answer 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 выберите print .

---

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

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

Откройте ящик эмуляции DevTools, щелкнув значок More overrides & bull; & bull; & bull; more overrides в правом верхнем углу окна просмотра браузера. Затем выберите Media в блоке эмуляции.

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

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

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

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

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

Документы Google для разработчиков по Chrome DevTools и параметр «Эмуляция мультимедиа» обновлены для Chrome> 51:

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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

¹ : если они есть, добавление / комментирование их, в зависимости от вашего протестированного носителя, в противном случае может не иметь большого значения

Answer 7

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

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

Отлично!

Answer 8

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

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

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

Answer 9

В Chrome 62 cmd-R / cmd-P хорошо работает на Mac, чтобы получить хороший предварительный просмотр страницы в стиле @media print.

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

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

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

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

Answer 10

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