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

Ответ 1

В инспекторе Chrome есть опция.

• Откройте инспектор DevTools (mac: Cmd + Shift + C, windows: Ctrl + Shift + C)
• Нажмите на значок Режим переключателя , расположенный в верхнем левом углу панели DevTools. (windows: Ctrl + Shift + M, mac: Cmd + Shift + M).
• Нажмите на значок Больше переопределений в правом верхнем углу окна просмотра браузера, чтобы открыть ящик devtools.

• Затем выберите Media в ящике эмуляции и установите флажок CSS media.

Это должно сделать трюк.

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

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

Ответ 2

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

Современные браузеры могут дать вам быстрый обзор того, что произойдет во время печати, используя дюймы и pts в @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 для purusal: http://www.w3.org/TR/css3-mediaqueries/

Ответ 3

Chrome 48 можно отлаживать стили печати на вкладке Рендеринг.

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

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

Ответ 4

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

Ответ 5

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

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

Теперь вы просматриваете печатный CSS, и вы можете повторно загрузить свою страницу на неопределенный срок. Как только вы закончите, снимите флажок "Функции Persist" и перезагрузите, вы снова получите экран CSS.

НТН.

Ответ 6

Интерфейс Chrome отличается снова от v53.

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

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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 из стрелки вниз

Ответ 10

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

Вот пример того, как это можно сделать с помощью 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();
        });

Ответ 11

Как насчет этого варианта цикла перезагрузки печати:

• изменить код
• командной вкладка
• перезагрузить alt + f, v (предварительный просмотр в Firefox в Windows)
• esc (закрыть предварительный просмотр)

Повторите несколько раз, затем выполните реальную печать в Microsoft XPS Document Writer или аналогичном.

Ответ 12

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

Ответ 13

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

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