Как вы отлаживаете печатный CSS?

Я все время использую Firebug и IE Developer Toolbar для отладки сложных проблем CSS. Но иногда возникает сложная ошибка, которая появляется только при переходе на страницу.

Какие методы/инструменты вы используете для диагностики таких проблем? Есть ли способ получить больше пользы от традиционных инструментов отладки CSS в режиме просмотра?

Обновлено: я уже использую принтер PDF, чтобы избежать потери бумаги; моя проблема в том, что я не могу щелкнуть правой кнопкой мыши на напечатанном DOM. Некоторые из приведенных ниже ответов весьма полезны, спасибо.: -)

ОТВЕТЫ

Ответ 1

В Chrome 51:

Инструменты разработчика Chrome

Откройте devtools (CTRL + F12 или CTRL + SHIFT + I) и откройте меню ..., нажмите More Tools > Rendering settings, чтобы открыть вкладку Rendering консоли разработчика (в противном случае, если консоль открыта, просто перейдите к этой вкладка).

На этой вкладке выберите и установите флажок Emulate Media: print.

Ответ 2

Просто нашел комментарий lee-penkman о новой функции в Firefox здесь: нажмите Shift-F2 в Firefox, чтобы открыть консоль браузера (не консоль javascript), затем введите media emulate print. Прекрасно работает!

Обновление, сентябрь 2018 г.: Начиная с Firefox 62, консоль разработчика исчезла. Кажется, сейчас нет способа активировать эмуляцию стиля печати.

Ответ 3

Я использую плагин WebDeveloper и CSS → Показать CSS по типу мультимедиа → Печать для просмотра CSS, как это было бы при печати. Утилиты инспекции Firebug работают с CSS как отфильтрованные плагином.

Ответ 4

Я использую Firefox и панель инструментов разработчика.

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

Я также использую функцию контура, которую div и прочее, как на мыши, на вашем веб-сайте. Действительно полезно найти div.

Для проблемы с печатью перейдите в CSS → Показать стиль CSS с помощью мультимедиа → print

В этом есть много другого инструмента, я, вероятно, использую около 10% его.

Попробуйте, может быть, вы найдете что-то полезное.

Ответ 5

В инструментах разработчика Chrome (F12\Ctrl (cmd на mac) + Shift + C): На вкладке эмуляции (от Chrome 32 дальше IMHO) есть вкладка "Медиа".

Там вы можете проверить флажок медиа эмуляции и выбрать носитель, который хотите эмулировать ( "печать", "экран" и т.д.).

Ответ 6

Как насчет того, чтобы просто перечислить свой последний CSS для печати и удалить условие "print" из вашей ссылки CSS или оператора импорта? Затем вы отлаживаете печатный CSS в окне браузера.

Ответ 7

Я использую виртуальный принтер Adobe PDF, потому что это самое близкое к реальному принтеру, которое вы получите, не теряя чернил и бумаги.

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

Ответ 8

Я всегда использовал панель инструментов веб-разработчика (как описано в других ответах), но Firebug, кажется, время от времени пропускает некоторые стили. Поэтому я добавил закладку в свой браузер и добавил следующий Javascript в качестве URL закладки. Теперь я могу просто переключиться на стиль печати, нажав на закладку:

javascript:(function(){var%20h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href&&(f.media=='print'||f.media=='screen')){var%20g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');if(f.media.toLowerCase().match(/screen/))f.media="dontshow";if(f.media.toLowerCase().match(/print/))f.media="all";f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new%20Date().valueOf());}}})()

Приведенный выше код находит все ссылки на таблицы стилей, проверяет, является ли это media = print, и если да, то изменяет его на media = all (и скрывает весь media = screen, заменяя его на media = dontshow) и перезагружает таблицы стилей, добавляя маркер времени на URL. Основной скрипт перезагрузки от кого-то другого, я добавил медиа часть. Это прекрасно работает для меня!

Это будет более читаемая версия приведенного выше URL-адреса JavaScript для пояснения:

javascript: (function() {
    var h, a, f;
    a = document.getElementsByTagName('link');
    for (h = 0; h < a.length; h++) {
        f = a[h];
        if (f.rel.toLowerCase().match(/stylesheet/) && f.href && (f.media == 'print' || f.media == 'screen')) {
            var g = f.href.replace(/(&|\?)forceReload=\d /, '');
            if (f.media.toLowerCase().match(/screen/)) f.media = "dontshow";
            if (f.media.toLowerCase().match(/print/)) f.media = "all";
            f.href = g(g.match(/\?/) ? '&' : '?')
            'forceReload=' (new Date().valueOf());
        }
    }
})()

Ответ 9

Печать в Microsoft XPS Document Writer, если вы не хотите платить деньги. Или используйте SnagIt, если у вас есть средства (бесплатная пробная версия на сайте).

Ответ 10

В Firefox 69 я нашел кнопку для имитации печатных СМИ. Просто откройте Инструменты разработчика (F12) и нажмите "Инспектор":

enter image description here