Швидший спосіб розробити та протестувати таблиці стилів друку (уникати попереднього попереднього друку)?

Зараз це мій процес:

1. Збережіть зміни до print.css
2. Відкрийте веб-переглядач та оновіть сторінку.
3. Клацніть правою кнопкою миші та виберіть Друк> Попередній перегляд друку (Firefox, але дійсно будь-який браузер)

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

Як ви протестуєте свої таблиці стилів друку? Ви завжди натискаєте попередній перегляд друку після оновлення?

Ви можете використовувати емуляцію типу медіа Chrome, як прийнято у публікації Див. Css-файл друку у браузері .

ОНОВЛЕННЯ 21.11.2017

Оновлений документ DevTools можна знайти тут: Перегляд сторінки в режимі друку .

Щоб переглянути сторінку в режимі друку:
1. Відкрийте командне меню . ( tl; dr Cmd+Shift+P (Mac) або Ctrl+Shift+P(Windows, Linux))
2. Почніть вводити Renderingта вибирати Show Rendering.
3. Для спаду Emulate CSS Media виберіть друк .

ОНОВЛЕННЯ 29.02.2016

Документи DevTools перемістилися, і вищевказане посилання надає неточну інформацію. Оновлені документи щодо емуляції типів мультимедіа можна знайти тут: Стилі попереднього перегляду для інших типів носія .

Відкрийте ящик емуляції DevTools, натиснувши на піктограму Додаткові відмінки ••• більше перекриття у верхньому правому куті вікна перегляду браузера. Потім виберіть Медіа у вікні емуляції.

ОНОВЛЕННЯ 12.04.2016

На жаль, схоже, документи не оновлювались щодо емуляції друку. Однак емулятор друкованої медіа перемістився (знову):

1. Відкрийте Chrome DevTools
2. Удар esc на клавіатуру
3. Клацніть ⋮ (вертикальний еліпсис)
4. Виберіть Надання
5. Поставте галочку Емуляція друкованих носіїв

Дивіться знімок екрана нижче:

ОНОВЛЕННЯ 28.06.2016

Документи розробників Google навколо Chrome DevTools та параметр "Емуляція медіа" оновлено для Chrome> 51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=uk#emulate-print-media

Щоб переглянути сторінку в режимі попереднього перегляду друку, відкрийте головне меню DevTools, виберіть Додаткові інструменти > Настройки візуалізації , а потім увімкніть прапорець Емуляція медіа за допомогою спадного меню, встановленого для друку .

ОНОВЛЕННЯ 24.05.2016

Ім'я налаштувань знову змінилося:

Щоб переглянути сторінку в режимі попереднього перегляду друку, відкрийте головне меню DevTools, виберіть Більше інструментів > Візуалізація , а потім увімкніть прапорець Емуляція CSS Media за допомогою випадаючого меню, встановленого для друку .

У Firefox ви можете ввести Shift+F2 щоб відкрити командний рядок Панелі інструментів розробника, а потім ввестиmedia emulate print

Ви також можете імітувати інші типи носіїв таким чином.

Панель інструментів Firefox + Web DeveloperРозширення має можливість вмикати / вимикати різні таблиці стилів.

Подивіться у меню CSS. Існує меню для відключення та включення окремих таблиць стилів, а також меню "Відображення за типом медіа".

Крім того, щоб просто зменшити кроки, щоб дістатися до PrintPreview у Firefox, спробуйте розширення PrintPreview , яке створить кнопку панелі інструментів.

Для Chrome є порт цього розширення . З того, що я можу сказати у версії Chrome, ви можете вибрати "Показати стилі друку"

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

У Chrome control+pпереходить до друку попереднього перегляду. (Забудьте, що ви збираєтеся до свого меню). Це досить просто.

Ви можете просто відключити стилі екрана та змінити тип медіа на "екран" для таблиці стилів друку під час тестування. Це не буде точно так само, як використання реального попереднього перегляду друку (розриви сторінки, ширина документа тощо), але це все ще дає досить гарну ідею.

простий для мене (не маючи @screenдеталей або подібних ¹ ) з FF :

• покладіть @media print { ...частину на кінець вмісту CSS
• коментувати лише декларацію обгортки/*@media print {*/ ... /*}*/
  • таким чином, застосувавши друковані матеріали до своїх стилів, негайно переосмисливши їх, де це можливо
• (Я використовую LiveReload, тому моя сторінка браузера оновлюється відразу після збереження змін)
• (в іншому випадку , якщо не використовується LiveReload :), натисніть, CTRL+Rщоб перезавантажити сторінку
• тепер ви вже можете виконати багато типових коригувань CSS для друку (стиль шрифту, розмір шрифту, інтервали, кольори), де ще не потрібен попередній перегляд друку
• натисніть, ALT+F+Vщоб відкрити попередній перегляд друку та ALT+Wзнову закрити його

¹ : якщо хтось має, те, що коментує / коментує, залежно від перевірених засобів масової інформації, інакше не може бути великою справою

Як описано в цій іншій публікації ( Використання Інспектора елементів Chrome у режимі попереднього перегляду друку? ), Ви можете використовувати хром, щоб просто імітувати таблицю стилів друку. Це чудово, оскільки ви можете використовувати інспектор, щоб побачити, звідки беруться стилі, а не здогадуватися, коли ви бачите діалог друку.

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

Дивовижно!

Принаймні в Chrome: Під час розробки додайте до тегу body onload="window.print()". Це призведе до того, що режим друку відкриється відразу після оновлення.

На жаль, не здається, що інструменти для розробників дуже корисні, оскільки це, по суті, вбудований PDF.

До речі, є способи усунути крок 2. Один з популярних - LiveReload.

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

У Chrome 62 cmd-R / cmd-P добре працює на Mac, щоб створити приємний попередній перегляд сторінки для стилю друку @media.

Це доступно через вертикальний еліпсис у верхньому правому куті самого вікна браузера (не Інструменти для розробників) / Друк ...

Використовуйте esc, щоб скасувати вікно попереднього перегляду.

Отже, для мого робочого процесу з IntelliJ IDEA та Chrome це: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab і я знову в IDE.

Chrome 62 у Windows 10 має те саме меню Друк ... у тому самому місці, доступне за допомогою ctrl-p: