2017'de Chrome 59'da, tarayıcıyı görünür kullanıcı arayüzü olmayan gözetimsiz bir ortamda çalıştırmanıza olanak tanıyan Gözetimsiz modu kullanıma sunduk. Aslında, Chrome'u Chrome olmadan çalıştırabilirsiniz.
Gözetimsiz mod, Puppeteer veya ChromeDriver gibi projeler aracılığıyla tarayıcı otomasyonu için popüler bir tercihtir. Belirli bir URL'nin PDF dosyasını oluşturmak için gözetimsiz modu kullanan minimal bir komut satırı örneğini burada bulabilirsiniz:
chrome --headless --print-to-pdf https://developer.chrome.com/
Gözetimsiz özelliğin işleyiş şekli
Gözetimsizliğin şimdi nasıl çalıştığını gözden geçirmeden önce, "eski" Gözetimsiz aracın nasıl
çalıştığını anlamak önemlidir. Önceki komut satırı snippet'i, --headless
komut satırı işaretini kullanarak Gözetimsiz'in yalnızca normal Chrome tarayıcının bir çalışma modu olduğunu gösteriyor. Şaşırtıcı ancak bu doğru değildi.
Hatta eski Headless, aynı Chrome ikili programının bir parçası olarak gönderilen ayrı ve alternatif bir tarayıcı uygulamasıydı. //chrome
'te hiçbir Chrome tarayıcı kodunu paylaşmaz.
Ayrı bir Gözetimsiz tarayıcının uygulanması ve bakımı büyük ölçüde mühendislik yükünü de beraberinde getiriyordu. Headless ayrı bir uygulama olduğu için, headful Chrome'da bulunmayan kendi hataları ve özellikleri vardı. Bu durum, otomatik tarayıcı testlerinde karışıklığa yol açtı. Bu testler, gözetimsiz moddayken başarılı olabilirken Gözetimsiz modda başarısız olabilir. Bunun tam tersi de geçerlidir.
Ayrıca Gözetimsiz, tarayıcı uzantısı kurulumuna dayalı tüm otomatik testleri hariç tutmuştur. Aynısı, tarayıcı düzeyindeki diğer işlevler için de geçerli. Headless'ın ayrı bir uygulaması olmadığı sürece bu işlev desteklenmiyordu.
Chrome ekibi, gözetimsiz ve gözetimli modları birleştirdi.
Chrome 112'den itibaren yeni Gözetimsiz mod kullanıma sunuldu. Bu modda Chrome, herhangi bir platform penceresi oluşturur ancak görüntülemez. Mevcut ve gelecekteki diğer tüm işlevler herhangi bir sınırlama olmadan kullanılabilir.
Gözetimsiz modu kullanma
Yeni Gözetimsiz modunu kullanmak için --headless=new
komut satırı işaretini iletin:
chrome --headless=new
Şu an için eski Gözetimsiz modu aşağıdakilerle hâlâ kullanılabilir:
chrome --headless=old
Puppeteer'da
Puppeteer'da yeni Gözetimsiz modunu etkinleştirmek için:
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: 'new',
// `headless: true` (default) enables old Headless;
// `headless: 'new'` enables new Headless;
// `headless: false` enables "headful" mode.
});
const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');
// …
await browser.close();
Selenium-WebDriver'da
Selenium-WebDriver'da yeni Gözetimsiz modunu kullanmak için:
const driver = await env
.builder()
.setChromeOptions(options.addArguments('--headless=new'))
.build();
await driver.get('https://developer.chrome.com/');
// …
await driver.quit();
Diğer dil bağlamalarının kullanıldığı örnekler de dahil olmak üzere daha fazla bilgi için Selenium ekibinin blog yayınına bakın.
Komut satırı işaretleri
Aşağıdaki komut satırı işaretleri, yeni Gözetimsiz modda kullanılabilir.
--dump-dom
--dump-dom
işareti, hedef sayfanın serileştirilmiş DOM'sini stdout'a yazdırır.
Örneğin:
chrome --headless=new --dump-dom https://developer.chrome.com/
Bu işlem, curl
ile yapabileceğiniz HTML kaynak kodunu yazdırmadan farklıdır. Chrome, --dump-dom
çıktısını size sunmak için önce HTML kodunu bir DOM'ye ayrıştırır, DOM'yi değiştirebilecek tüm <script>
öğelerini yürütür, ardından bu DOM'yi tekrar serileştirilmiş HTML dizesine dönüştürür.
--screenshot
--screenshot
işareti, hedef sayfanın ekran görüntüsünü alır ve geçerli çalışma dizinine screenshot.png
olarak kaydeder. Bu, özellikle --window-size
işaretiyle birlikte kullanıldığında işe yarar.
Örneğin:
chrome --headless=new --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
--print-to-pdf
işareti, hedef sayfayı mevcut çalışma dizininde output.pdf
adlı bir PDF olarak kaydeder. Örneğin:
chrome --headless=new --print-to-pdf https://developer.chrome.com/
İsteğe bağlı olarak, yazdırma üstbilgisini (geçerli tarih ve saatle) ve altbilgiyi (URL ve sayfa numarasıyla) hariç tutmak için --no-pdf-header-footer
işaretini ekleyebilirsiniz.
chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
Hayır: --no-pdf-header-footer
işaretinin arkasındaki işlev daha önce --print-to-pdf-no-header
işaretiyle birlikte kullanılabiliyordu. Eski bir sürüm kullanıyorsanız
eski işaret adına geri dönmeniz gerekebilir.
--timeout
--timeout
işareti, sayfa hâlâ yükleniyor olsa bile sayfa içeriği --dump-dom
, --screenshot
ve --print-to-pdf
tarafından yakalanan maksimum bekleme süresini (milisaniye cinsinden) tanımlar.
chrome --headless=new --print-to-pdf --timeout=5000 https://developer.chrome.com/
--timeout=5000
işareti Chrome'a, PDF'yi yazdırmadan önce 5 saniye kadar beklemesini bildirir. Dolayısıyla bu işlemin çalışması en fazla 5 saniye sürer.
--virtual-time-budget
--virtual-time-budget
, zamana bağlı tüm kodlar (örneğin, setTimeout
/setInterval
) için "ileri sarma" işlevi görür. Tarayıcıyı, sayfanın herhangi bir kodunu mümkün olan en hızlı şekilde yürütmeye zorlar ve sayfayı gerçekten sürenin geçtiğine inandırır.
Kullanım durumunu göstermek için setTimeout(fn, 1000)
kullanılarak saniyede bir sayaç içeren, kaydedilen ve görüntülenen bu demoya göz atabilirsiniz. İlgili kod aşağıda verilmiştir:
<output>0</output>
<script>
const element = document.querySelector('output');
let counter = 0;
setInterval(() => {
counter++;
console.log(counter);
element.textContent = counter;
}, 1_000);
</script>
Bir saniye sonra sayfa "1" değerini, iki saniye sonra "2" değerini vb. içerir. 42 saniye sonra sayfanın durumunu nasıl yakalayacağınız ve PDF olarak nasıl kaydedeceğiniz aşağıda açıklanmıştır:
chrome --headless=new --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time
--allow-chrome-scheme-url
chrome://
URL'ye erişim için --allow-chrome-scheme-url
işareti gerekir.
Bu işaret, Chrome 123 sürümünde kullanılabilir. Aşağıda bir örnek verilmiştir:
chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu
Hata Ayıklama
Chrome, Gözetimsiz modda etkili bir şekilde görünmez olduğundan, bir sorunu çözmek kulağa zor gelebilir. Gözetimsiz Chrome'da, başlıklı Chrome'a çok benzer bir şekilde hata ayıklamak mümkündür.
--remote-debugging-port
komut satırı işaretiyle Chrome'u Gözetimsiz modda başlatın.
chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/
Bu, stdout'a benzersiz bir WebSocket URL'si yazdırır. Örneğin:
DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9
Dikkatli bir Chrome örneğinde, gözetimsiz hedefine bağlanmak ve hedefi incelemek için Chrome Geliştirici Araçları uzaktan hata ayıklama özelliğini kullanabiliriz.
chrome://inspect
sayfasına gidin ve Yapılandır... düğmesini tıklayın.- WebSocket URL'sindeki IP adresini ve bağlantı noktası numarasını girin.
- Önceki örnekte
127.0.0.1:60926
değerini girdim.
- Önceki örnekte
- Done'ı (Bitti) tıklayın. Bir Uzak Hedefin tüm sekmeleriyle ve listelenen diğer hedeflerle birlikte göründüğünü göreceksiniz.
- Chrome Geliştirici Araçları'na erişmek ve sayfanın canlı görünümü de dahil olmak üzere uzaktan kumandasız hedefi incelemek için İncele'yi tıklayın.
Geri bildirim
Yeni Gözetimsiz mod hakkındaki geri bildiriminizi öğrenmek için sabırsızlanıyoruz. Herhangi bir sorunla karşılaşırsanız hata bildiriminde bulunun.