Chrome Gözetimsiz modu

Peter Kvitek
Peter Kvitek

Chrome 59, 2017'de gözetimsiz modu kullanıma sundu. tarayıcıyı, görünür herhangi bir kullanıcı arayüzü olmadan gözetimsiz bir ortamda çalıştırmanızı sağlar. Aslında, Chrome'u Chrome olmadan çalıştırabilirsiniz.

Gözetimsiz mod, aşağıdaki gibi projeler aracılığıyla tarayıcı otomasyonu için popüler bir seçenektir: Puppeteer veya ChromeDriver. Aşağıda, PDF dosyası oluşturmak için gözetimsiz modu kullanan minimal bir komut satırı örneği verilmiştir. görebilirsiniz:

chrome --headless --print-to-pdf https://developer.chrome.com/

Gözetimsiz özelliğin işleyiş şekli

Gözetimsizliğin işleyiş şeklini şu an gözden geçirmeden önce, "eski" Gözetimsiz çalışıyordu. Önceki komut satırı snippet'i, --headless parametresini kullanır gösteren bir komut satırı işareti gösterir. Bu, Gözetimsiz'in normal Chrome Tarayıcı. Şaşırtıcı ancak bu doğru değildi. Aslına bakarsanız eski Headless ayrı ve alternatif bir tarayıcı uygulaması aynı Chrome ikili programının bir parçası olarak gönderilmiş olan değişiklikleri görürsünüz. Paylaşılmaz Chrome tarayıcı kodunun herhangi bir //chrome.

Ayrı bir Gözetimsiz tarayıcının uygulanması ve bakımı, birçok konuda genel giderleri karşılar. Gözetimsiz bir müşteri için ayrı bir uygulamada bulunmayan kendi hataları ve özellikleri olduğunu fark ettik. Chrome'a dokunun. Bu durum, otomatik tarayıcı testlerinde karmaşaya neden olmuştur. Bu testler, testlerin ancak gözetimsiz modda (veya tam tersi) başarısız olur.

Ayrıca Headless, tarayıcı temelli tüm otomatik testleri hariç tuttu uzantı yükleme. Aynısı, tarayıcı düzeyindeki diğer işlevler için de geçerlidir; Ancak Headless, ayrı bir şekilde uygulanmadığı sürece desteklenmiyordu.

Chrome ekibi, gözetimsiz ve gözetimli modları birleştirdi.

Yeni Chrome Headless artık ayrı bir tarayıcı uygulaması değildir ve bunun yerine Chrome ile kod paylaşmaktadır.

Chrome 112'den itibaren yeni Gözetimsiz mod kullanıma sunuldu. Chrome, bu modda herhangi bir platform penceresi görüntülenmiyor. Mevcut tüm diğer fonksiyonlar ve hiçbir sınırlama olmadan sunulur.

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, HTML kaynak kodunu yazdırmadan farklıdır. curl Chrome, --dump-dom çıktısını sağlamak için önce HTML'yi ayrıştırır. bir DOM'ye aktarması için, DOM'yi değiştirebilecek herhangi bir <script> öğesini yürütür ve ardından bu DOM'yi, serileştirilmiş bir HTML dizesine geri dönüştürür.

--screenshot

--screenshot işareti, hedef sayfanın ekran görüntüsünü alır ve screenshot.png mevcut çalışma dizininde. Bu, özellikle de --window-size işaretiyle birlikte gösterilir.

Örneğin:

chrome --headless=new --screenshot --window-size=412,892 https://developer.chrome.com/

--print-to-pdf

--print-to-pdf işareti, hedef sayfayı output.pdf adlı bir PDF dosyası olarak kaydeder mevcut çalışma dizinine ekleyin. Örneğin:

chrome --headless=new --print-to-pdf https://developer.chrome.com/

İsteğe bağlı olarak, yazdırmayı atlamak için --no-pdf-header-footer işaretini ekleyebilirsiniz. üstbilgi (geçerli tarih ve saat ile) ve altbilgi (geçerli tarih ve saat ile sayı).

chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/

Not: --no-pdf-header-footer işaretinin arkasındaki işlev daha önce sunuluyordu. --print-to-pdf-no-header işaretiyle kullanılabilir. Proje zaman çizelgesine eski bayrak adına (eski) denk geliyor.

--timeout

--timeout işareti, maksimum bekleme süresini (milisaniye cinsinden) tanımlar. Sayfanın içeriği --dump-dom, --screenshot ve --print-to-pdf (sayfa hâlâ yükleniyor olsa bile).

chrome --headless=new --print-to-pdf --timeout=5000 https://developer.chrome.com/

--timeout=5000 işareti, Chrome'a yazdırmadan önce 5 saniye kadar beklemesini bildirir PDF'de bulabilirsiniz. Dolayısıyla bu işlemin çalışması en fazla 5 saniye sürer.

--virtual-time-budget

--virtual-time-budget, "ileri sarma" işlevi görür zamana bağlı herhangi bir kod için (örneğin, setTimeout/setInterval). Tarayıcının, tarayıcı tarafından kodu mümkün olduğunca hızlı bir şekilde düzenleyerek, sayfanın zaman geçiyor.

Nasıl kullanıldığını göstermek için artımlar, günlük kayıtları ve her saniyede bir sayaç gösterir setTimeout(fn, 1000) kullanılıyor. İ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 içerir; iki saniye sonra, "2" vb. 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şmek için --allow-chrome-scheme-url işareti gerekir. Bu işaret, Chrome 123 sürümünde kullanıma sunulmuştur. Aşağıda bununla ilgili bir örnek verilmiştir:

chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu

Hata Ayıklama

Chrome, gözetimsiz modda etkili şekilde görünmez olduğundan kulağa karmaşık gelebilir. bir teknik daha var. Gözetimsiz Chrome'da başlık düzeyi Chrome'a benziyor.

Chrome'u --remote-debugging-port komut satırı işareti.

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, oluşturduğumuz Bağlanmak için Chrome Geliştirici Araçları uzaktan hata ayıklama denetlemesi gerekir.

  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. Bitti'yi tıklayın. Uzak Hedef tüm sekmeleriyle birlikte görünür ve listelenen diğer hedefler.
  4. Chrome Geliştirici Araçları'na erişmek ve uzaktan kumandayı incelemek için İncele'yi tıklayın. Sayfanın canlı görünümü dahil gözetimsiz hedef.

Chrome Geliştirici Araçları, uzaktaki gözetimsiz hedef sayfayı inceleyebilir

Geri bildirim

Yeni Gözetimsiz mod hakkındaki geri bildiriminizi öğrenmek için sabırsızlanıyoruz. Eğer hata bildiriminde bulunun.