Я працюю над розробкою веб-сайту і мені потрібно працювати над поданням для друку. Як правило, у мене проблеми з компонуванням, я використовую Chrome Element Inspector. Однак цього немає в режимі попереднього перегляду друку.

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

Зараз я зосереджений лише на носії попереднього перегляду для друку, але було б ідеально мати можливість змінити будь-який із підтримуваних типів носіїв (наприклад, всі / шрифт Брайля / тиснення / кишеньковий / друк / проекція / екран / мова / мова / tty / тв).

Примітка. Ця відповідь охоплює декілька версій Chrome, прокрутіть, щоб побачити версії v52 , v48 , v46 , v43 та v42 з оновленими змінами.

Chrome v52 +:

• Відкрийте Інструменти для розробників (Windows: F12або Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Натисніть кнопку Налаштувати та керувати меню гамбургера DevTools та оберіть Додаткові інструменти> Налаштування візуалізації (або Візуалізація в нових версіях).
• Установіть прапорець Емуляція носія друку на вкладці Візуалізація та виберіть тип друкованого носія.

Chrome v48 + (спасибі Алекс за те, що помітив):

• Відкрийте Інструменти для розробників ( CTRLSHIFTIабо F12)
• Клацніть кнопку Режим переключення пристроїв у верхньому лівому куті ( CTRLSHIFTM).
• Переконайтеся, що консоль відображається, натиснувши Показати консоль у меню за адресою (1) ( ESCклавіша перемикає консоль, якщо фокус панелі інструментів розробника).
• Поставте прапорець Емуляція друкованих носіїв на вкладці візуалізації, яку можна відкрити, вибравши Рендеринг у меню за адресою (2).

Chrome v46 +:

• Відкрийте Інструменти для розробників ( CTRLSHIFTIабо F12)
• Клацніть кнопку Режим переключення пристроїв у верхньому лівому куті (1).
• Переконайтеся, що консоль відображається, натиснувши кнопку меню (2)> Показати консоль (3) або натиснувши ESCклавішу, щоб переключити консоль (працює лише тоді, коли фокус на Панелі інструментів розробника).
• Відкрийте вкладки Емуляція (4)> Медіа (5) , перевірте CSS-медіа та виберіть друк (3).

Chrome v43 +:

• Піктограма шухляди на кроці 2 змінилася.

Chrome v42:

• Відкрийте Інструменти для розробників (CTRLSHIFTIабо F12)
• Клацніть на кнопку Режим переключення пристроїв у верхньому лівому куті (1).
• Переконайтесь, що ящик відображається, натиснувши на Показати висувну (2) або натиснувши ESCклавішу, щоб переключити ящик.
• У розділі Емуляція> Медіа перевірте CSS-медіа та виберіть друк (3).

Змінено в Chrome 32 35+

(У Chrome 35+ за замовчуванням присутня вкладка "Емуляція". Також консоль доступна з будь-якої основної вкладки.)

1. У DevTools перейдіть до налаштувань-> Переопределення
2. включити "Показати перегляд емуляції в ящику консолі"
3. Закрийте налаштування, перейдіть на вкладку «Елементи»
4. Натисніть, Escщоб піднести консоль
5. Виберіть вкладку "Емуляція", натисніть "Екран"
6. Прокрутіть униз до пункту "CSS Media", виберіть "print"

Цей параметр ще не доступний на вкладці консолі.

З Chrome 32 у вас є CSS mediaможливість в Screenрозділі ящикаEmulation вкладки .

Просто ввімкніть це, виберіть printяк тип цільового носія інформації і - ось - ваша сторінка відображається [майже] так, як вона буде надрукована.

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

Що стосується Chrome 48 (і, можливо, декількох версій раніше), функція, здається, знову перейшла:

Перші кілька кроків не змінюються:

1. Натисніть, F12щоб відкрити інструменти для розробників

2. Натисніть, ESCщоб відкрити консоль

Відповідно до попередніх відповідей, налаштування потім можна знайти на вкладці "Емуляція". Як показано на малюнках нижче, його тепер перемістили на вкладку «Візуалізація», яку можна вивести, натиснувши на три крапки зліва від вкладки «Консоль».

Будь ласка, дивіться цю статтю

Потім перейдіть на вкладку "Переопределення"

Як і в Chrome 48+, ви можете отримати попередній перегляд друку за допомогою наступних кроків:

1. Відкрийте інструменти розробки - Ctrl/Cmd+ Shift+ Iабо клацніть правою кнопкою миші на сторінці та оберіть «Оглянути».

2. Натисніть, Escщоб відкрити додатковий ящик.

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

4. Установіть прапорець "Емуляція друкованих носіїв".

Звідти Chrome покаже вам версію для друку вашої сторінки, і ви можете ознайомитись з елементами та усунути неполадки, як у версії браузера.

Якщо ви налагоджуєте CSS за допомогою функції "Друкувати як PDF" в Google Chrome, а кольори тла елемента CSS не відображаються, переконайтесь, що прапорець "Фоновий графік" встановлений. Я витратив майже 30 хвилин на налагодження свого CSS і цікавився, що викликає ігнорування мого фону CSS.

У розділі Chrome v51 на Mac я знайшов налаштування візуалізації, натиснувши у верхньому правому куті, вибравши Більше інструментів> Настройки візуалізації та перевіривши кнопку Емуляція медіа-файлу в опціях, запропонованих у нижній частині вікна.

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

Chrome v67 (mac):

1. Утримуйте кнопку, Cmd+opt+jщоб відкрити інструменти розробки
2. натисніть ...праворуч і виберіть: Більше інструментів >> Візуалізація
3. Коли у нижній частині екрана відобразиться вікно Візуалізація, розділі Емуляція CSS Media та виберіть зі спадного меню пункт "Екран".
4. Перейдіть у розділ «Файл >> Друк», і ви побачите потрібний вид друку.

Зображення вищевказаного опису для Chrome v67 на mac:

Де знайти вкладку Візуалізація: Клацніть ...праворуч і виберіть: Більше інструментів >> Візуалізація

Як отримати перегляд "екрана" для друку: Коли у нижній частині екрана відобразиться вікно "Візуалізація", перейдіть до розділу Емуляція CSS Media та виберіть зі спадного меню пункт "Екран".

Сподіваюся, це допомагає.

З наявними ярликами - це найшвидший спосіб

1. Відкрийте Інструменти для розробників

   • Windows: F12або Ctrl+ Shift+I
   • Mac: Cmd+ Opt+I

2. Відкрийте командне меню

   • Windows: Ctrl+ Shift+P
   • Mac: Cmd+ Shift+P

3. Введіть printта виберіть Emulate CSS media media print у контекстному меню

   

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

Chrome v50:

Спосіб 1:

1. Меню> Інші інструменти> Установки візуалізації (див. Зображення)
2. Вниз: вкладка візуалізації> емуляція "друку"

Спосіб 2:

1. Відкрити консоль [esc]
2. Меню консолі> візуалізація