Baskı stil sayfalarını geliştirmenin ve test etmenin daha hızlı yolu (her seferinde baskı önizlemesinden kaçının)?

179

Bu şu anda benim sürecim:

  1. Print.css dosyasındaki değişiklikleri kaydet
  2. Tarayıcıyı aç ve sayfayı yenile.
  3. Sağ tıklayın ve Yazdır> Baskı Önizleme'yi seçin (Firefox, ancak gerçekten herhangi bir tarayıcı)

3. adım beni rahatsız ediyor ve bir eklenti veya bir şeyle işlemden çıkarmanın mümkün olup olmadığını merak ediyorum. Bir sayfayı yazdırma ortamı olarak görüntülemeyi seçin ve ardından değişiklikleri görmek için yenileyin.

Baskı stil sayfalarınızı nasıl test edersiniz? Yenilemeden sonra her zaman baskı önizlemesini tıklatır mısınız?

css  firefox 
— Michael
kaynak
Önerileriniz için teşekkürler, herkes. Mozilla, baskı önizleme penceresinde "Yenile" yeteneklerini etkinleştirmek için bir geliştirici ayarı ekleseydi bunu isterdim (elbette son kullanıcı karışıklığını önlemek için varsayılan değil). Bu benim ideal çözümümdür , çünkü (Faust ile aynı fikirde olmak) Tam olarak nasıl gösterileceğini göstermek için genellikle Baskı Önizleme'de görmem gerekir (arka plan görüntüleri, sayfa sonları, kenar boşlukları, vb.). Chrome, varsayılan olarak bir önizleme gösterdiği için biraz yardımcı olabilir. Ayrıca slolife tarafından önerilen Firefox PrintPreview eklentisine de bakacağım.
— Michael
Baskı Önizleme seçeneği olmadığından bu Mac için çalışmaz, ancak yazdırma iletişim kutunuzda geçici bir PDF dosyasına "yazdırılmış" bir önizleme açabileceğiniz bir PDF seçeneğiniz olabilir. Bu özelliğin OSX'te yerleşik olup olmadığından veya Acrobat'ı yüklediğimden emin değilim.
— Neil Monroe
Sadece bir açıklama yapmak gerekirse, OSX'te, Baskı Önizleme seçeneğinin Dosya ... menüsünde bulunmadığı, ancak Baskı / Baskı Önizleme uzantısıyla, onu başlatan bir düğmeye sahip olabileceğiniz görülüyor. addons.mozilla.org/tr-TR/firefox/addon/printprint-preview
— Neil Monroe

Yanıtlar:

208

Yayında kabul edildiği gibi Chrome Medya Türü Öykünmesini kullanabilirsiniz Tarayıcıda yazdırma css sayfasına bakın .

GÜNCELLEME 21/11/2017

Güncellenmiş DevTools belgesini şu adreste bulabilirsiniz: Sayfayı yazdırma modunda görüntüleyin .

Bir sayfayı yazdırma modunda görüntülemek için:
1. Komut Menüsünü açın . ( tl; dr Cmd+Shift+P (Mac) veya Ctrl+Shift+P(Windows, Linux))
2. Yazmaya başlayın Renderingve öğesini seçin Show Rendering.
İçin 3. Taklit CSS Medya açılır menüsünden yazdırma .

GÜNCELLEME 29/02/2016

DevTools dokümanları taşındı ve yukarıdaki bağlantı yanlış bilgiler veriyor. Medya türü öykünmesi ile ilgili güncellenmiş dokümanlar burada bulunabilir: Daha fazla medya türü için önizleme stilleri .

Tarayıcı görünüm penceresinin sağ üst köşesindeki Diğer geçersiz kılmalar ••• daha fazla geçersiz kılma simgesini tıklayarak DevTools öykünme çekmecesini açın . Ardından, emülasyon çekmecesinde Medya'yı seçin .

GÜNCELLEME 12/04/2016

Ne yazık ki, dokümanlar yazdırma öykünmesi ile ilgili olarak güncellenmemiş görünüyor. Ancak, Print Media Emulator taşındı (tekrar):

  1. Chrome DevTools'u açın
  2. escKlavyenize vurun
  3. Tıkla ⋮ (dikey üç nokta)
  4. Oluşturma'yı seçin
  5. Kene Taklit yazılı basın

