Cara lebih cepat untuk mengembangkan dan menguji lembar gaya cetak (hindari pratinjau cetak setiap saat)?

179

Ini adalah proses saya sekarang:

  1. Simpan perubahan ke print.css
  2. Buka browser dan segarkan halaman.
  3. Klik kanan dan pilih Print> Print Preview (Firefox, tetapi browser apa pun)

Ini langkah 3 yang mengganggu saya dan saya bertanya-tanya apakah mungkin untuk menghentikannya dari proses dengan plugin atau sesuatu. Pilih saja untuk melihat halaman sebagai media cetak, dan kemudian segarkan untuk melihat perubahannya.

Bagaimana Anda menguji lembar gaya cetak Anda? Apakah Anda selalu mengklik pratinjau cetak setelah refresh?

css firefox Michael
sumber
Terima kasih atas sarannya, semuanya. Saya akan senang jika Mozilla akan menambahkan pengaturan pengembang untuk mengaktifkan kemampuan "Refresh" pada jendela pratinjau cetak (tentu saja tidak untuk menghindari kebingungan pengguna akhir). Itu solusi ideal saya, karena (setuju dengan Faust) Saya biasanya perlu melihatnya di Print Preview untuk menunjukkan dengan tepat bagaimana itu akan ditampilkan (gambar latar belakang, istirahat halaman, margin, dll). Chrome mungkin sedikit membantu karena menunjukkan pratinjau secara default. Saya juga akan melihat add-on Firefox PrintPreview yang direkomendasikan oleh slolife.
Michael
Ini tidak akan berfungsi untuk Mac karena tidak ada opsi Print Preview, namun, Anda mungkin memiliki opsi PDF di dialog cetak Anda di mana Anda dapat membuka pratinjau "dicetak" ke file PDF temp. Tidak yakin apakah fitur ini dibangun ke dalam OSX atau karena saya sudah menginstal Acrobat.
Neil Monroe
Hanya membuat klarifikasi, tampaknya di OSX, opsi Print Preview tidak tersedia di menu File ..., tetapi dengan ekstensi Print / Print Preview, Anda dapat memiliki tombol yang meluncurkannya. addons.mozilla.org/en-US/firefox/addon/printprint-preview
Neil Monroe

Jawaban:

208

Anda dapat menggunakan Emulasi Jenis Media Chrome seperti yang diterima dalam posting Lihat cetak css di browser .

PEMBARUAN 21/11/2017

Doc DevTools yang diperbarui dapat ditemukan di sini: Lihat halaman dalam mode cetak .

Untuk melihat halaman dalam mode cetak:
1. Buka Menu Perintah . ( tl; dr Cmd+Shift+P (Mac) atau Ctrl+Shift+P(Windows, Linux))
2. Mulai mengetik Renderingdan pilih Show Rendering.
3. Untuk tarik-turun Emulate CSS Media , pilih cetak .

PEMBARUAN 29/02/2016

Dokumen DevTools telah dipindahkan dan tautan di atas memberikan informasi yang tidak akurat. Dokumen yang diperbarui tentang persaingan jenis media dapat ditemukan di sini: Gaya pratinjau untuk lebih banyak jenis media .

Buka laci emulasi DevTools dengan mengklik ikon Override lainnya ••• override lainnya di sudut kanan atas viewport browser. Kemudian, pilih Media di laci emulasi.

PEMBARUAN 12/04/2016

Sayangnya, sepertinya dokumen belum diperbarui sehubungan dengan emulasi cetak. Namun, Emulator Media Cetak telah bergerak (lagi):

  1. Buka Chrome DevTools
  2. Tekan escpada keyboard Anda
  3. Klik ⋮ (elipsis vertikal)
  4. Pilih Rendering
  5. Centang Emulasikan media cetak

Lihat tangkapan layar di bawah ini:

pengaturan render 12/04/2016

PEMBARUAN 28/06/2016

Google Developers Docs sekitar Chrome DevTools dan opsi "Emulate Media" telah diperbarui untuk Chrome> 51:

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

Untuk melihat halaman dalam mode pratinjau cetak, buka menu utama DevTools, pilih More Tools > Rendering Settings , dan kemudian aktifkan kotak centang emulasi media dengan menu dropdown diatur ke cetak .

pengaturan rendering 28/06/2016

UPDATE 24/05/2016

Penamaan pengaturan telah berubah sekali lagi:

Untuk melihat halaman dalam mode pratinjau cetak, buka menu utama DevTools, pilih More Tools > Rendering , lalu aktifkan kotak centang Emulasi CSS Media dengan menu dropdown yang diatur untuk dicetak .

meniru media CSS

Patrik Affentranger
sumber
2
@SupaIrish Ya, untuk Firefox lihat jawaban Szymon.
djule5
Dokumentasi benar-benar ketinggalan zaman dan tidak ada meniru media css di mana saja di dalam area "lebih ditimpa". Kemana perginya?
TetraDev
2
Terletak di bawah "konsol (esc)" lalu "3 titik vertikal" lalu "rendering" lalu "tiru media cetak" di bagian bawah - mengapa begitu tersembunyi saya tidak tahu.
TetraDev
pada osx memilih opsi ini sepertinya tidak melakukan apa-apa?
v3nt
165

Di Firefox Anda bisa mengetik Shift+F2untuk membuka baris perintah Developer Toolbar, dan kemudian mengetikmedia emulate print

Anda juga dapat meniru jenis media lain dengan cara ini.

