Tam Sayfa Ekran Görüntüsü

Chrome DevTools Protocol üzerinden herhangi bir web sayfasının tam sayfa ekran görüntüsünü alın. Kaydırma gerektiren kısımlar da dahil olmak üzere tüm içeriği içeren tek bir PNG dosyası üretir. Node.js 22+ ve uzaktan hata ayıklama etkinleştirilmiş Chrome dışında harici bağımlılık yok.

Ön Koşullar

• Node.js 22+ (yerleşik WebSocket kullanır)
• Chrome/Chromium uzaktan hata ayıklama etkinleştirilmiş

Ortam hazırlığını kontrol edin:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --check

Chrome kontrolü başarısız olursa, kullanıcıya chrome://inspect/#remote-debugging açmasını ve "Bu tarayıcı örneğinde uzaktan hata ayıklamaya izin ver" seçeneğini etkinleştirmesini söyleyin.

İş Akışı

Seçenek A: Zaten açık olan bir sekmeyi ekran görüntüsü al (kimlik doğrulamalı sayfalar için önerilir)

1. Kullanılabilir sekmeleri listeleyin:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --list

2. Hedefi başlık/URL ile tanımlayın, ardından yakala:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> /tmp/screenshot.png --width 1200 --dpr 1

Seçenek B: URL'den ekran görüntüsü al (arka plan sekmesi açar, yakalar, kapatır)

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "https://example.com" /tmp/screenshot.png --width 1200 --dpr 1 --wait 15000

Not: --url modu arka plan sekmesi oluşturur. Kimlik doğrulama gerektiren sayfalar (SSO, giriş duvarları) bunun yerine Seçenek A'yı kullanmalıdır.

Parametreler

Parametre	Açıklama	Varsayılan
output	Çıkış PNG dosya yolu	/tmp/screenshot.png
--width	CSS piksel cinsinden görünüm alanı genişliği (makaleler: 1200, panolar: 1440-1920)	1200
--dpr	Cihaz piksel oranı (2 = Retina, ancak 4x dosya boyutu)	1
--wait	Sayfa yükleme zaman aşımı ms cinsinden (--url modu yalnızca)	15000
--css	Yakalamanın öncesine enjekte edilecek özel CSS (ör. öğeleri gizle)	—

Çıktıyı Doğrulayın

# macOS
sips -g pixelWidth -g pixelHeight /tmp/screenshot.png

# Linux
file /tmp/screenshot.png

Ana Yetenekler

1. SPA kaydırma konteyneri genişletimi — overflow-y: auto/scroll konteynerlerini algılar, tembel yüklemeyi tetiklemek için bunlar arasında kaydırır, ardından taşma kısıtlamalarını (Tailwind h-[calc(...)] dahil) kaldırır böylece tüm içerik tek bir geçişte işlenir.

2. DOM kararlılığı tespiti — readyState=complete sonrasında, DOM öğesi sayısı stabilize olana kadar izler. Bu, SPA çerçevelerinin dinamik içeriği bitirmesini sağlar.

3. Tembel yükleme tetikleme — Görünüm alanını artımlı olarak kaydırarak IntersectionObserver geri çağrılarını ateşler, ardından tüm <img> öğelerinin yüklenmesini tamamlamasını bekler.

4. Çok uzun sayfalar için döşeli yakalama — 16.000px'i aşan sayfalar 8.000px döşelerine bölünür ve Python PIL kullanılarak otomatik olarak birleştirilir. PIL kullanılabilir değilse, döşemeleri ayrı ayrı kaydetmeye geri döner.

5. Chrome'un otomatik keşfi — Hata ayıklama portunu bulmak için DevToolsActivePort dosyasını okur. Portları 9222, 9229, 9333 araştırmaya geri döner.

6. CDP Proxy yedek — CDP proxy'si tarayıcı WebSocket'i tuttuğunda, betik yakalama için proxy API uç noktalarına (/eval, /screenshot, /scroll) geri döner.

Nasıl Çalışır

1. Chrome hata ayıklama portunu keşfet
2. WebSocket üzerinden bağlan (CDP)
3. Hedefe iliştir / arka plan sekmesi oluştur
4. Emulation domain aracılığıyla görünüm alanı genişliğini ayarla
5. Bekle: readyState + DOM kararlılığı
6. Kaydırma konteynerlerini algıla ve genişlet
7. Sayfanın tamamında kaydır (tembel yüklemeyi tetikle)
8. Resimlerin tamamlanmasını bekle
9. Son içerik yüksekliğini ölç
10. Page.captureScreenshot (veya döşeli yakalama)
11. Döşemeleri birleştir (PIL varsa)
12. Görünüm alanını geri yükle, ayır, temizle

Kaçınılması Gereken Desenler

Yapma	Bunun yerine yap
10.000px'ten uzun sayfalar üzerinde --dpr 2 kullan	Chrome bellek sorunlarını önlemek için --dpr 1 kullan
Kimlik doğrulamalı/SSO sayfalar için --url kullan	Kullanıcının oturum açtığı bir sekmede --list + targetId kullan
SPA'lar için --wait değerini 5000'den düşük ayarla	SPA'lar verileri almak ve işlemek için zaman gerektirir; 10000-15000 kullan
Önce --check kontrol etmeden yakala	Chrome hata ayıklamasının kullanılabilir olduğunu her zaman doğrula
Tüm sayfalar için görünüm alanı genişliğini kodla	Makaleler için 1200, panolar/tablolar için 1440+ kullan
Çıktı doğrulamasını atla	Yakalamanın ardından her zaman sips veya file komutu ile doğrula

Sorun Giderme

Belirti	Neden	Çözüm
"Chrome hata ayıklama portu bulunamıyor"	Uzaktan hata ayıklama etkinleştirilmedi	chrome://inspect/#remote-debugging aç, etkinleştir
"WebSocket bağlantı zaman aşımı"	CDP proxy'si bağlantıyı tutuyor	Betik otomatik olarak proxy API'ye geri döner
Boş/beyaz ekran görüntüsü	Sayfa henüz yüklenmedi	--wait değerini artır
Altta kesilmiş	Kaydırma konteyneri genişletilmedi	Betik bunu otomatik olarak işler; devam ederse sorun dosyala
Bellek yetersiz	Çok uzun sayfa + yüksek DPR	--dpr değerini 1'e indirge ve/veya --width değerini azalt
"PIL stitching için kullanılamaz"	Python Pillow yüklü değil	pip3 install Pillow ile kur veya ayrı döşeme dosyalarını kabul et

Çapraz Referanslar

• engineering/browser-automation — CDP/Playwright üzerinden genel tarayıcı otomasyon desenleri
• engineering/performance-profiler — Görsel yakalamaları tamamlayabilecek performans analizi