Saya sedang bekerja mengembangkan situs web dan perlu bekerja pada tampilan cetak. Biasanya ketika saya memiliki masalah tata letak, saya menggunakan Inspektur Elemen Chrome. Namun ini tidak ada dalam mode pratinjau cetak.

Apakah ada plugin Chrome atau cara lain untuk mengubah media tampilan Anda di dalam chrome itu sendiri, untuk melihat halaman seperti yang dilakukan printer? Saya kira itu tidak harus menjadi solusi khusus Chrome, tapi itu adalah browser utama saya sehingga akan menyenangkan untuk memiliki solusi di dalam browser.

Saat ini saya fokus hanya pada media pratinjau cetak, tetapi akan ideal untuk dapat mengubah ke salah satu jenis media yang didukung (yaitu semua / braille / embos / genggam / cetak / proyeksi / layar / ucapan / tty / televisi).

Catatan: Jawaban ini mencakup beberapa versi Chrome, gulir untuk melihat v52 , v48 , v46 , v43 dan v42 masing-masing dengan perubahan yang diperbarui.

Chrome v52 +:

• Buka Alat Pengembang (Windows: F12atau Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Klik tombol menu Customize and control DevTools hamburger dan pilih More tools> Rendering settings (atau Rendering dalam versi yang lebih baru).
• Centang kotak Emulasikan media cetak di tab Rendering dan pilih jenis media cetak .

Chrome v48 + (Terima kasih Alex atas perhatiannya):

• Buka Alat Pengembang ( CTRLSHIFTIatau F12)
• Klik tombol Toggle device mode di sudut kiri atas ( CTRLSHIFTM).
• Pastikan konsol ditampilkan dengan mengeklik Perlihatkan konsol di menu di (1) ( ESCtombol mengaktifkan konsol jika Toolbar Pengembang memiliki fokus).
• Periksa Emulasikan media cetak di tab rendering yang dapat dibuka dengan memilih menu Rendering in di (2).

Chrome v46 +:

• Buka Alat Pengembang ( CTRLSHIFTIatau F12)
• Klik tombol Toggle device mode di sudut kiri atas (1).
• Pastikan konsol ditampilkan dengan mengklik tombol menu (2)> Show console (3) atau menekan ESCtombol untuk beralih konsol (hanya berfungsi ketika Developer Toolbar memiliki fokus).
• Buka tab Emulation (4)> Media (5) , periksa media CSS dan pilih cetak (3).

Chrome v43 +:

• Ikon laci pada langkah 2 telah berubah.

Chrome v42:

• Buka Alat Pengembang ( CTRLSHIFTIatau F12)
• Klik tombol Toggle device mode di sudut kiri atas (1).
• Pastikan laci ditampilkan dengan mengklik tombol Perlihatkan laci (2) atau menekan ESCtombol untuk beralih laci.
• Di bawah Emulasi> Media periksa media CSS dan pilih cetak (3).

Diubah di Chrome 32 35+

(Di Chrome 35+ tab "Emulation" hadir secara default. Juga, konsol tersedia dari setiap tab utama.)

1. Di DevTools, pergi ke pengaturan-> Ganti
2. aktifkan "Tampilkan tampilan Emulasi di laci konsol"
3. Tutup pengaturan, buka tab 'Elemen'
4. Hit Escuntuk membuka konsol
5. Pilih tab "Emulasi", klik "Layar"
6. Gulir ke bawah ke "CSS Media", pilih "cetak"

Opsi ini belum (belum?) Tersedia di tab konsol.

Karena Chrome 32 Anda memiliki CSS mediaopsi di Screenbagian Emulationtab laci .

Cukup aktifkan, pilih printsebagai jenis media target, dan - lihat - halaman Anda ditampilkan [hampir] dengan cara dicetak.

Gunakan Escuntuk membuka laci jika tidak terlihat.

Pada Chrome 48 (dan mungkin beberapa versi sebelumnya), fungsi tersebut tampaknya telah pindah lagi:

Beberapa langkah pertama tidak berubah:

1. Tekan F12untuk membuka alat pengembang

2. Tekan ESCuntuk membuka konsol

Menurut jawaban sebelumnya, pengaturan kemudian dapat ditemukan di bawah tab "Emulasi". Seperti yang ditunjukkan pada gambar di bawah, sekarang telah dipindahkan ke tab "Rendering", yang dapat dimunculkan dengan mengklik pada tiga titik di sebelah kiri tab "Konsol".

Silakan lihat artikel ini

Lalu buka tab "timpa"

Pada Chrome 48+, Anda dapat mengakses pratinjau cetak melalui langkah-langkah berikut:

1. Buka alat dev - Ctrl/Cmd+ Shift+ Iatau klik kanan pada halaman dan pilih 'Periksa'.

2. Tekan Escuntuk membuka laci tambahan.

3. Jika 'Rendering' belum ditampilkan, klik 3 titik kebab dan pilih 'render'.

4. Centang kotak 'Emulasikan media cetak'.

Dari sana Chrome akan menunjukkan kepada Anda versi cetak halaman Anda dan Anda dapat memeriksa elemen dan memecahkan masalah seperti yang Anda lakukan pada versi browser.

Jika Anda men-debug CSS Anda menggunakan Print As PDF di Google Chrome dan warna latar elemen CSS Anda tidak muncul, maka pastikan kotak centang 'Background graphics' dicentang. Saya menghabiskan hampir 30 menit men-debug CSS saya dan bertanya-tanya apa yang menyebabkan latar belakang CSS saya diabaikan.

Di bawah Chrome v51 pada Mac, saya menemukan pengaturan rendering dengan mengklik di sudut kanan atas, memilih More tools> Rendering settings dan memeriksa tombol Emulate media pada opsi yang ditawarkan di bagian bawah jendela.

Terima kasih untuk semua poster lain yang menuntun saya pada hal ini, dan penghargaan kepada mereka yang memberikan jawaban tanpa gambar.

Chrome v67 (mac):

1. Tahan Cmd+opt+juntuk membuka alat dev
2. klik ...di sebelah kanan, dan pilih: More Tools >> Rendering
3. Ketika jendela Rendering muncul di bagian bawah layar, Emulasikan bagian Media CSS dan pilih: "Layar" dari dropdown.
4. Buka "File >> Print" dan Anda akan melihat tampilan yang ingin Anda cetak.

Gambar uraian di atas untuk Chrome v67 di mac:

Di mana menemukan tab Rendering: Klik ...di sebelah kanan, dan pilih: More Tools >> Rendering

Cara mendapatkan tampilan "layar" untuk dicetak: Ketika jendela Rendering muncul di bagian bawah layar, Emulasikan bagian CSS Media dan pilih: "Layar" dari dropdown.

Semoga ini bisa membantu.

Dengan pintasan yang tersedia, cara tercepat adalah dengan

1. Buka Alat Pengembang

   • Windows: F12atau Ctrl+ Shift+I
   • Mac: Cmd+ Opt+I

2. Buka Menu Perintah

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

3. Ketik printdan pilih Emulasikan jenis media cetak CSS dari menu konteks

   

Melihat jawaban yang sangat bagus dan paling banyak dipilih oleh lmeurs , saya pikir solusi ini juga akan tetap stabil seiring waktu.

Chrome v50:

Cara 1:

1. Menu> Alat Lainnya> Pengaturan rendering (lihat gambar)
2. Bawah: Rendering Tab> Emulasikan media "cetak"

Cara 2:

1. Buka Konsol [esc]
2. Menu Konsol> rendering