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
penerapan browser alternatif yang terpisah
yang dikirimkan sebagai bagian dari biner Chrome yang sama. Tidak membagikan
kode browser Chrome apa pun di
//chrome.
Chrome kini memiliki mode Headless dan headful terpadu.
Mulai Chrome 132.0.6793.0, mode Headless lama hanya tersedia sebagai biner mandiri bernama chrome-headless-shell yang dapat didownload di sini.
Di Puppeteer
Untuk menggunakan mode Headless di Puppeteer:
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: true, // (default) enables Chrome Headless mode
// `headless: 'shell'` enables Headless Shell (old headless)
// `headless: false` enables "headful" mode
});
const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');
// …
await browser.close();
Untuk mengetahui informasi selengkapnya tentang penggunaan Headless di Puppeteer, Anda dapat melihat referensi yang ada di sini.
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 penggunaan binding bahasa lainnya.
Tanda command line
Flag command line berikut tersedia dalam mode Headless dan di Headless shell.
--dump-dom
Flag --dump-dom mencetak DOM yang diserialisasi dari halaman target ke stdout.
Contoh:
chrome --headless --dump-dom https://developer.chrome.com/
Ini berbeda dengan mencetak kode sumber HTML, yang dapat Anda lakukan dengan
curl. Untuk menampilkan output --dump-dom, Chrome terlebih dahulu mengurai kode HTML menjadi DOM, menjalankan <script> yang dapat 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 menghilangkan 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
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. Oleh karena itu, proses ini membutuhkan waktu paling lama 5 detik untuk dijalankan.
--virtual-time-budget
--virtual-time-budget bertindak sebagai "percepatan" untuk kode yang bergantung pada waktu
(misalnya, setTimeout/setInterval). Kode ini memaksa browser untuk mengeksekusi kode
halaman secepat mungkin sambil membuat halaman percaya bahwa
waktu benar-benar berlalu.
Untuk menggambarkan penggunaannya, lihat demo ini, yang
menaikkan, 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 berisi "1"; setelah dua detik, "2", dan seterusnya. Berikut 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
Flag --allow-chrome-scheme-url diperlukan untuk mengakses URL chrome://.
Flag ini tersedia mulai Chrome 123. Berikut contohnya:
chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu
Debug
Karena Chrome tidak terlihat dalam mode Headless, mungkin akan 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/
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 headful, kita dapat menggunakan pen-debugan jarak jauh Chrome DevTools untuk terhubung ke target Headless dan memeriksanya.
- Buka
chrome://inspect, lalu klik tombol Konfigurasi…. - Masukkan alamat IP dan nomor port dari URL WebSocket.
- Pada contoh sebelumnya, saya memasukkan
127.0.0.1:60926.
- Pada contoh sebelumnya, saya memasukkan
- Klik Selesai. Anda akan melihat Target Jarak Jauh muncul dengan semua tab dan target lainnya yang tercantum.
- Klik periksa untuk mengakses Chrome DevTools dan memeriksa target Headless jarak jauh, termasuk tampilan langsung halaman.
Masukan
Kami menantikan masukan Anda tentang mode Tanpa Head. Jika Anda mengalami masalah, laporkan bug.