Halaman ini diterjemahkan oleh Cloud Translation API.

Mode Headless Chrome mendapatkan upgrade: memperkenalkan --headless=new

Mode Headless Chrome kini jauh lebih baik!

Mathias Bynens

Peter Kvitek

Mode Headless Chrome kini jauh lebih baik! Artikel ini menyajikan ringkasan upaya engineering terbaru untuk menjadikan Headless lebih berguna bagi developer dengan menghadirkan Headless lebih dekat ke mode "headful" reguler Chrome.

Latar belakang

Pada tahun 2017 lalu, Chrome 59 memperkenalkan apa yang disebut mode Headless, yang memungkinkan Anda menjalankan browser di lingkungan yang tidak diawasi tanpa UI yang terlihat. Pada dasarnya, menjalankan Chrome tanpa Chrome!

Mode headless adalah pilihan populer untuk otomatisasi browser melalui project seperti Puppeteer atau ChromeDriver. Berikut adalah contoh command line minimal penggunaan mode Headless untuk membuat file PDF dari URL tertentu:

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

Apa yang baru di Headless?

Sebelum kita bahas peningkatan Headless baru-baru ini, penting untuk memahami cara kerja Headless "lama". Cuplikan command line yang kami tunjukkan sebelumnya menggunakan tanda command line --headless, yang menunjukkan bahwa Headless hanyalah mode operasi browser Chrome biasa. Mungkin yang mengejutkan, hal ini sebenarnya tidak benar. Secara teknis, Headless versi lama adalah implementasi browser alternatif terpisah yang kebetulan dikirim sebagai bagian dari biner Chrome yang sama. Kode browser Chrome apa pun tidak dibagikan di //chrome.

Seperti yang Anda bayangkan, menerapkan dan memelihara browser Headless yang terpisah ini disertai dengan banyak overhead engineering — tetapi itu bukan satu-satunya masalahnya. Karena Headless merupakan implementasi terpisah, Headless memiliki bug dan fiturnya sendiri yang tidak ada di Chrome yang headless. Hal ini menimbulkan situasi yang membingungkan saat pengujian browser otomatis mungkin lulus dalam mode headless tetapi gagal dalam mode Headless, atau sebaliknya — masalah utama bagi engineer otomatisasi. Contoh ini juga mengecualikan semua pengujian otomatis yang mengandalkan penginstalan ekstensi browser. Hal yang sama berlaku untuk fungsi tingkat browser lainnya: kecuali Headless memiliki implementasinya sendiri yang terpisah darinya, fungsi ini tidak didukung.

Pada tahun 2021, tim Chrome mulai menyelesaikan masalah ini, serta menggabungkan mode Headless dan headful sekali dan untuk selamanya.

Chrome Headless baru tidak lagi menjadi implementasi browser terpisah, dan kini berbagi kode dengan Chrome.

Dengan senang hati kami mengumumkan bahwa mode Headless yang baru kini tersedia di Chrome 112. Dalam mode ini, Chrome membuat, tetapi tidak menampilkan jendela platform apa pun. Semua fungsi lainnya, yang sudah ada dan yang akan datang, tersedia tanpa batasan.

Coba Headless baru

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

chrome --headless=new

Untuk saat ini, mode Headless lama masih tersedia melalui:

chrome --headless=old

Saat ini, meneruskan flag command line --headless tanpa nilai eksplisit akan tetap mengaktifkan mode Headless lama — tetapi kami berencana untuk mengubah setelan default ini ke Headless baru seiring waktu.

Kami berencana untuk sepenuhnya menghapus Headless lama dari biner Chrome dan berhenti mendukung mode ini di Puppeteer nanti pada tahun ini. Sebagai bagian dari penghapusan ini, kami akan menyediakan Headless versi lama sebagai biner mandiri terpisah bagi pengguna yang belum dapat melakukan upgrade.

Headless Baru di Puppeteer

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

Headless Baru 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 menggunakan binding bahasa lain.

Tanda command line khusus headless

Tanda command line berikut tersedia untuk mode Headless yang baru.

`--dump-dom`

Tanda --dump-dom mencetak DOM serial halaman target ke stdout. Berikut contohnya:

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

Perhatikan bahwa ini berbeda dengan sekadar mencetak kode sumber HTML (yang dapat Anda lakukan dengan curl). Untuk menghadirkan output --dump-dom, Chrome terlebih dahulu akan mengurai kode HTML menjadi DOM, mengeksekusi <script> yang mungkin mengubah DOM, lalu mengubah DOM tersebut kembali menjadi string HTML serial.

`--screenshot`

Tanda --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. Berikut contohnya:

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. Berikut contohnya:

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

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

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

Catatan: Fungsi di balik flag --no-pdf-header-footer sebelumnya tersedia melalui flag --print-to-pdf-no-header. Bergantung pada versi Chrome yang Anda gunakan, Anda mungkin perlu kembali ke nama flag lama.

`--timeout`

Flag --timeout menentukan waktu tunggu maksimum (dalam milidetik) saat 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/

Flag --timeout=5000 memberi tahu Chrome untuk menunggu hingga 5 detik sebelum mencetak PDF. Dengan demikian, proses ini memerlukan waktu maksimum 5 detik untuk dijalankan.

`--virtual-time-budget`

--virtual-time-budget memungkinkan perjalanan waktu. Yah, sampai batas tertentu. Waktu Virtual bertindak "cepat" untuk kode yang bergantung pada waktu (misalnya, setTimeout/setInterval). Waktu Virtual memaksa browser mengeksekusi kode halaman mana pun secepat mungkin sekaligus membuat halaman percaya bahwa waktu benar-benar berlalu.

Untuk mengilustrasikan penggunaannya, pertimbangkan halaman demo ini yang menambahkan, mencatat, dan menampilkan penghitung setiap detik menggunakan setTimeout(fn, 1000). Berikut adalah 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 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

Proses debug

Karena Chrome secara efektif tidak terlihat dalam mode Headless, mungkin terdengar sulit untuk mengetahui apa yang terjadi jika terjadi masalah. Untungnya, Anda dapat melakukan debug Chrome Headless dengan cara yang sangat mirip dengan Chrome headless. Triknya adalah meluncurkan Chrome dalam mode Headless dengan tanda 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 headless reguler, kita kemudian dapat menggunakan proses debug jarak jauh Chrome DevTools untuk terhubung ke target Headless dan memeriksanya. Untuk melakukannya, buka chrome://inspect, klik tombol Configure..., lalu masukkan alamat IP dan nomor port dari URL WebSocket. Dalam contoh di atas, saya memasukkan 127.0.0.1:60926. Klik Selesai dan Anda akan melihat Target Jarak Jauh muncul beserta semua tab dan target lainnya yang tercantum di bawah. Klik inspect dan kini Anda memiliki akses ke Chrome DevTools yang memeriksa target Headless jarak jauh, termasuk tayangan live halaman.

Chrome DevTools dapat memeriksa halaman target Headless jarak jauh

Masukan

Kami menantikan masukan Anda tentang mode Headless yang baru. Jika Anda mengalami masalah, harap laporkan.