Tarayıcı ekran görüntülerini, tarayıcımın desteklediğinden daha yüksek bir çözünürlükte nasıl çekebilirim?


97

4000x3000 piksel gibi çok yüksek çözünürlüklü bir monitörde göründüğü gibi bir web sitesinin ekran görüntüsünü almam gerekiyor. Dizüstü bilgisayarımın ekranı 1400x768 doğal çözünürlüğe sahip. Temel olarak, monitör ve video kartımın desteklediğinden çok daha yüksek bir monitör çözünürlüğüne sahip olduğumu simüle etmem gerekiyor. Sitenin ekran görüntüsünün, Firefox'ta CTRL MINUS (uzaklaştır) düğmesine art arda vurduğunuzda, ancak ölçeklendirme nedeniyle herhangi bir piksel kaybı yaşamadan nasıl göründüğünü görmek istiyorum. Bunu nasıl yapabilirim? Süper-yüksek çözünürlüklü ekranı simüle etmek için sanal makine yazılımını kullanmanın bir yolu var mı? Değilse, ekrandan daha büyük bir tarayıcı penceresi açmanın ve ardından içeriğini bir şekilde PNG olarak yakalamanın bir yolu var mı? İşe yarayabilecek başka bir şey var mı?


İşletim sisteminizin dpi ayarını değiştirmeyi deneyebilirsiniz. Windows 8'de kayıt defteri değerini değiştirmeyi gerektirdiğine inanıyorum. Bu size dev bir masaüstünü verirken, tabii ki yazı tipleri de ölçeklenir, bu nedenle metni okumak için gözlerinizi daha fazla zorlamanız gerekir.
jiggunjer

Yanıtlar:


104

Firefox ve 2 uzantıları ile yapabilirsiniz: Web Geliştirici ve FireShot .

Her iki uzantı yüklendikten sonra, Araçlar - Web Geliştirici - Yeniden Boyutlandır - Yeniden Boyutlandır Boyutlarını Düzenle ... seçeneğine gidin.

4000 x 3000 boyutunda yeni bir boyut ekleyin. Yalnızca sayfa içeriğinin 4000x3000 olmasını istiyorsanız "Görünümü yeniden boyutlandır" seçeneğini işaretleyin. Kontrol etmezseniz, Firefox’un tüm penceresi (araç çubukları, menü, ...) bu boyuta ayarlanır.

alt metin

Doğru boyutta olduktan sonra Araçlar - FireShot - Tüm Sayfayı Yakala ve ... 'ye gidin. Örneğin kaydet gibi bir eylem seçin. Web Developer tarafından ayarlanan sayfa içeriğini istenen boyuta kaydeder.

alt metin


@snark - Neredeyse işe yaradı. Ancak görünen o ki Web Geliştiricisi eklentisi, vitrini ekranımdan daha büyük hale getirmeme izin vermiyor ...?
Joshua Carmody

@Joshua: Benim için iyi çalışıyor. Cevabımı göndermeden önce test ettim. Yeni bir test yaptım ama bu kadar büyük bir görüntünün nerede barındırılacağını bulamadım
Snark

1
Güncelleme: Ekrandan daha büyük bir pencere yapamama sorunu, Windows işletim sistemi tarafından getirilen bir sınırlama gibi görünüyor.
Joshua Carmody

@snark - Hangi işletim sistemini çalıştırdığınızı sormamın sakıncası var mı?
Joshua Carmody

2
@snark - Ah. Belki bir Windows XP meselesidir (burada buna bağlı kaldım). Her durumda, bunun üzerine FireBug kullanarak style = "width: 4000px; height: 3000px;" şeklinde bir DIV eklemek için çalışabilirim. HTML koduna girdikten sonra FireShot kullanarak, bu yüzden hala iyiyim. FireShot'ı işaretlediğiniz için teşekkür ederiz. Bu beni hayatı çok kolaylaştırıyor. Daha önce manuel olarak birleştirmek yerine dolaşıyor ve ekranlar çekiyordum. BÜYÜK BİR BOYA idi.
Joshua Carmody

19

Bu arada (en az bir veya iki yıl boyunca - sürüm 15'ten beri yanılmıyorsam) Firefox bunu doğrudan entegre geliştirici araçları aracılığıyla destekliyor.

Ya vurmak CtrlShift Mveya seçmek Duyarlı Tasarım Görünümü gelen Geliştirici Araçları şerit menüde simgeye.

Bu, bir ön ayar kümesi arasından seçim yapmanın yanı sıra istediğiniz çözünürlüğü girmenizi ve PNG formatında bir ekran görüntüsünü tek tıklamayla doğrudan diske kaydetmenizi sağlayacak olan bu görüşü getirecektir :

görüntü tanımını buraya girin


1
Yakınlaştırma yaparak hi-dpi görüntüleri simüle ederken ekran görüntüsü düğmesi düzgün çalışmayabilir. Bu durumda, geliştirici araç çubuğunu Shift+ açın F2ve screenshot --clipboard --fullpage"konsola" yapıştırın . Bu normal JS konsolundan farklı.
bıçak,

Bu, krom geliştirici konsolu cihaz test modu ile de çalışır. Ekran görüntüsü seçeneği, sağ üstteki açılır menüde.
Tully

Maalesef bu Chrome'da çalışmıyor gibi görünüyor; Sadece bir Microsoft Flow'un Chrome'unda tam görünümlü bir ekran görüntüsü almaya çalıştım (Firefox'un tam görünümlü ekran görüntüsü yöntemi işe yaramasına rağmen Flow Firefox'ta düzgün görüntülenmiyor) ve yalnızca görüntülenen alanın ekran görüntüsünü aldı ... başka bir deyişle, Chrome'un "ekran görüntüsü yakalama" ile "tam boyutta ekran görüntüsü yakalama" seçenekleri arasında fark yoktu.
TylerH


6

Bütünüyle bir web sayfasının .png görüntüsünü oluşturmak için Abduction adında bir FireFox eklentisi kullanıyorum . Maalesef bu eklenti henüz FireFox 3.6 ile uyumlu olacak şekilde güncellenmedi.

ScreenGrab aynı şeyi yapacak gibi görünüyor .


5

Firefox 16, artık geliştirici konsolu ile görünüm alanının boyutunu kontrol etme yeteneğine sahip:

Aç Araçlar ... Web Geliştirici ... Geliştirici Araç Çubuğu

Bu komutu kullanarak görünüm alanını yeniden boyutlandır:

resize to 5000 5000

Bu komutla ekran görüntüsü alma:

screenshot output.png

4

Eh, bir Linux (veya herhangi bir lezzet X Pencere Sistemi kurulumu) ile monitörünüzden daha büyük bir sanal masaüstü ayarlayabilirsiniz. İçeri doğru kaydırın, ancak tarayıcınızı en üst düzeye çıkarabileceğinizi ve ekran görüntüsünü alabileceğinizi düşünüyorum.

Windows veya OS X’de yapmanın bir yolu olup olmadığını bilmiyorum.


3

Bunu sık sık yapmanız gerekmiyorsa, thumbalizr gibi çevrimiçi hizmetleri tarayıcı eklentilerini yüklemekten daha kolay buluyorum .


1

Chrome'da, aşağıdakiler gibi birkaç uzantı vardır:

Başka bir Web sayfası ekran görüntüsü var, ancak ikiden fazla bağlantı yayınlayacak kadar itibarım yok

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.