Как проверить выход печати браузеров с помощью онлайн-инструментов?

Я использовал (как обычно) правила @media print, чтобы указать, как печать веб-страницы должна отличаться от онлайн-версии. Это работает очень хорошо, но тест действительно сложный. Мне обычно приходится делать следующие шаги:

Создайте другой стиль для screen и print.
Начните свою страницу в режиме экрана.
Распечатайте страницу, например. к принтеру PDF.
Посмотрите на результат.
Попробуйте найти правила, которые ведут себя неправильно.

Что я хотел бы сделать (но не смог сделать это с любым браузером):

Создайте другой стиль для screen и print.
Начните свою страницу в режиме экрана.
Перейдите в режим предварительного просмотра (например, для Opera, Firefox)
Используйте доступные инструменты, такие как Firebug (Firefox) или Dragonfly (Opera), чтобы проверить DOM и текущие стили.
Измените CSS на лету, перезагрузите страницу и посмотрите на результат и DOM снова.

Есть ли какой-либо браузер или комбинация браузера, плагина и процесса для получения похожих результатов? Если у вас есть идеи, как изменить организации файлов, с минимальными изменениями, чтобы получить желаемый результат, пожалуйста.

Ответ 1

В Firefox-подключителе под названием "Веб-разработчик" (https://addons.mozilla.org/en-US/firefox/addon/web-developer/) есть опция "Показать CSS по типу мультимедиа".

Ответ 2

У Chrome Developer Tools есть эта функция.

Откройте Chrome Developer Tools для страницы, которую вы хотите протестировать.
Откройте Ящик, если он еще не открыт. (Нажмите Esc.)
Откройте вкладку Эмуляция.
Нажмите Медиа в меню слева.
Отметьте CSS-носитель и выберите распечатать в поле выбора

Источник: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types

Ответ 3

Вы пробовали с Print Friendly Расширение Google Chrome.

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

Ответ 4

Если вы укажете свои правила печати и экрана CSS в отдельных файлах, вы можете сделать это довольно легко с помощью инструментов Chrome Developer. Загрузите свою страницу и откройте Инструменты разработчика. В представлении "Элементы" отредактируйте строку media = "print", чтобы она считывала media = "all".

Например, если вы связываете свои таблицы стилей, например:

<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" />
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css"   />

Изменить:

<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />

<link href="/static/global/css/print.css" media="all" rel="stylesheet" type="text/css" />

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

Ответ 5

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

Создайте таблицу стилей печати, которая использует @media print {} для печати стилей печати
Применить эту таблицу стилей последним
Во время работы над стилями печати временно закомментируйте строки, которые формируют ваши стили печати.
Используйте Firebug и Web Developer в привычном для вас способом.
Раскомментируйте брекетинг мультимедиа

Что-то вроде:

    
/* @media print { */

    #sidebar {display:none;}

/* } */

Ответ 6

Я нашел другое решение моей проблемы, вызванное использованием конвейера активов Rails 3.1 для условного использования определенного css. Вот как это работает:

Используйте в основном HTML файле следующие директивы для таблиц стилей:

<link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

изолировать все правила в таблицах стилей, которые
- подходит для экрана и печати (стильная таблица: application.css)
- подходит только для экрана (таблица стилей: screen.css)
- подходит только для печати (таблица стилей: print.css)

Во время проверки распечатки вашей веб-страницы переключите таблицы стилей в основной файл HTML:

<link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="print" rel="stylesheet" type="text/css" />
<link href="print.css" media="screen" rel="stylesheet" type="text/css" />

Обратите внимание на переключатель во второй и третьей строках для media="print|screen".

В результате вы теперь можете вызвать свой основной файл HTML и посмотреть, как он будет выглядеть, если вы распечатаете его в обычных условиях. Все инструменты, которые вы обычно используете (Firefox Firebug, Chrome Developer Tools, Opera DragonFly,...) будут работать как обычно, поэтому вы можете проверить свой DOM, увидеть флажки, сменить CSS на лету и просто перезагрузить страницу, затем.

Хорошо работает для меня, если я натолкнусь на некоторые недостатки, я вернусь и отметю это тоже.