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.
- Buka
chrome://inspectdan klik tombol Configure.... - 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 {i>Remote Target<i} muncul dengan semua tab dan target lain yang tercantum.
- 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.