Saya baru-baru ini bekerja pada lembar gaya cetak untuk situs web, dan saya menyadari bahwa saya bingung untuk cara yang efektif untuk mengubahnya. Satu hal untuk memiliki siklus ulang untuk bekerja pada tata letak di layar:
- ubah kode
- tab perintah
- memuat ulang
tetapi seluruh proses itu menjadi lebih sulit ketika Anda mencoba untuk mencetak:
- ubah kode
- tab perintah
- memuat ulang
- mencetak
- menyipitkan mata pada gambar cetak-pratinjau
- buka PDF di Pratinjau untuk pemeriksaan lebih lanjut
Apakah ada alat yang saya lewatkan di sini? Apakah inspektur WebKit memiliki kotak centang "pretend this paged media"? Apakah ada sihir yang Firebug ( bergidik ) dapat lakukan?
Jawaban:
Ada opsi untuk itu di inspektur Chrome.
Kemudian, pilih Media di laci emulasi, dan centang kotak centang CSS media .
Ini harus melakukan trik.
Pembaruan: Menu telah berubah di DevTools. Sekarang dapat ditemukan dengan mengklik menu "tiga titik" di sudut kanan atas> Alat Lainnya> Pengaturan rendering> Emulasi media> cetak.
Sumber: halaman Google DevTools *
sumber
32.0.1700.14 beta-m Aura
, "Tirulah media CSS [cetak]" tidak ada :(Saya berasumsi Anda ingin kontrol sebanyak mungkin dari jendela yang dicetak tanpa menggunakan pendekatan HTML ke PDF ... Gunakan layar @media untuk debug - @ media cetak untuk css terakhir
Browser modern dapat memberi Anda visual cepat untuk apa yang akan terjadi pada waktu cetak menggunakan inci dan pts dalam
@media query
.Setelah browser Anda menampilkan "inci" Anda akan memiliki ide yang lebih baik tentang apa yang diharapkan. Pendekatan ini harus mengakhiri metode pratinjau cetak. Semua printer akan bekerja dengan
pt
danin
unit, dan menggunakan teknik @media akan memungkinkan Anda untuk dengan cepat melihat apa yang akan terjadi dan menyesuaikannya. Firebug (atau yang setara) benar-benar akan mempercepat proses itu. Saat Anda menambahkan perubahan ke @media, Anda memiliki semua kode yang Anda perlukan untuk file CSS yang ditautkan menggunakanmedia = "print"
atribut - cukup salin / tempelkan aturan layar @media ke file yang direferensikan.Semoga berhasil. Web tidak dibuat untuk dicetak. Menciptakan solusi yang memberikan semua konten Anda, gaya yang sama dengan apa yang dilihat di peramban terkadang tidak mungkin. Misalnya, tata letak yang lancar untuk audiens yang didominasi 1280 x 1024 tidak selalu menerjemahkan dengan mudah ke cetakan laser 8,5 x 11 yang bagus dan rapi.
Referensi W3C untuk purusal: http://www.w3.org/TR/css3-mediaqueries/
sumber
Chrome 48 Anda dapat men-debug gaya cetak dalam tab Rendering .
Klik ikon menu di kanan atas inspektur dan Pengaturan Rendering .
Edit
Untuk Chrome 58 lokasi telah berubah menjadi Web Inspektur> Menu> Alat Lainnya> rendering
sumber
Di Chrome v41, ada di sana, tetapi di tempat yang sedikit berbeda.
sumber
Ada cara mudah untuk men-debug stylesheet cetak Anda tanpa mengalihkan atribut media apa pun dalam kode HTML Anda (tentu saja, seperti yang ditunjukkan, itu tidak menyelesaikan masalah lebar / halaman):
Sekarang Anda melihat CSS cetak dan Anda dapat memuat ulang halaman Anda tanpa batas. Setelah selesai, hapus centang "Fitur Tetap" dan muat ulang, Anda akan mendapatkan CSS layar lagi.
HTH.
sumber
UI Chrome berbeda lagi pada v53.
Saya tidak perlu sering menggunakan fitur ini, tetapi setiap kali saya melakukannya, saya perlu selamanya untuk mengetahui ke mana tim Chrome telah memindahkannya sejak terakhir kali saya membakar siklus mencoba melacaknya.
Perhatikan itu adalah ... menu di panel Alat Dev bukan ... menu di panel Browser Chrome.
Sekarang gulir ke bawah di bagian Rendering. Itu sering di bawah flip.
sumber
Menindaklanjuti jawaban oleh rflnogueira, pengaturan Chrome saat ini (40.0. *) Akan terlihat seperti di bawah ini:
sumber
Cukup tunjukkan lembar gaya cetak di browser Anda menggunakan
media="screen"
saat debugging. Tampilan pratinjau cetak menggunakan mesin rendering yang sama dengan mode penelusuran normal sehingga Anda bisa mendapatkan hasil yang akurat menggunakan itu.sumber
2019 - Instruksi diperbarui
option
+command
+i
F12
Klik pada 3 titik kecil,
customize and control devTools
Pilih
More Tools
Pilih
Rendering
Gulir ke bawah ke
Emulate CSS Media
Pilih
print
dari panah bawahsumber
Jika Anda memiliki fungsi cetak yang menulis ulang konten halaman ke jendela baru dengan lembar gaya cetak Anda direferensikan, Anda akan mendapatkan ide yang lebih baik tentang seperti apa tampilannya di atas kertas, dan Anda akan dapat men-debug-nya dengan orang-orang seperti pembakar juga.
Inilah contoh bagaimana hal ini dapat dilakukan dengan JavaScript / jquery
sumber
media="print"
danmedia="screen"
masing-masing untuk stylesheet Anda dan cukup gunakan menu browser atau kombo kunci untuk memanggil pratinjau cetak. (Dalam hal ini tidak ada bedanya dengan membuka popup) Dan jika Anda hanya debugging, terapkanmedia="screen"
atribut untuk gaya cetak Anda sampai Anda selesai debugging.Di DreamWeaver ada toolbar yang menunjukkan hampir semua opsi render yang Anda inginkan: layar, cetak, media genggam, layar proyeksi, media tv, desitn time style sheets, dll. Inilah yang saya gunakan terutama karena: langsung menampilkan pratinjau dengan 1 tekan satu tombol.
sumber
Saya menggunakan makro untuk mengirim penekanan tombol dan klik mouse berulang kali. Di bawah Windows, AutoHotKey adalah perangkat lunak yang hebat dan di bawah OS X Anda dapat membaca tentang Automator semacam AHK alternatif untuk OsX .
Di bawah Windows (ganti Ctrl dengan Cmd di bawah OS X) "Ctrl-s / alihkan ke jendela Fx di mana pun ia berada dalam daftar jendela yang dibuka / Ctrl-r" terikat ke 1 kunci yang tidak digunakan untuk menghindari frustrasi dari tugas-tugas yang tidak menarik dan pada akhirnya akan menyelamatkan tangan saya dari RSI :)
sumber