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.
- Buka
chrome://inspect, lalu klik tombol Konfigurasikan…. - 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 Headless. Jika Anda mengalami masalah, laporkan bug.