Предложения по отладке таблиц стилей печати?


238

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

  • изменить код
  • Команда-вкладка
  • перезарядка

но весь этот процесс становится намного труднее, когда вы пытаетесь напечатать:

  • изменить код
  • Команда-вкладка
  • перезарядка
  • Распечатать
  • косоглазие при предварительном просмотре изображения
  • открыть PDF в Preview для дальнейшей проверки

Есть ли здесь инструменты, которые мне не хватает? Есть ли у инспектора WebKit флажок «Притворись, что это носитель с подкачкой»? Есть ли какая-то магия, которую может делать Firebug ( содрогание )?


4
Как насчет функции «Предварительный просмотр» в браузере, который ее поддерживает (например, Firefox)? Я (в основном точно) отладил некоторые веб-страницы для печати с ним.
Халил Озгюр


3
В Firefox откройте «Панель инструментов разработчика» с помощью Shift + F2, введите «media emulate print» (или «emu» + Tab + «print»), Enter.
Марчелло Нуччо


@MarcelloNuccio Это должен быть ответ. stackoverflow.com/a/28873496/1696030 получил довольно положительные голоса за сравнение. «Панель инструментов разработчика» немного вводит в заблуждение, так как это интерфейс командной строки.
Фолькер Э.

Ответы:


327

