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

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

— Моджо Техно
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.