Chrome'un Gözetimsiz modu çok daha iyi hale geldi!
Chrome'un Gözetimsiz modu çok daha iyi hale geldi! Bu makalede, gözetimsiz modu Chrome'un normal "dikkatli" moduna yaklaştırarak gözetimsiz modun geliştiriciler için daha kullanışlı hale getirilmesi amacıyla yapılan son mühendislik çalışmalarına genel bir bakış sunulmaktadır.
Arka plan
Chrome 59'da 2017 yılında, tarayıcıyı herhangi bir görünür kullanıcı arayüzü olmadan gözetimsiz bir ortamda çalıştırmanıza olanak tanıyan Gözetimsiz modu kullanıma sunduk. Kısacası, Chrome'u Chrome olmadan çalıştırmak!
Gözetimsiz mod, Puppeteer veya ChromeDriver gibi projelerde tarayıcı otomasyonu için yaygın olarak kullanılan bir seçenektir. Belirli bir URL'nin PDF dosyasını oluşturmak için Gözetimsiz modu kullanmaya ilişkin minimal komut satırı örneği aşağıda verilmiştir:
chrome --headless --print-to-pdf https://developer.chrome.com/
Gözetimsiz moddaki yenilikler
Son zamanlarda yapılan gözetimsiz iyileştirmelere geçmeden önce, "eski" gözetimsiz sistem özelliğinin nasıl çalıştığını anlamak önemlidir. Daha önce gösterdiğimiz komut satırı snippet'inde --headless komut satırı işareti kullanılmaktadır. Bu, Gözetimsiz özelliğinin normal Chrome tarayıcının yalnızca bir çalışma modu olduğunu belirtir. Belki de bunun aslında doğru olmamasıydı. Teknik olarak, eski gözetimsiz sistem, aynı Chrome ikili programı kapsamında gönderilen ayrı ve alternatif bir tarayıcı uygulamasıydı. //chrome'te Chrome tarayıcı kodunun hiçbiri paylaşılmaz.
Tahmin edebileceğiniz gibi, bu gözetimsiz tarayıcının uygulanması ve bakımının yapılması birçok mühendislik yükü beraberinde getirdi ve tek sorun bu değildi. Headless ayrı bir uygulama olduğundan, gözetimli Chrome'da bulunmayan kendi hataları ve özellikleri vardı. Bu durum, otomatik tarayıcı testlerinin gözetimsiz modda başarılıyken gözetimsiz modda (veya tam tersi) başarısız olabileceği kafa karıştırıcı bir durum yarattı. Bu da otomasyon mühendisleri için önemli bir sorun teşkil ediyordu. Ayrıca, örneğin bir tarayıcı uzantısının yüklü olduğu otomatik testler de hariç tutuldu. Aynı durum tarayıcı düzeyindeki diğer işlevler için de geçerlidir: Gözetimsiz, ayrı bir şekilde uygulanmadığı sürece desteklenmemektedir.
Chrome ekibi 2021'de bu sorunu çözmek ve Gözetimsiz ve gözetimsiz modları kesin olarak birleştirmek için işe koyuldu.
Yeni gözetimsiz modun artık Chrome 112'de kullanıma sunulduğunu duyurmaktan heyecan duyuyoruz. Chrome bu modda platform penceresi oluşturur ancak görüntülemez. Mevcut ve gelecekteki tüm diğer işlevler sınırlama olmadan kullanılabilir.
Yeni Headless'i deneyin
Yeni Gözetimsiz modu denemek için --headless=new komut satırı işaretini iletin:
chrome --headless=new
Eski Gözetimsiz modu şu anda kullanmaya devam edebilirsiniz:
chrome --headless=old
Şu anda --headless komut satırı işaretini belirli bir değer olmadan iletmeye devam etmek eski Gözetimsiz modu etkinleştirmektedir. Ancak zaman içinde bu varsayılan ayarı yeni Gözetimsiz mod olarak değiştirmeyi planlıyoruz.
Eski gözetimsiz modu Chrome ikili programından tamamen kaldırmayı ve bu yılın ilerleyen dönemlerinde Puppeteer'da bu modu desteklemeyi durdurmayı planlıyoruz. Bu kaldırma işlemi kapsamında, henüz yeni sürüme geçemeyen kullanıcılar için eski Gözetimsiz ikili programı ayrı bir bağımsız ikili program olarak kullanıma sunacağız.
Yeni Puppeteer'da Headless
Puppeteer'daki yeni Gözetimsiz modu 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 Yeni Gözetimsiz Uygulama
Selenium-WebDriver'da yeni Gözetimsiz modu 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ı kullanan örnekler de dahil olmak üzere daha fazla bilgi için Selenium ekibinin blog yayınına bakın.
Gözetimsiz komut satırı işaretleri
Yeni Gözetimsiz modda aşağıdaki komut satırı işaretleri kullanılabilir.
--dump-dom
--dump-dom işareti, hedef sayfanın serileştirilmiş DOM'sini stdout'a yazdırır. Aşağıda bir örnek verilmiştir:
chrome --headless=new --dump-dom https://developer.chrome.com/
Bunun sadece HTML kaynak kodunun yazdırılmasından farklı olduğunu unutmayın (curl ile bunu yapabilirsiniz). --dump-dom çıktısını almak için Chrome önce HTML kodunu bir DOM'ye ayrıştırır, DOM'u değiştirebilecek herhangi bir <script>'yi yürütür ve ardından bu DOM'u tekrar serileştirilmiş bir HTML dizesine dönüştürür.
--screenshot
--screenshot işareti, hedef sayfanın ekran görüntüsünü alır ve mevcut çalışma dizinine screenshot.png olarak kaydeder. Bu özellikle --window-size işaretiyle birlikte kullanıldığında kullanışlıdır. Aşağıda bir örnek verilmiştir:
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 dizinine output.pdf adlı bir PDF olarak kaydeder. Aşağıda bir örnek verilmiştir:
chrome --headless=new --print-to-pdf https://developer.chrome.com/
İsteğe bağlı olarak, yazdırma üstbilgisini (geçerli tarih ve saatle birlikte) ve altbilgiyi (URL ve sayfa numarasıyla birlikte) atlamak için --no-pdf-header-footer işaretini ekleyebilirsiniz.
chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
--timeout
--timeout işareti, sayfa hâlâ yükleniyor olsa bile sayfanın içeriğinin --dump-dom, --screenshot ve --print-to-pdf tarafından yakalanması için gereken 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 zamanda yolculuk imkanı sağlar! Bir ölçüde. Sanal Zaman, zamana bağlı tüm kodlar (örneğin, setTimeout/setInterval) için "ileri sarma" görevi görür. Sayfayı zamanın gerçekten geçtiğine inanırken tarayıcıyı sayfanın herhangi bir kodunu mümkün olduğunca hızlı yürütmeye zorlar.
Kullanımını göstermek için setTimeout(fn, 1000) kullanarak saniyede bir artış gösteren, günlüğe kaydeden ve bir sayaç görüntüleyen bu demo sayfasına göz atın. İlgili kod şudur:
<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, sayfada "1"; iki saniye sonra "2" vb. gösterilir. Aşağıda, sayfanın durumunu 42 saniye sonra nasıl yakalayacağınız ve PDF olarak kaydedeceğiniz 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'lerine erişmek için --allow-chrome-scheme-url işareti gereklidir. Bu işaret, Chrome 123 sürümünden itibaren kullanıma sunulmuştur. 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 fiilen görünmez olduğundan, herhangi bir sorun durumunda ne olup bittiğini anlamak zor gelebilir. Neyse ki Gözetimsiz Chrome'da, gözetimli Chrome'a çok benzer bir şekilde hata ayıklamak mümkündür. İşin sırrı, Chrome'u --remote-debugging-port komut satırı işaretiyle Gözetimsiz modda başlatmaktır.
chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/
Bu komut, stdout'a benzersiz bir WebSocket URL'sini yazdırır. Örneğin:
DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9
Normal bir gözetimli Chrome örneğinde, Gözetimsiz hedefe bağlanmak ve onu incelemek için Chrome DevTools uzaktan hata ayıklama özelliğini kullanabiliriz. Bunun için chrome://inspect adresine gidin, Yapılandır... düğmesini tıklayın ve WebSocket URL'sinden IP adresini ve bağlantı noktası numarasını girin. Yukarıdaki örnekte 127.0.0.1:60926 değerini girdim. Bitti'yi tıkladığınızda, tüm sekmeleri ve aşağıda listelenen diğer hedeflerle birlikte bir Uzak Hedef görürsünüz. inspect'yi tıkladığınızda artık inspect, uzak Gözetimsiz hedefi inceleyen Chrome Geliştirici Araçları'na erişebilirsiniz.
Geri bildirim
Yeni gözetimsiz modla ilgili geri bildiriminizi öğrenmek için sabırsızlanıyoruz. Herhangi bir sorunla karşılaşırsanız lütfen bunları bildirin.