Aşağıdaki ekran görüntüsüne bakın:

oluşturma ayarları 12/04/2016

GÜNCELLEME 28/06/2016

Chrome DevTools çevresindeki Google Developers Docs ve "Medya Taklit Et" seçeneği Chrome> 51 için güncellendi:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

Bir sayfayı baskı önizleme modunda görüntülemek için DevTools ana menüsünü açın, Diğer Araçlar > Görüntü Oluşturma Ayarları'nı seçin ve ardından açılır menü yazdırmaya ayarlanmış olarak medya öykünme onay kutusunu etkinleştirin .

oluşturma ayarları 28/06/2016

GÜNCELLEME 24/05/2016

Ayarların adlandırılması bir kez daha değişti:

Bir sayfayı baskı önizleme modunda görüntülemek için DevTools ana menüsünü açın, Diğer Araçlar > Oluşturma'yı seçin ve ardından açılır menü yazdırmaya ayarlanmış olarak CSS Medyasını Taklit Et onay kutusunu etkinleştirin .

CSS ortamını taklit et

— Patrik Affentranger
kaynak
2
@SupaIrish Evet, Firefox için Szymon'un cevabına bakınız.
— djule5
Dokümantasyon tamamen eskimiş ve "daha fazla geçersiz kılma" alanı içinde hiçbir yerde öykünme css ortamı yok. O nereye gitti?
— TetraDev
2
Onun altında "konsol (esc)" sonra "3 dikey nokta" sonra "render" sonra "baskı ortamı öykün" altında yer - neden bu kadar gizli hiçbir fikrim yok.
— TetraDev
osx bu seçeneği seçmek bir şey yapmak gibi görünmüyor?
— v3nt
165

Firefox'ta Shift+F2bir Geliştirici Araç Çubuğu komut satırı açmak için yazabilir ve ardındanmedia emulate print

Ayrıca diğer ortam türlerini bu şekilde taklit edebilirsiniz.

— Szymon Świtała
kaynak
3
Bunun yani fark ettik kudreti ekstra boşluk söz konusu yapabilmektedirler zaman - - makyaj emin, farklı olmadığı da baskı önizleme Eğer bu kademe ile bittikten sonra baskı önizleme temin edilen aynı görünüm yansıtmamaktadır.
— jave.web
15
Ne yazık ki, GLCI 62 sürümü ile firefox'tan düşürüldü.
— zerpsed
4
GLCI (shift + F12) olmadan bunu nasıl etkinleştirebilirim?
— StR
3
@StR Firefox'ta baskı stillerini şimdi başka bir yolla taklit edebilirsiniz: stackoverflow.com/questions/47877112/…
— TylerH
2
Firefox v68'de @TylerH'nin söylediklerini test ettim ve işe yarıyor.
— StR
22

Firefox + Web Geliştirici araç çubuğu uzantısının çeşitli stil sayfalarını etkinleştirmek / devre dışı bırakmak için bir yolu vardır.

CSS menüsünün altına bakın. Tek tek stil sayfalarını devre dışı bırakıp etkinleştiren bir menü ve bir "Medya türüne göre görüntüle" menüsü de vardır.

Ayrıca, Firefox'ta PrintPreview'e ulaşmak için gereken adımları azaltmak için , bir araç çubuğu düğmesi oluşturacak olan PrintPreview uzantısını deneyin .

Chrome için bu uzantının bir bağlantı noktası vardır . Chrome sürümü ile neler söyleyebileceğimden "Baskı stillerini göster" i seçebilirsiniz

— slolife
kaynak
12

Baskı önizleme içermeyen herhangi bir test yöntemi kullanmam. Çok fazla fark var: arka plan görüntüleri baskıda hiç çalışmıyor, ancak normal ekran bağlamlarında aralarında en önemli olanları gösteriyor.

Chrome'da control+phemen baskı önizlemeye gider. (Sadece menü çubuğuna kadar fareyi unutma). Bu oldukça kolay.

