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

179

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

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

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

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

css firefox Майкл
источник
Спасибо всем за предложения. Мне бы понравилось, если бы Mozilla добавила настройку разработчика, чтобы включить возможности «Обновить» в окне предварительного просмотра (не по умолчанию, чтобы избежать путаницы конечного пользователя, конечно). Это мое идеальное решение, потому что (согласен с Faust) мне обычно нужно видеть его в Print Preview, чтобы точно показать , как оно будет отображаться (фоновые изображения, разрывы страниц, поля и т. Д.). Chrome может немного помочь, так как он показывает предварительный просмотр по умолчанию. Я также посмотрю на это дополнение Firefox PrintPreview, рекомендованное slolife.
Майкл
Это не будет работать для Mac, так как нет опции предварительного просмотра, однако у вас может быть опция PDF в диалоговом окне печати, где вы можете открыть предварительный просмотр, «напечатанный» во временном файле PDF. Не уверен, встроена ли эта функция в OSX или потому что у меня установлен Acrobat.
Нил Монро,
Просто сделав пояснение, кажется, что в OSX опция «Предварительный просмотр» недоступна в меню «Файл ...», но с расширением «Предварительный просмотр / предварительный просмотр» у вас может быть кнопка, которая ее запускает. addons.mozilla.org/en-US/firefox/addon/printprint-preview
Нил Монро,

Ответы:

208

Вы можете использовать Chrome Media Type Emulation, как принято в посте. См. Print css в браузере .

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

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

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

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

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

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

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

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

  1. Открыть Chrome DevTools
  2. Хит escна клавиатуре
  3. Нажмите ⋮ (вертикальный многоточие)
  4. Выберите Rendering
  5. Tick Emulate печатные СМИ

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

настройки рендеринга 12/04/2016

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

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

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

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

настройки рендеринга 28/06/2016

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

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

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

эмулировать CSS-медиа

Патрик Аффентрангер
источник
2
@SupaIrish Да, для Firefox см. Ответ Шимона.
djule5
Документация полностью устарела, и внутри области «больше переопределений» нет эмулируемых носителей CSS. Куда это делось?
TetraDev
2
Он расположен под «консоль (esc)», затем «3 вертикальные точки», затем «рендеринг», а затем «эмуляция печатных носителей» внизу - почему так скрытно, я понятия не имею.
TetraDev
на OSX выбор этой опции, кажется, ничего не делает?
v3nt
165

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

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

Шимон Свитала
источник
3
Я заметил, что это может не отражать то же представление, которое предусмотрено в предварительном просмотре печати - особенно когда речь идет о дополнительных пробелах - убедитесь, что ваш предварительный просмотр печати не изменился после того, как вы сделали с этим подшагом.
jave.web
15
К сожалению, GLCI был удален из Firefox с версией 62. Перетащите.
zerpsed
4
Как включить это без GLCI (shift + F12)?
StR
3
@StR Теперь вы можете эмулировать стили печати в Firefox другим способом: stackoverflow.com/questions/47877112/…
TylerH
2
Я только что проверил, что @TylerH сказал в Firefox v68, и это работает.
StR
22

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

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

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

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

slolife
источник
12

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

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

Faust
источник
Chrome определенно не придерживается того, что показано в эмуляции печатных СМИ. Я обнаружил, что если у вас нет функции препринта Chrome Media, выполняющейся менее чем за 2 мс, изменения не будут отображены.
cchamberlain
1
Проблема с предварительным просмотром печати в том, что он не позволяет проверять элементы, поэтому отладка таких вещей, как отступы и поля, чрезвычайно сложна. Просмотр этих элементов по отдельности - лучшее, что вы можете получить при отладке проблем с окнами.
Сейрия
6

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

Лео
источник
5

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

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

1 : если они есть, их комментирование, в зависимости от того, что вы тестировали, может не иметь большого значения, иначе

Андреас Дитрих
источник
3

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

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

Потрясающие!

Благотворительность
источник
2

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

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

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

nafg
источник
0

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

Андрей
источник
0

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

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

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

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

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

Моджо Техно
источник