Mode Headless Chrome

Mathias Bynens

Peter Kvitek

Dengan mode Headless Chrome, Anda dapat menjalankan browser di lingkungan tanpa pengawasan, tanpa UI yang terlihat. Pada dasarnya, Anda dapat menjalankan Chrome tanpa chrome.

Mode Headless adalah pilihan populer untuk otomatisasi browser, melalui project seperti Puppeteer atau ChromeDriver.

Menggunakan mode Headless

Untuk menggunakan mode Headless, teruskan tanda command line --headless:

chrome --headless

Menggunakan mode Headless lama

Sebelumnya, mode Headless adalah implementasi browser alternatif terpisah yang kebetulan dikirim sebagai bagian dari biner Chrome yang sama. Kode ini tidak membagikan kode browser Chrome apa pun di //chrome.

Chrome kini memiliki mode Headless dan headful terpadu.

Untuk saat ini, mode Headless lama masih tersedia dengan:

chrome --headless=old

Di Puppeteer

Untuk menggunakan mode Headless di Puppeteer:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'true', // (default) enables Headless
  // `headless: 'old'` enables old Headless
  // `headless: false` enables "headful" mode
});

const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');

// …

await browser.close();

Di Selenium-WebDriver

Untuk menggunakan mode Headless di Selenium-WebDriver:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

Lihat postingan blog tim Selenium untuk mengetahui informasi selengkapnya, termasuk contoh yang menggunakan binding bahasa lain.

Flag command line

Flag command line berikut tersedia dalam mode Headless.

--dump-dom

Flag --dump-dom mencetak DOM serialisasi halaman target ke stdout. Contoh:

chrome --headless --dump-dom https://developer.chrome.com/

Hal ini berbeda dengan mencetak kode sumber HTML, yang mungkin Anda lakukan dengan curl. Untuk menampilkan output --dump-dom, Chrome pertama-tama mengurai kode HTML menjadi DOM, menjalankan <script> yang mungkin mengubah DOM, lalu mengubah DOM tersebut kembali menjadi string HTML yang diserialisasi.

--screenshot

Flag --screenshot mengambil screenshot halaman target dan menyimpannya sebagai screenshot.png di direktori kerja saat ini. Hal ini sangat berguna jika digabungkan dengan flag --window-size.

Contoh:

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

--print-to-pdf

Flag --print-to-pdf menyimpan halaman target sebagai PDF bernama output.pdf di direktori kerja saat ini. Contoh:

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

Secara opsional, Anda dapat menambahkan tanda --no-pdf-header-footer untuk menghapus header cetak (dengan tanggal dan waktu saat ini) dan footer (dengan URL dan nomor halaman).

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

Catatan: Fungsi di balik tanda --no-pdf-header-footer sebelumnya tersedia dengan tanda --print-to-pdf-no-header. Anda mungkin perlu kembali ke nama tanda lama, jika menggunakan versi sebelumnya.

--timeout

Flag --timeout menentukan waktu tunggu maksimum (dalam milidetik) setelah itu konten halaman diambil oleh --dump-dom, --screenshot, dan --print-to-pdf meskipun halaman masih dimuat.

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

Flag --timeout=5000 memberi tahu Chrome untuk menunggu hingga 5 detik sebelum mencetak PDF. Dengan demikian, proses ini memerlukan waktu maksimal 5 detik untuk dijalankan.

--virtual-time-budget

--virtual-time-budget bertindak sebagai "maju cepat" untuk kode yang bergantung pada waktu (misalnya, setTimeout/setInterval). Fungsi ini memaksa browser untuk mengeksekusi salah satu kode halaman tersebut secepat mungkin, sekaligus membuat halaman percaya bahwa waktu benar-benar telah berlalu.

Untuk mengilustrasikan penggunaannya, pertimbangkan demo ini, yang menambahkan, mencatat ke dalam log, dan menampilkan penghitung setiap detik menggunakan setTimeout(fn, 1000). Berikut kode yang relevan:

<output>0</output>
<script>
  const element = document.querySelector('output');
  let counter = 0;
  setInterval(() => {
    counter++;
    console.log(counter);
    element.textContent = counter;
  }, 1_000);
</script>

Setelah satu detik, halaman akan berisi "1"; setelah dua detik, "2", dan seterusnya. Berikut cara mengambil status halaman setelah 42 detik dan menyimpannya sebagai PDF:

chrome --headless --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time

--allow-chrome-scheme-url

Flag --allow-chrome-scheme-url diperlukan untuk mengakses URL chrome://. Flag ini tersedia dari Chrome 123. Berikut contohnya:

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

Debug

Karena Chrome secara efektif tidak terlihat dalam mode Headless, mungkin terdengar sulit untuk memecahkan masalah. Anda dapat men-debug Chrome Headless dengan cara yang sangat mirip dengan Chrome headful.

Luncurkan Chrome dalam mode Headless dengan flag command line --remote-debugging-port.

chrome --headless --remote-debugging-port=0 https://developer.chrome.com/

Perintah ini akan mencetak URL WebSocket unik ke stdout, misalnya:

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

Di instance Chrome dengan UI, kita dapat menggunakan proses debug jarak jauh Chrome DevTools untuk terhubung ke target Headless dan memeriksanya.

1. Buka chrome://inspect, lalu klik tombol Konfigurasikan….
2. Masukkan alamat IP dan nomor port dari URL WebSocket.
   • Pada contoh sebelumnya, saya memasukkan 127.0.0.1:60926.
3. Klik Selesai. Anda akan melihat Target Jarak Jauh muncul dengan semua tab dan target lainnya yang tercantum.
4. Klik periksa untuk mengakses Chrome DevTools dan memeriksa target Headless jarak jauh, termasuk tampilan langsung halaman.

Masukan

Kami menantikan masukan Anda tentang mode Headless. Jika Anda mengalami masalah, laporkan bug.