Як ви налагоджуєте CSS для друку?

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

Які методи / інструменти ви використовуєте для діагностики подібних проблем? Чи є спосіб більше використовувати традиційні засоби налагодження CSS у режимі друку?

Оновлено: я вже використовую PDF-принтер, щоб уникнути марнотратства паперу; моя проблема полягає в тому, що я не можу клацнути правою кнопкою миші на надрукованому DOM. Деякі інші відповіді нижче дуже корисні, дякую. :-)

У Chrome 51:

Відкрийте devtools ( CTRL + F12або CTRL + SHIFT + I) і клацніть на ...меню, клацніть, More Tools > Rendering settingsщоб відкрити Renderingвкладку консолі розробника (або, якщо консоль відкрита, просто перейдіть до цієї вкладки).

На цій вкладці встановіть і встановіть прапорець Emulate Media: print.

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

Оновлення вересня 2018 року : починаючи з Firefox 62, консоль розробника зникла. Здається, зараз не існує способу активувати емуляцію стилю друку.

Оновлення, листопад 2019 р . : Здається, що у Firefox 69 знову є нова кнопка для емуляції стилю друку. Дивіться іншу відповідь на цій сторінці: https://stackoverflow.com/a/58015662/195476

Я використовую плагін WebDeveloper та CSS -> Відобразити CSS за типом носія -> Друк, щоб переглянути CSS так, як це було б під час друку. Службові програми Firebug для перевірки працюють з CSS у відфільтрованому плагіном.

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

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

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

Що стосується проблеми друку, перейдіть до CSS -> Відобразити стиль CSS за носієм -> друк

У ньому є багато інших інструментів, я, мабуть, використовую близько 10% від нього.

Спробуйте, можливо, ви знайдете щось корисне.

У Firefox 69 я знайшов кнопку для імітації друкованих носіїв. Просто відкрийте Інструменти розробника (F12) і натисніть Інспектор. Кнопка перемикання - це крайній лівий значок, який знаходиться у виділеному розділі на знімку екрана нижче, той, що схожий на аркуш паперу.

У інструментах розробника chrome (F12 \ Ctrl (cmd на mac) + Shift + C): На вкладці емуляції (від Chrome 32 і далі IMHO) є вкладка "Медіа".

Там ви можете встановити прапорець емуляції мультимедіа та вибрати медіа, який ви хочете емулювати ('друк', 'екран' тощо)

Як щодо того, щоб просто вказати останній CSS для друку та видалити умову «print» із вашого посилання CSS або імпорту? Потім ви налагоджуєте друкований CSS у вікні браузера.

Я використовую віртуальний принтер Adobe PDF, оскільки це найближче до справжнього принтера, яке ви отримаєте, не витрачаючи чорнила та паперу.

У будь-якому випадку, рекомендується мати окремий CSS для відбитків, з набагато простішою графікою та меншою кількістю зображень, які ви використовуєте лише для дизайнерських цілей.

Я завжди користувався панеллю інструментів веб-розробника (як описано в інших відповідях), але, здається, 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 = екран, замінюючи його на 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());
        }
    }
})()

Якщо ви не хочете платити гроші, надрукуйте на Microsoft XPS Document Writer. Або скористайтеся SnagIt, якщо у вас є кошти (безкоштовна пробна версія на сайті).