Есть опция для этого в инспекторе Chrome.

  1. Откройте инспектор DevTools (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
  2. Нажмите на значок режима устройства ToggleКнопка переключения режима устройства , расположенный в верхнем левом углу панели DevTools. (Windows: Ctrl+ Shift+ M, Mac: Cmd+ Shift+ M).
  3. Нажмите на значок More overrides больше переопределений в верхнем правом углу окна просмотра браузера, чтобы открыть ящик devtools.
  4. Затем выберите « Media» в эмуляторе и установите флажок « CSS media» .

    введите описание изображения здесь

Это должно сделать свое дело.

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

Источник: страница Google DevTools *


5
Спасибо, это то, что я искал, не смог найти: / Хотя ярлык больше не работает. Я просто делаю F12 + значок шестеренки в правом нижнем углу, затем настройка находится на вкладке Overrides,
Aurelien

18
к сожалению, это не на 100% точно :(
maazza

9
В Chrome отсутствует 32.0.1700.14 beta-m Aura«Эмуляция CSS media [print]» :(
Rocket Hazmat

11
Этот ответ необходимо исправить. Начиная с Chrome 48, эмулятор таблиц стилей печати больше не находится в разделе «Эмуляция», а в разделе «Рендеринг».
Чарви

13
Меню из трех точек (справа) в инспекторе> Дополнительные инструменты> Настройки рендеринга> Эмуляция носителя> Печать
allicarn

74

Я предполагаю, что вы хотите как можно больше контролировать печатное окно без использования подхода HTML к PDF ... Используйте экран @media для отладки - @media print для окончательного CSS

Современные браузеры могут дать вам быстрый визуальный для того, что будет происходить во время печати с использованием дюймов и очков в @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Как только ваш браузер отобразит «дюймы», у вас будет лучшее представление о том, чего ожидать. Этот подход должен почти закончить метод предварительного просмотра. Все принтеры будут работать с единицами измерения ptи inединицами измерения, а использование метода @media позволит вам быстро увидеть, что произойдет, и соответствующим образом скорректировать. Firebug (или эквивалент) абсолютно ускорит этот процесс. Когда вы добавили свои изменения в @media, у вас есть весь код, необходимый для связанного CSS-файла с использованием media = "print"атрибута - просто скопируйте / вставьте правила экрана @media в указанный файл.

Удачи. Сеть не была создана для печати. Создание решения, которое доставляет весь ваш контент, стили, равные тем, которые видны в браузере, иногда могут быть невозможны. Например, гибкий макет для преимущественно 1280 x 1024 аудитории не всегда легко переводится на красивую и аккуратную лазерную печать 8,5 x 11.

Ссылка W3C для пурусаля: http://www.w3.org/TR/css3-mediaqueries/


Просто хотел прокомментировать, что этот метод довольно умный. Намного легче изменить размер окна, чтобы «переключать» стили печати, чем использовать функцию предварительного просмотра. Хотя вам все еще приходится делать это иногда для совместимости с IE и т. Д., Это отлично подходит для начальной итерации стилей печати.
Chucknelson

@Chuck. Спасибо чувак. Эй, я понял, что моя демонстрация была в автономном режиме, поэтому я создал для нее скрипку. jsfiddle.net/dNEmT
Доусон

20

В Chrome 48 вы можете отлаживать стили печати на вкладке Rendering .

Нажмите значок меню в правом верхнем углу инспектора и настроек рендеринга .

Изменить
для Chrome 58 местоположение изменилось на Веб-инспектор> Меню> Дополнительные инструменты> Рендеринг


4
Chrome 49: F12 (консоль разработчика) -> ESC (консоль) -> Рендеринг -> Эмуляция печатного носителя
user1477388

19

В Chrome v41 он есть, но в немного другом месте.

введите описание изображения здесь


3
В версии v53 она вместо этого находится на вкладке Rendering, внизу есть флажок для Emulate Media, который включает выпадающий список, в котором вы можете выбрать Print in, аналогично предоставленному скриншоту
James Grey

16

Существует простой способ отладки таблицы стилей печати без переключения какого-либо атрибута медиа в вашем HTML-коде (конечно, как уже отмечалось, это не решает проблему ширины / страниц):

  • Используйте расширение Firefox + Web Developer.
  • В меню веб-разработчика выберите CSS / Показать CSS по типу носителя / Печать
  • Вернитесь в меню Web Developer, выберите Options / Persist Features

Теперь вы просматриваете CSS для печати и можете неограниченно обновлять свою страницу. Когда вы закончите, снимите флажок «Persist Features» и перезагрузите компьютер, вы снова получите CSS экрана.

НТН.


7
существенно отличается от предварительного просмотра печати. возможно это причуды в моем css. в любом случае, это не решает проблему. Спасибо хоть.
Heartpunk

Да, для меня тоже совсем другое. Я следовал этому jsfiddle ( jsfiddle.net/2wk6Q/3 ) и в предварительном просмотре печати показывает страницы с красными полями, но это совсем другое.
дуальность_

1
Я должен сказать, что этот «обходной путь» работает лучше всего для меня. Может быть, мне повезло, и поэтому между родным экраном печати и экраном печати веб-разработчиков есть только небольшие различия, но это определенно помогло мне выяснить, почему появляются пробелы и что самое важное - я могу просмотреть код с помощью firebug и посмотреть, что происходит на
Эрик Черпняк

13

Пользовательский интерфейс Chrome снова отличается от v53.

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

Обратите внимание, что это меню ... на панели инструментов разработчика, а не меню ... на панели браузера Chrome.

Предварительный просмотр принтера с v53 на MacOS

Теперь прокрутите вниз в разделе рендеринга. Это часто ниже сгиба.


1
Вы только что сохранили мне дни отладки print.css. Ты обалденный!
zazvorniki

8

После ответа rflnogueira текущие настройки Chrome (40.0. *) Будут выглядеть следующим образом:

эмуляция хромовой печати css


Мне потребовалось немного времени, чтобы определить вкладку «Медиа». Я продолжал искать его во вкладке «Устройство».
Лорин Риверс

5

Просто покажите таблицу стилей печати в вашем браузере, используя media="screen"при отладке. В режиме предварительного просмотра печати используется тот же механизм рендеринга, что и в обычном режиме просмотра, поэтому с его помощью можно получить точные результаты.


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

1
На Chrome рендеринг сильно отличается, если использовать только это предложение. Не сработает
heartpunk

«Страницу» ширину не сложно зафиксировать, это действительно сложная высота. И браузеры, и принтеры будут играть роль в головной боли 11in. Веб-страницы имеют непрерывную длину. Без гарантии типа устройства вывода и браузера, я не думаю, что вы когда-нибудь попадете в цель. Использование подхода HTML в PDF будет работать, но это выходит за рамки вашего вопроса.
Доусон

3

2019 - Обновленные инструкции

  1. Инспектор Open Chrome
    • С Mac => option+ command+i
    • Из Windows =>F12
  2. Нажмите на маленькие 3 точки, customize and control devTools введите описание изображения здесь

  3. Выбрать More Tools

  4. Выбрать Rendering

  5. Прокрутите вниз, чтобы Emulate CSS Media

  6. Выберите printиз стрелки вниз

введите описание изображения здесь


0

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

Вот пример того, как это можно сделать с помощью JavaScript / jquery

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

2
Проблема с этим подходом состоит в том, что если пользователь просто выбирает «Print ...» в своем браузере, эта функция javascript никогда не будет вызвана.
Кен Лю

вам не нужно показывать пользователю функцию печати, вы можете просто использовать ее для отладки, если хотите
Blowsie

Это слишком спроектированное решение для того, что браузер уже делает. Просто используйте a media="print"и media="screen"соответственно для ваших таблиц стилей и просто используйте меню браузера или комбинации клавиш, чтобы вызвать предварительный просмотр. (В этом случае это ничем не отличается от открытия всплывающего окна.) Если вы просто отлаживаете, применяйте media="screen"атрибут к вашим стилям печати, пока не закончите отладку.
ORyan

-1

введите описание изображения здесь

В DreamWeaver есть панель инструментов, на которой отображаются практически любые параметры рендеринга: экран, печать, карманные носители, проекционный экран, телепередачи, таблицы стилей desitn time и т. Д. Это то, что я использую, особенно потому, что оно: мгновенно показывает предварительный просмотр с 1 однократное нажатие кнопки.


1
Полезно знать, но для этого потребуется использовать другой движок рендеринга, чем тот, для которого мы разрабатываем, и все же требует больше, чем перезагрузка. Спасибо хоть.
Heartpunk

1
Уже в 2011 году это было проприетарное, предназначенное только для покупки программное обеспечение только на ограниченных платформах, за которое вам нужно было заплатить, чтобы получить запрошенную функциональность для отладки открытого Интернета.
Фолькер Э.

-7

Я использую макросы для многократной отправки нажатий клавиш и мыши. В Windows AutoHotKey - отличное программное обеспечение, а в OS X вы можете прочитать об Automator , альтернативном AHK для OsX .

В Windows (замените Ctrl на Cmd в OS X) «Ctrl-s / переключиться в окно Fx, где бы он ни находился в списке открытых окон / Ctrl-r», привязанный к 1 неиспользуемой клавише, позволяет избежать разочарований от неинтересных задач и в конечном итоге спасет мои руки из RSI :)

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