Bir web sitesi geliştirmeye çalışıyorum ve baskı görünümünde çalışmam gerekiyor. Genellikle mizanpaj sorunları olduğunda Chrome'un Element Inspector uygulamasını kullanıyorum. Ancak bu, baskı önizleme modunda mevcut değildir.

Bir Chrome eklentisi veya krom içindeki görüntüleme ortamınızı değiştirmenin, bir sayfayı yazıcı gibi görüntülemenin başka bir yolu var mı? Chrome'a ​​özgü bir çözümü olmadığını düşünüyorum, ancak bu benim birincil tarayıcımdır, bu nedenle tarayıcı içi bir çözüme sahip olmak güzel olurdu.

Şu anda sadece baskı önizleme ortamına odaklandım, ancak desteklenen ortam türlerinden herhangi birine (yani tüm / braille / kabartmalı / el tipi / baskı / projeksiyon / ekran / konuşma / tty / televizyon).

Not: Bu cevap, Chrome çeşitli sürümlerini kapsıyor görmek için kaydırma v52 , V48 , V46 , V43 ve V42 güncellenen değişikliklerle her.

Chrome v52 +:

• Geliştirici Araçlarını açın (Windows: F12veya Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Click özelleştirme ve kontrol DevTools hamburger menü düğmesi ve tercih ayarları Rendering Diğer araçlar> (veya Rendering yeni sürümlerinde).
• Kontrol Taklit yazılı basın kısmındaki onay Oluşturma sekmesini seçin Baskı ortam türünü.

Chrome v48 + (Fark ettiğiniz için teşekkürler Alex):

• Geliştirici Araçlarını ( CTRLSHIFTIveya F12) açın
• Click Geçiş cihaz modu sol üst köşedeki düğmeye ( CTRLSHIFTM).
• Emin konsol tıklayarak gösterilir olun göster konsoluna ((1) bulunan menüdeESC Geliştirici Araç Çubuğu'nda odak varsa tuş konsolu değiştirir).
• Kontrol Taklit baskı ortamını seçerek açılabilir render sekmesinde Rendering (2) bulunan menüde.

Chrome v46 +:

• Geliştirici Araçlarını ( CTRLSHIFTIveya F12) açın
• Click Geçiş cihaz modu sol üst köşede (1) düğmesini.
• Menü düğmesi (2)> Konsolu göster (3) düğmesini tıklatarak veya ESCkonsolu değiştirmek için tuşuna basarak konsolun gösterildiğinden emin olun (yalnızca Geliştirici Araç Çubuğu'nun odağı olduğunda çalışır).
• Aç Emülasyon (4)> Medya (5) sekmeler, çek CSS medya basıp baskı (3).

Chrome v43 +:

• 2. adımdaki çekmece simgesi değişti.

Chrome v42:

• Geliştirici Araçlarını ( CTRLSHIFTIveya F12) açın
• Click Geçiş cihaz modu sol üst köşede (1) düğmesini.
• Çekmeceyi göster düğmesine (2) tıklayarak veya ESCçekmeceyi değiştirmek için tuşuna basarak çekmecenin gösterildiğinden emin olun .
• Altında Emülasyon> Medya onay CSS medya basıp baskı (3).

Chrome 32'de değiştirildi 35+

(Chrome 35 ve sonraki sürümlerinde "Öykünme" sekmesi varsayılan olarak bulunur. Ayrıca, konsola herhangi bir birincil sekmeden erişilebilir.)

1. DevTools'ta ayarlar-> Geçersiz Kılmalar'a gidin
2. "Konsol çekmecesinde Öykünme görünümünü göster" seçeneğini etkinleştirin
3. Ayarları kapatın, 'Öğeler' sekmesine gidin
4. EscKonsolu getirmek için vur
5. "Emülasyon" sekmesini seçin, "Ekran" ı tıklayın
6. "CSS Medyası" na ilerleyin, "yazdır" ı seçin

Konsol sekmesinde bu seçenek (henüz?) Kullanılamıyor.

Chrome 32'den beri çekmecenin bölümünde CSS mediaseçenek varScreenEmulation sekmesinin .

Sadece etkinleştirin print, hedef ortam türü olarak seçin ve - bakın - sayfanız yazdırılacağı şekilde işlenir.

EscGörünmüyorsa çekmeceyi getirmek için kullanın .

Chrome 48'den (ve belki de birkaç sürümden önce), işlev tekrar taşınmış gibi görünüyor:

İlk birkaç adım değişmedi:

1. F12Geliştirici araçlarını getirmek için basın

2. ESCKonsolu açmak için basın

Önceki yanıtlara göre, ayar daha sonra "Öykünme" sekmesi altında bulunabilir. Aşağıdaki resimlerde gösterildiği gibi, artık "Konsol" sekmesinin solundaki üç noktayı tıklayarak görüntülenebilen "Oluşturma" sekmesine taşındı.

Lütfen bu makaleye bakın

Ardından "geçersiz kılmalar" sekmesine gidin

Chrome 48+ sürümünden itibaren, baskı önizlemesine aşağıdaki adımlar aracılığıyla erişebilirsiniz:

1. Geliştirici araçlarını açın - Ctrl/Cmd+ Shift+ Iveya sayfayı sağ tıklayın ve 'İncele' seçeneğini seçin.

2. EscEk çekmeceyi açmak için tuşuna basın .

3. 'Oluşturma' zaten gösterilmiyorsa, 3 nokta kebabını tıklayın ve 'oluşturma' seçeneğini seçin.

4. 'Yazdırma ortamını taklit et' onay kutusunu işaretleyin.

Buradan Chrome size sayfanızın basılı bir sürümünü gösterir ve öğeyi inceleyebilir ve tarayıcı sürümünde olduğu gibi sorun giderebilirsiniz.

CSS'nizde Google Chrome'da PDF Olarak Yazdır'ı kullanarak hata ayıklıyorsanız ve CSS öğesi arka plan renkleriniz gösterilmiyorsa, 'Arka plan grafikleri' onay kutusunun işaretli olduğundan emin olun. CSS hata ayıklama ve CSS arka plan benim göz ardı neden ne olduğunu merak neredeyse 30 dakika geçirdim.

Bir Mac'teki Chrome v51 altında, sağ üst köşeyi tıklayarak, Diğer araçlar> Oluşturma ayarları'nı seçip pencerenin altında sunulan seçeneklerde Medyayı taklit et düğmesini işaretleyerek oluşturma ayarlarını buldum.

Beni bu konuya götüren diğer tüm posterlere teşekkür ederim.

Chrome v67 (mac):

1. Cmd+opt+jGeliştirici araçlarını açmak için basılı tutun
2. ...sağ taraftaki simgesini tıklayın ve aşağıdakileri seçin: Diğer Araçlar >> Oluşturma
3. Oluşturma penceresi ekranın altında görüntülendiğinde, CSS Medyasını Taklit Et ve açılır menüden "Ekran" ı seçin.
4. "Dosya >> Yazdır" 'a gidin, yazdırmak istediğiniz görünümü görmelisiniz.

Mac'te Chrome v67 için yukarıdaki açıklamanın görüntüleri:

Görüntü Oluşturma sekmesini nerede bulabilirim: ...Sağ taraftaki simgesini tıklayın ve daha fazla araç seçin: Diğer Araçlar >> Görüntü Oluşturma

"Ekran" görünümünün yazdırılması

Umarım yardımcı olur.

Mevcut kısayollarla, en hızlı yol

1. Geliştirici Araçlarını açın

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

2. Komut Menüsünü Aç

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

3. Yazın printve seçin Taklit CSS yazılı basın türünü içerik menüsünden

   

Lmeurların mükemmel ve şu anda en çok oylanan cevabına baktığımda , bu çözümün zaman içinde de sabit kalabileceğini düşünüyorum.

Chrome v50:

Yol 1:

1. Menü> Diğer Araçlar> Görüntü oluşturma ayarları (resme bakın)
2. Aşağı: Oluşturma Sekmesi> Ortama "yazdır" öykün

Yol 2:

1. Açık Konsol [esc]
2. Konsol Menüsü> işleme