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.
- Buka
chrome://inspect
dan 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 Done. Anda akan melihat Target Jarak Jauh muncul dengan semua tab dan target lainnya tercantum.
- 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.