Mode Headless Chrome

Mathias Bynens

Peter Kvitek

Pada tahun 2017, Chrome 59 memperkenalkan mode Headless, yang memungkinkan Anda menjalankan browser dalam lingkungan yang tidak diawasi, 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. Berikut adalah contoh command line minimal yang menggunakan mode Headless untuk membuat file PDF dari URL tertentu:

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

Cara kerja Headless

Sebelum mengulas cara kerja Headless saat ini, penting untuk memahami cara kerja Headless "lama". Cuplikan command line sebelumnya menggunakan tanda command line --headless, yang menunjukkan bahwa Headless hanyalah mode operasi browser Chrome biasa. Mungkin mengejutkan, hal ini sebenarnya tidak benar. Kenyataannya, Headless versi lama adalah implementasi browser alternatif terpisah yang kebetulan dikirimkan sebagai bagian dari biner Chrome yang sama. Kode ini tidak membagikan kode browser Chrome apa pun di //chrome.

Menerapkan dan memelihara browser Headless yang terpisah menghasilkan banyak overhead engineering. Dan, karena Headless merupakan implementasi terpisah, Headless memiliki bug dan fiturnya sendiri yang tidak ada di Chrome head. Hal ini menimbulkan kebingungan untuk pengujian browser otomatis, yang mungkin lulus dalam mode headless tetapi gagal dalam mode Headless, atau sebaliknya.

Selain itu, Headless mengecualikan semua pengujian otomatis yang mengandalkan penginstalan ekstensi browser. Hal yang sama berlaku untuk fungsi tingkat browser lainnya; kecuali jika Headless memiliki implementasi terpisah yang terpisah, fungsi ini tidak didukung.

Tim Chrome kini telah menyatukan mode Headless dan headful.

Mode Headless baru tersedia mulai Chrome 112. Dalam mode ini, Chrome membuat, tetapi tidak menampilkan, jendela platform apa pun. Semua fungsi lainnya, yang ada dan mendatang, tersedia tanpa batasan.

Menggunakan mode Headless

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

chrome --headless=new

Untuk saat ini, mode Headless lama masih tersedia dengan:

chrome --headless=old

Di Puppeteer

Untuk memilih ikut serta dalam mode Headless baru di Puppeteer:

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();

Di Selenium-WebDriver

Untuk menggunakan mode Headless baru di Selenium-WebDriver:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless=new'))
  .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 baru.

--dump-dom

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

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

Hal ini berbeda dengan mencetak kode sumber HTML, yang mungkin Anda lakukan dengan curl. Untuk memberikan output --dump-dom kepada Anda, Chrome terlebih dahulu mengurai kode HTML menjadi DOM, mengeksekusi <script> apa pun 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 dikombinasikan dengan flag --window-size.

Contoh:

chrome --headless=new --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=new --print-to-pdf https://developer.chrome.com/

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

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

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

--timeout

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

chrome --headless=new --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). Kode ini memaksa browser mengeksekusi setiap kode halaman secepat mungkin, sekaligus membuat halaman percaya bahwa waktu benar-benar telah berlalu.

Untuk mengilustrasikan 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=new --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=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu

Men-debug

Karena Chrome tidak terlihat secara efektif dalam mode Headless, mungkin terdengar sulit untuk menyelesaikan 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=new --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 Done. Anda akan melihat Target Jarak Jauh muncul dengan semua tab dan target lainnya tercantum.
4. Klik periksa untuk mengakses Chrome DevTools dan memeriksa target Headless jarak jauh, termasuk tayangan langsung halaman.

Masukan

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