Chrome Gözetimsiz modu

Mathias Bynens

Peter Kvitek

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

Not: --headless komut satırı işaretini belirli bir değer olmadan geçirmek, eski gözetimsiz modu etkinleştirmeye devam eder ancak bu varsayılan ayarı değiştirmeyi planlıyoruz. 2024'te Chrome ikili programından eski Gözetimsiz modunu kaldırıp Puppeteer'da bu modu desteklemeyi bırakacağız. Bu eş zamanlı olarak, eski Gözetimsiz modu, henüz yükseltme yapamayan kullanıcılar için bağımsız bir ikili program olarak kullanıma sunacağız.

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.

1. chrome://inspect sayfasına gidin ve Yapılandır... düğmesini tıklayın.
2. WebSocket URL'sindeki IP adresini ve bağlantı noktası numarasını girin.
   • Önceki örnekte 127.0.0.1:60926 değerini girdim.
3. Done'ı (Bitti) tıklayın. Bir Uzak Hedefin tüm sekmeleriyle ve listelenen diğer hedeflerle birlikte göründüğünü göreceksiniz.
4. 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.