Saran untuk debugging lembar gaya cetak?

238

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?

Jim Puls
sumber
4
Bagaimana dengan fungsi "Print preview" dari browser yang mendukungnya (mis. Firefox)? Saya (sebagian besar akurat) men-debug beberapa halaman web untuk dicetak dengannya.
Halil Özgür
2
kemungkinan duplikat dari Bagaimana Anda men-debug CSS yang dapat dicetak?
outis
3
Di Firefox, buka "Developer Toolbar" dengan Shift + F2, ketik "media emulate print" (atau "emu" + Tab + "print"), Enter.
Marcello Nuccio
@MarcelloNuccio Ini seharusnya menjadi jawaban. stackoverflow.com/a/28873496/1696030 mendapat cukup banyak suara positif untuk perbandingan. "Bilah Alat Pengembang" sedikit menyesatkan karena merupakan antarmuka baris perintah.
Volker E.

Jawaban:

327

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 Alihkan tombol mode perangkat, terletak di sudut kiri atas panel DevTools. (windows: Ctrl+ Shift+ M, mac: Cmd+ Shift+ M).
  3. Klik ikon More override lebih banyak menimpa di sudut kanan atas viewport browser untuk membuka laci devtools.
  4. Kemudian, pilih Media di laci emulasi, dan centang kotak centang CSS media .

    masukkan deskripsi gambar di sini

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 *

Rafael Nogueira
sumber
5
Terima kasih, itulah yang saya cari, tidak dapat menemukannya: / Pintasan tidak berfungsi lagi. Saya hanya melakukan ikon roda gigi F12 + di sudut kanan bawah, maka pengaturannya berada di bawah tab Overrides,
Aurelien
18
sayangnya itu tidak 100% akurat :(
maazza
9
Di Chrome 32.0.1700.14 beta-m Aura, "Tirulah media CSS [cetak]" tidak ada :(
Rocket Hazmat
11
Jawaban ini perlu diperbaiki. Pada Chrome 48, emulator stylesheet cetak tidak lagi di bawah "Emulasi" tetapi di bawah "Rendering."
chharvey
13
Menu tiga titik (sisi kanan) di inspektur> Alat Lainnya> Pengaturan rendering> Emulasi media> cetak
allicarn
74

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/

Dawson
sumber
Hanya ingin berkomentar bahwa metode ini cukup pintar. Jauh lebih mudah untuk mengubah ukuran jendela sedikit ke "beralih" gaya cetak daripada menggunakan fungsi pratinjau cetak. Meskipun Anda masih harus melakukannya kadang-kadang untuk kompatibilitas IE dan semacamnya, ini bagus untuk iterasi awal gaya cetak.
chucknelson
@Membuang. Terima kasih sobat. Hei, saya menyadari demo saya tidak online, jadi saya membuat biola untuk itu. jsfiddle.net/dNEmT
Dawson
20

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

minlare
sumber
4
Chrome 49: F12 (konsol pengembang) -> ESC (konsol) -> Rendering ->
Emulasikan
19

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

masukkan deskripsi gambar di sini

Johntrepreneur
sumber
3
Di v53 ada di tab Rendering, di bagian bawah ada kotak centang untuk Emulate Media yang akan memungkinkan dropdown yang dapat Anda pilih Cetak, mirip dengan tangkapan layar yang disediakan
James Gray
16

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.

Kapsul
sumber
7
menjadikan berbeda dari pratinjau cetak, secara substansial. mungkin ini adalah kekhasan dalam css saya. dalam hal apa pun, itu tidak menyelesaikan masalah. terimakasih Meskipun.
heartpunk
Ya, sama sekali berbeda bagi saya juga. Saya mengikuti jsfiddle ini ( jsfiddle.net/2wk6Q/3 ) dan mencetak pratinjau menampilkan halaman dengan margin merah, tetapi ini sama sekali berbeda.
dualitas_
1
Saya harus mengatakan bahwa "solusi" ini paling cocok untuk saya. Mungkin saya beruntung dan itulah mengapa hanya ada sedikit perbedaan antara layar cetak asli dan layar cetak pengembang web tetapi pasti membantu saya mencari tahu mengapa celah muncul dan apa yang paling penting - saya dapat melihat kode dengan pembakar dan melihat apa yang terjadi pada
Erik Čerpnjak
13

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.

Pratinjau printer sejak v53 pada MacOS

Sekarang gulir ke bawah di bagian Rendering. Itu sering di bawah flip.

TrofiGeek
sumber
1
Anda baru saja menyelamatkan saya dari debugging print.css selama berhari-hari. Kamu Menakjubkan!
zazvorniki
8

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

emulasi chrome print css

Anil Vangari
sumber
Butuh sedikit waktu untuk mengidentifikasi tab "Media". Saya terus mencarinya di tab "Perangkat".
Lorin Rivers
5

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.

Tatu Ulmanen
sumber
14
Kecuali mode penelusuran normal tidak memiliki halaman, jadi saya tidak tahu bagaimana konten akan mengalir. Mode penjelajahan normal memiliki lebar sejumlah piksel tertentu, sementara sebuah halaman memiliki lebar sejumlah inci atau sentimeter tertentu. Ada perbedaan mendasar antara implementasi dan independensi antara layar dan cetak. Debugging antara mereka adalah apa yang saya cari.
Jim Puls
1
Pada chrome rendering sangat berbeda menggunakan saran ini saja. Tidak akan bekerja
heartpunk
Lebar "Halaman" tidak sulit untuk dipaku, tingginya itu sangat sulit. Browser dan printer akan berperan dalam sakit kepala 11in. Halaman web panjangnya terus menerus. Tanpa jaminan tipe dan browser perangkat keluaran, saya pikir Anda tidak akan pernah mengenai itu setiap saat. Menggunakan pendekatan HTML ke PDF akan berhasil, tapi itu di luar cakupan pertanyaan Anda.
Dawson
3

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 masukkan deskripsi gambar di sini

  3. Pilih More Tools

  4. Pilih Rendering

  5. Gulir ke bawah ke Emulate CSS Media

  6. Pilih printdari panah bawah

masukkan deskripsi gambar di sini

jso1919
sumber
0

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();
        });
Blowsie
sumber
2
Masalah dengan pendekatan ini adalah bahwa jika pengguna hanya memilih "Cetak ..." di browser mereka, fungsi javascript ini tidak akan pernah dipanggil.
Ken Liu
Anda tidak perlu menampilkan fungsi cetak kepada pengguna, Anda cukup menggunakannya untuk keperluan debugging jika Anda mau
Blowsie
Ini adalah solusi rekayasa berlebihan untuk sesuatu yang sudah dilakukan browser. Cukup gunakan a media="print"dan media="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, terapkan media="screen"atribut untuk gaya cetak Anda sampai Anda selesai debugging.
ORyan
-1

masukkan deskripsi gambar di sini

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.

Sam
sumber
1
baik untuk diketahui, tetapi akan membutuhkan menggunakan mesin rendering yang berbeda dari apa yang kami kembangkan, dan masih membutuhkan lebih dari sekadar memuat ulang. terimakasih Meskipun.
heartpunk
1
Kembali pada tahun 2011 ini adalah perangkat lunak berpemilik, hanya pembelian hanya pada platform terbatas, yang harus Anda bayar untuk mendapatkan fungsionalitas yang diminta untuk men-debug web yang terbuka.
Volker E.
-7

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

FelipeAls
sumber