— Faust
kaynak
Chrome kesinlikle baskı ortamı emülasyonunda gösterilenlere yapışmaz. 2ms altında çalışan krom medya sorgusu ön baskı fonksiyonu yoksa, değişikliği boyamayacağını buldum.
— cchamberlain
1
Baskı önizleme ile ilgili sorun, eleman incelemesine izin vermemesidir, bu nedenle dolgu ve kenar boşlukları gibi şeyleri hata ayıklamak son derece zordur. Bu öğeleri ayrı ayrı görmek, kutu sorunlarında hata ayıklamaya çalışırken sahip olabileceğiniz en iyi şeydir.
— Seiyria
6

Test sırasında ekran stillerinizi devre dışı bırakabilir ve ortam türünüzü yazdırma stil sayfanız için "ekran" olarak değiştirebilirsiniz. Bu, gerçek bir baskı önizleme (sayfa sonları, belge genişliği, vb.) Kullanmakla aynı şey olmayacaktır, ancak yine de size oldukça iyi bir fikir vermektedir.

— Aslan burcu
kaynak
5

FF ile benim için basit ( @screenparça veya benzeri olmayan 1 ) :

  • koymak @media print { ...CSS içerik sonunda kısmını
  • sadece sarıcı beyanı dışında yorum/*@media print {*/ ... /*}*/
    • böylece baskı malzemelerini stillerinize uygulamak, uygulanabilir olduğunda hemen geçersiz kılar
  • ( LiveReload kullanıyorum, bu nedenle değişiklikleri kaydettikten hemen sonra tarayıcı sayfam yenileniyor )
  • ( aksi takdirde , LiveReload kullanmıyorsanız :) CTRL+Rsayfayı yeniden yüklemek için basın
  • şimdi zaten baskı önizlemesine ihtiyaç duymayan birçok tipik baskı CSS ayarlaması yapabilirsiniz (yazı tipi stili, yazı tipi boyutu, boşluklar, renkler)
  • ALT+F+Vbaskı önizlemesini açmak ve ALT+Wtekrar kapatmak için basın

1 : bunlardan biri varsa, test edilen medyanıza bağlı olarak bunları açık / kapalı olarak yorumlamak, aksi takdirde büyük bir sorun olmayabilir.

— Andreas Dietrich
kaynak
3

Bu diğer gönderide açıklandığı gibi ( Baskı Önizleme Modunda Chrome'un Element Inspector'ı mı kullanıyorsunuz ? ), Yazdırma stil sayfasını taklit etmek için krom kullanabilirsiniz. Bu, müfettişi, baskı iletişim kutusunun geldiğini tahmin etmek yerine stillerin nereden geldiğini görmek için kullanabileceğiniz için harikadır.

Chrome'un Element Inspector öğesinin sağ alt köşesindeki dişli çark simgesini tıklayarak Geçersiz Kılmalar Ayarları iletişim kutusuna erişin. Ardından hedef ortam türü olarak yazdır'ı seçin.

Müthiş!

— sadaka
kaynak
2

En azından Chrome'da: Geliştirme sırasında gövde etiketine ekleyin onload="window.print()". Bu, yenilemenizden hemen sonra yazdırma modunun açılmasına neden olur.

Ne yazık ki, aslında gömülü bir PDF olduğu için geliştirici araçlarının çok fazla kullanıldığı görülmüyor.

Bu arada 2. adımı ortadan kaldırmanın yolları vardır. Popüler olanlardan biri LiveReload.

— nafg
kaynak
0

Normal stil sayfanızı geçici olarak kaldırmayı ve yalnızca normal bağlantı etiketine sahip baskı sayfasına yüklemeyi deneyebilirsiniz.

— Andrew
kaynak
0

Chrome 62'de cmd-R / cmd-P, @media baskı tarzı sayfanın güzel bir önizlemesini görüntülemek için Mac'te iyi çalışır.

Bu, tarayıcı penceresinin sağ üst köşesindeki dikey elipslerden erişilebilir (Geliştirici Araçları değil) / Yazdır ...

Önizleme penceresini iptal etmek için esc kullanın.

IntelliJ IDEA ve Chrome ile iş akışım için: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab ve IDE'ye geri döndüm.

Windows 10'daki Chrome 62, aynı yerde aynı ctrl-p ile erişilebilen Yazdır ... menüsüne sahiptir: Chrome 62'de yazdır

— Mojo Techno
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.