Mode Headless Chrome

Mathias Bynens

Peter Kvitek

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

Mode headless adalah pilihan populer untuk otomatisasi browser, melalui proyek seperti Puppeteer atau ChromeDriver.

Menggunakan mode Headless

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

chrome --headless

Gunakan mode Headless lama

Sebelumnya, Mode Headless adalah implementasi browser alternatif yang terpisah yang kebetulan dikirim sebagai bagian dari biner Chrome yang sama. Tidak dibagikan 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 lainnya.

Tanda command line

Tanda command line berikut tersedia dalam mode Headless.

--dump-dom

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

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

Ini berbeda dengan mencetak kode sumber HTML, yang mungkin Anda lakukan dengan curl. Untuk memberikan output --dump-dom, Chrome akan mengurai HTML terlebih dahulu kode ke DOM, mengeksekusi <script> apa pun yang mungkin mengubah DOM, lalu mengubah DOM tersebut kembali menjadi string HTML berseri.

--screenshot

Tanda --screenshot mengambil screenshot halaman target dan menyimpannya sebagai screenshot.png di direktori kerja saat ini. Hal ini sangat berguna dalam kombinasi dengan tanda --window-size.

Contoh:

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

--print-to-pdf

Tanda --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/

Anda juga dapat menambahkan tanda --no-pdf-header-footer untuk menghilangkan pencetakan header (dengan tanggal dan waktu saat ini) dan footer (dengan URL dan halaman angka tertentu).

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

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

--timeout

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

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

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

--virtual-time-budget

--virtual-time-budget bertindak sebagai "maju cepat" untuk kode yang bergantung pada waktu (misalnya, setTimeout/setInterval). Pola ini memaksa {i>browser<i} untuk menjalankan kode halaman secepat mungkin sekaligus membuat halaman percaya bahwa waktu berlalu.

Untuk menggambarkan penggunaannya, pertimbangkan demo ini, yang menambah, mencatat, 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 adalah cara merekam 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

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

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

Debug

Karena Chrome tidak terlihat secara efektif dalam mode Headless, ini mungkin terdengar rumit untuk memecahkan suatu masalah. Dimungkinkan untuk melakukan debug Chrome Headless dengan cara yang sangat mirip seperti Chrome headful.

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

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

Tindakan 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

Dalam instance Chrome headful, kita kemudian dapat menggunakan Proses debug jarak jauh Chrome DevTools untuk terhubung ke target Headless dan memeriksanya.

1. Buka chrome://inspect dan klik tombol Configure....
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 {i>Remote Target<i} muncul dengan semua tab dan target lain yang tercantum.
4. Klik inspect untuk mengakses Chrome DevTools dan memeriksa remote Target headless, termasuk tayangan langsung halaman.

Masukan

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