Saran untuk debugging lembar gaya cetak?

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?

Ada opsi untuk itu di inspektur Chrome.

1. Buka inspektur DevTools (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
2. Klik pada Beralih modus perangkat ikon , terletak di sudut kiri atas panel DevTools. (windows: Ctrl+ Shift+ M, mac: Cmd+ Shift+ M).
3. Klik ikon More override di sudut kanan atas viewport browser untuk membuka laci devtools.

4. 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 *

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.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

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 ptdan inunit, 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 menggunakan media = "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/

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

Di Chrome v41, ada di sana, tetapi di tempat yang sedikit berbeda.

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):

• Gunakan ekstensi Firefox + Web Developer.
• Di menu Pengembang Web, pilih CSS / Tampilkan CSS berdasarkan Jenis Media / Cetak
• Kembali ke menu Pengembang Web, pilih Opsi / Fitur Tetap

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.

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.

Menindaklanjuti jawaban oleh rflnogueira, pengaturan Chrome saat ini (40.0. *) Akan terlihat seperti di bawah ini:

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.

2019 - Instruksi diperbarui

1. Buka inspektur Chrome
   • Dari Mac => option+ command+i
   • Dari Windows =>F12

2. Klik pada 3 titik kecil, customize and control devTools

3. Pilih More Tools

4. Pilih Rendering

5. Gulir ke bawah ke Emulate CSS Media

6. Pilih printdari panah bawah

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

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

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.

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 :)