Szymon Świtała
sumber
3
Saya perhatikan, bahwa ini mungkin tidak mencerminkan tampilan yang sama seperti yang disediakan dalam pratinjau cetak - terutama ketika menyangkut ruang kosong tambahan - pastikan, pratinjau cetak Anda tidak berbeda setelah Anda selesai dengan subtitle ini.
jave.web
15
Sayangnya, GLCI dijatuhkan dari firefox dengan versi 62. Seret.
zerpsed
4
Bagaimana cara mengaktifkan ini tanpa GLCI (shift + F12)?
StR
3
@StR Anda dapat meniru gaya cetak di Firefox dengan cara lain sekarang: stackoverflow.com/questions/47877112/…
TylerH
2
Saya baru saja menguji apa yang dikatakan @TylerH di Firefox v68 dan berfungsi.
StR
22

Ekstensi toolbar Firefox + Web Developer memiliki cara untuk mengaktifkan / menonaktifkan berbagai stylesheet.

Lihat di bawah menu CSS. Ada menu untuk menonaktifkan dan mengaktifkan masing-masing stylesheet dan menu "Tampilan menurut jenis media".

Juga, untuk hanya mengurangi langkah-langkah menuju PrintPreview di Firefox, coba ekstensi PrintPreview , yang akan membuat tombol bilah alat.

Untuk Chrome, ada port ekstensi itu . Dari apa yang dapat saya katakan dengan versi Chrome, Anda dapat memilih "Tampilkan gaya cetak"

Slolife
sumber
12

Saya tidak akan menggunakan metode pengujian apa pun yang tidak melibatkan pratinjau cetak. Ada terlalu banyak perbedaan: gambar latar belakang tidak berfungsi sama sekali dalam bentuk cetak, tetapi muncul dalam konteks layar normal sebagai yang utama di antara mereka.

Di Chrome, control+p buka segera untuk mencetak pratinjau. (Lupakan mousing hingga bilah menu). Itu cukup mudah.

Faust
sumber
Chrome jelas tidak menempel pada apa yang ditampilkan dalam persaingan media cetak. Saya telah menemukan bahwa jika Anda tidak memiliki fungsi preprint media chrome berjalan di bawah 2ms, itu tidak akan mengecat perubahan.
cchamberlain
1
Masalah dengan pratinjau cetak adalah tidak memungkinkan inspeksi elemen, sehingga debugging hal-hal seperti padding dan margin sangat sulit. Melihat elemen-elemen itu secara terpisah adalah hal terbaik yang dapat Anda miliki ketika mencoba men-debug masalah kotak.
Seiyria
6

Anda cukup menonaktifkan gaya layar Anda dan mengubah jenis media Anda menjadi "layar" untuk lembar gaya cetak Anda saat pengujian. Ini tidak akan persis sama dengan menggunakan pratinjau cetak nyata (page break, lebar dokumen, dll.), Tetapi masih memberi Anda ide yang cukup bagus.

Leo
sumber
5

sederhana untuk saya (tidak memiliki @screenbagian atau sejenisnya 1 ) dengan FF :

  • letakkan @media print { ...bagian di akhir konten CSS Anda
  • berkomentar hanya deklarasi wrapper/*@media print {*/ ... /*}*/
    • dengan demikian menerapkan hal-hal cetak ke gaya Anda segera menimpa mereka di mana berlaku
  • (Saya menggunakan LiveReload sehingga halaman browser saya langsung di-refresh setelah menyimpan perubahan)
  • ( jika tidak , jika tidak menggunakan LiveReload :) tekan CTRL+Runtuk memuat ulang halaman
  • sekarang Anda sudah dapat melakukan banyak penyesuaian CSS cetak biasa (gaya font, ukuran font, jarak, warna) di mana orang belum memerlukan pratinjau cetak
  • tekan ALT+F+Vuntuk membuka pratinjau cetak dan ALT+Wuntuk menutupnya lagi

1 : jika orang memilikinya, mengomentari itu, tergantung pada media yang Anda uji, mungkin bukan masalah besar jika tidak

Andreas Dietrich
sumber
3

Seperti yang dijelaskan dalam pos lain ini ( Menggunakan Inspektur Elemen Chrome dalam Print Preview Mode? ), Anda dapat menggunakan chrome untuk hanya meniru lembar gaya cetak. Ini bagus karena Anda dapat menggunakan inspektur untuk melihat dari mana gaya berasal daripada menebak ketika Anda melihat dialog cetak muncul.

Akses dialog Timpa Pengaturan dengan mengeklik ikon roda gigi di sudut kanan bawah Inspektur Elemen Chrome. Kemudian pilih cetak sebagai jenis media target.

Luar biasa!

Amal
sumber
2

Setidaknya di Chrome: Selama pengembangan, tambahkan ke tag tubuh onload="window.print()". Ini akan menyebabkan mode cetak terbuka segera setelah Anda menyegarkan.

Sayangnya sepertinya alat pengembang tidak banyak digunakan karena pada dasarnya ini adalah PDF yang disematkan.

Kebetulan ada cara untuk menghilangkan langkah 2. Salah satu yang populer adalah LiveReload.

nafg
sumber
0

Anda dapat mencoba untuk sementara menghapus stylesheet reguler Anda, dan hanya memuat dalam cetakan dengan tag tautan normal.

Andrew
sumber
0

Di Chrome 62, cmd-R / cmd-P berfungsi dengan baik pada Mac untuk menampilkan pratinjau bagus dari halaman bergaya cetak @media.

Ini dapat diakses melalui elipsis vertikal di kanan atas jendela browser itu sendiri (bukan Alat Pengembang) / Cetak ...

Gunakan esc untuk membatalkan jendela pratinjau.

Jadi, untuk alur kerja saya dengan IntelliJ IDEA dan Chrome, ini: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab dan saya kembali ke IDE.

Chrome 62 di Windows 10 memiliki menu Print ... yang sama di tempat yang sama, dapat diakses dengan ctrl-p: cetak di Chrome 62

Mojo Techno
sumber