Baskı stil sayfalarında hata ayıklama önerileri?

Son zamanlarda bir web sitesi için bir baskı stil sayfası üzerinde çalışıyorum ve ince ayar yapmanın etkili yollarını kaybettiğimi fark ettim. Ekran düzeni üzerinde çalışmak için yeniden yükleme döngüsüne sahip olmak bir şeydir:

• kodu değiştir
• Komut sekme
• Tekrar yükle

ancak yazdırmaya çalışırken tüm süreç çok daha zorlu hale gelir:

• kodu değiştir
• Komut sekme
• Tekrar yükle
• Yazdır
• squint at print önizleme görüntüsü
• daha fazla inceleme için PDF'yi Önizleme'de aç

Burada kaçırdığım araçlar var mı? WebKit'in denetçisinde "bu disk belleği medya gibi davran" onay kutusu var mı? Firebug'un ( ürperti ) yapabileceği bir sihir var mı ?

Chrome'un müfettişinde bunun için bir seçenek var.

1. DevTools denetçisini açın (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
2. DevTools panelinin sol üst köşesinde bulunan Cihaz modunu aç / kapat simgesini tıklayın . (windows: Ctrl+ Shift+ M, mac: Cmd+ Shift+ M).
3. Devtools çekmecesini açmak için tarayıcı görünüm penceresinin sağ üst köşesindeki Diğer geçersiz kılmalar simgesini tıklayın .

4. Ardından, emülasyon çekmecesinde Ortam'ı seçin ve CSS ortamı onay kutusunu işaretleyin.

   

Bu hile yapmalı.

Güncelleme: DevTools'ta menüler değişti. Artık sağ üst köşedeki "üç nokta" menüsünü> Diğer Araçlar> Görüntü Oluşturma Ayarları> Medyayı taklit et> yazdır'ı tıklayarak bulabilirsiniz.

Kaynak: Google DevTools sayfası *

HTML'den PDF'ye yaklaşımı kullanmadan yazdırılan pencereyi mümkün olduğunca kontrol etmek istediğinizi varsayıyorum ... Hata ayıklamak için @media ekranını kullanın - son css için @media print

Modern tarayıcılar size kullanılarak baskı anda ne olacak ne için hızlı bir görsel verebilir inç ve puanlar bir de @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 */
 ...
}

Tarayıcınız "inç" görüntülediğinde, ne bekleyeceğiniz konusunda daha iyi bir fikriniz olacaktır. Bu yaklaşım, baskı önizleme yöntemini bitirmelidir. Tüm yazıcılar ptve inbirimlerle çalışacak ve @media tekniğini kullanmanız, ne olacağını hızlı bir şekilde görmenize ve buna göre ayarlamanıza izin verecektir. Firebug (veya muadili) bu süreci kesinlikle hızlandıracaktır. @Media'ya yaptığınız değişiklikleri eklediğinizde, bağlı bir CSS dosyası için gereken tüm media = "print"özniteliği öznitelik kullanarak aldınız - @media ekran kurallarını başvurulan dosyaya kopyalayıp yapıştırmanız yeterlidir .

İyi şanslar. Web baskı için tasarlanmamıştır. Tüm içeriğinizi, stilde tarayıcıda görülene eşit olan stilleri sunan bir çözüm oluşturmak bazen imkansız olabilir. Örneğin, ağırlıklı olarak 1280 x 1024 seyirci için akıcı bir düzen, her zaman iyi ve düzgün bir 8.5 x 11 lazer baskıya kolayca çevrilemez.

Purusal için W3C referansı: http://www.w3.org/TR/css3-mediaqueries/

Chrome 48'de , oluşturma stillerinde İşleme sekmesinde hata ayıklayabilirsiniz .

Müfettiş ve Oluşturma Ayarları'nın sağ üst tarafındaki menü simgesini tıklayın .

Düzenleme
için Chrome 58 yeri değişti Web Müfettiş> Menü> Diğer Araçlar> Rendering

Chrome v41'de, orada, ancak biraz farklı bir noktada.

HTML kodunuzdaki herhangi bir ortam niteliğini değiştirmeden yazdırma stil sayfanızda hata ayıklamanın kolay bir yolu vardır (elbette belirtildiği gibi genişlik / sayfa sorununu çözmez):

• Firefox + Web Geliştirici uzantısını kullanın.
• Web Geliştiricisi menüsünde, CSS / Görüntü Türünü CSS'ye Göre Yazdır
• Web Geliştirici menüsüne geri dönün, Seçenekler / Kalıcı Özellikler'i seçin

Şimdi yazdırma CSS'sini görüntülüyorsunuz ve sayfanızı süresiz olarak yeniden yükleyebilirsiniz. İşiniz bittiğinde "Kalıcı Özellikler" in işaretini kaldırın ve yeniden yükleyin, ekran CSS'sini tekrar alırsınız.

HTH.

Chrome'un UI farklıdır tekrar V53 itibariyle.

Bu özelliği sık sık kullanmama gerek yok, ancak ne zaman yaparsam yapayım, Chrome ekibinin onu en son ne zaman izlediğimi izlediğimden beri onu nereye götürdüğünü anlamak beni sonsuza dek sürüyor.

Uyarı içeri ... menü Dev Tools bölmesinde değil Chrome Tarayıcı bölmesinde ... menüsü.

Şimdi Görüntü Oluşturma bölümünde aşağı kaydırın . Genellikle ekranın altında.

Rflnogueira'nın cevabını takiben, mevcut Chrome ayarları (40.0. *) Aşağıdaki gibi görünecektir:

media="screen"Hata ayıklama sırasında tarayıcınızda yazdırma stil sayfasını göstermeniz yeterlidir. Baskı önizleme görünümü, normal tarama moduyla aynı oluşturma motorunu kullanır, böylece bunu kullanarak doğru sonuçlar alabilirsiniz.

2019 - Güncellenmiş talimatlar

1. Chrome denetçisini aç
   • Gönderen Mac => option+ command+i
   • Gönderen Windows'un =>F12

2. Küçük 3 noktaya tıklayın, customize and control devTools

3. seçmek More Tools

4. seçmek Rendering

5. Aşağıya kaydırın Emulate CSS Media

6. printAşağı oktan seçin

Sayfanın içeriğini, yazdırma stili sayfanızla yeni bir pencereye yeniden yazan bir yazdırma işleviniz varsa, kağıda nasıl görüneceği hakkında çok daha iyi bir fikir edinir ve hata ayıklayabilirsiniz. kundakçı gibi.

JavaScript / jquery ile bunun nasıl yapılabileceğine dair bir örnek

        $("#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();
        });

: Ekran, vb baskı, el medya, projeksiyon perdesi, tv medya, desitn zaman stil sayfaları, bu özellikle bunun nedeni ne kullanın: DreamWeaver bir gösterileri hemen her render seçeneği İstediğiniz araç çubuğu vardır anında 1 ile önizlemesini gösterir tek bir düğmeye basın.

Tekrar tekrar tuşa basma ve fare tıklaması göndermek için makroları kullanıyorum. Windows altında, AutoHotKey harika bir yazılımdır ve OS X altında Osma için alternatif bir AHK Automator türünü okuyabilirsiniz .

Windows altında (Ctrl'yi OS X altında Cmd ile değiştirin) 1 kullanılmamış tuşa bağlı "Ctrl-s / Fx penceresine açıldığında, Windows / Ctrl-r" penceresinin bulunduğu her yerde geçiş, ilginç olmayan görevlerden kaynaklanan hayal kırıklığını önler ve sonuçta kollarımı kurtaracak dan RSI :)