Chế độ không có giao diện người dùng của Chrome

Mathias Bynens
Peter Kvitek
Peter Kvitek

Với chế độ Chrome Headless, bạn có thể chạy trình duyệt trong một môi trường không có người dùng, mà không có giao diện người dùng nào hiển thị. Về cơ bản, bạn có thể chạy Chrome mà không cần chrome.

Chế độ không có giao diện người dùng là lựa chọn phổ biến để tự động hoá trình duyệt, thông qua các dự án như Puppeteer hoặc ChromeDriver.

Sử dụng Chế độ không có giao diện người dùng

Để sử dụng chế độ Không có giao diện người dùng, hãy truyền cờ dòng lệnh --headless:

chrome --headless

Sử dụng Chế độ không có giao diện người dùng cũ

Trước đây, chế độ Headless là một chế độ triển khai trình duyệt riêng biệt, thay thế được vận chuyển như một phần của cùng một tệp nhị phân Chrome. Không có mã trình duyệt Chrome nào được chia sẻ trong //chrome.

Chrome hiện có chế độ không có giao diện người dùng và chế độ có giao diện người dùng hợp nhất.

Chế độ không có giao diện người dùng chia sẻ mã với Chrome.

Kể từ Chrome 132.0.6793.0, Chế độ không giao diện người dùng cũ chỉ có dưới dạng một tệp nhị phân độc lập có tên là chrome-headless-shell mà bạn có thể tải xuống tại đây.

Trong Puppeteer

Cách sử dụng Chế độ không có giao diện người dùng trong 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();

Để biết thêm thông tin về cách sử dụng Headless trong Puppeteer, bạn có thể tham khảo các tài nguyên tại đây.

Trong Selenium-WebDriver

Cách sử dụng Chế độ không có giao diện người dùng trong Selenium-WebDriver:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

Hãy xem bài đăng trên blog của nhóm Selenium để biết thêm thông tin, bao gồm cả ví dụ sử dụng các liên kết ngôn ngữ khác.

Cờ hiệu dòng lệnh

Các cờ dòng lệnh sau đây có sẵn ở chế độ Không có giao diện người dùng và trong Headless Shell.

--dump-dom

Cờ --dump-dom in DOM được chuyển đổi tuần tự của trang đích vào stdout. Ví dụ:

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

Điều này khác với việc in mã nguồn HTML mà bạn có thể thực hiện bằng curl. Để mang đến cho bạn kết quả của --dump-dom, trước tiên, Chrome sẽ phân tích cú pháp mã HTML thành một DOM, thực thi mọi <script> có thể làm thay đổi DOM, sau đó chuyển DOM đó trở lại thành một chuỗi HTML được chuyển đổi tuần tự.

--screenshot

Cờ --screenshot chụp ảnh màn hình của trang đích và lưu dưới dạng screenshot.png trong thư mục đang hoạt động. Điều này đặc biệt hữu ích khi kết hợp với cờ --window-size.

Ví dụ:

chrome --headless --screenshot --window-size=412,892 https://developer.chrome.com/

--print-to-pdf

Cờ --print-to-pdf sẽ lưu trang đích dưới dạng tệp PDF có tên là output.pdf trong thư mục đang hoạt động. Ví dụ:

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

Nếu muốn, bạn có thể thêm cờ --no-pdf-header-footer để bỏ qua phần đầu trang (có ngày và giờ hiện tại) và chân trang (có URL và số trang) khi in.

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

Lưu ý: Chức năng đằng sau cờ --no-pdf-header-footer trước đây có sẵn với cờ --print-to-pdf-no-header. Bạn có thể cần quay lại tên cờ cũ nếu đang dùng phiên bản trước.

--timeout

Cờ --timeout xác định thời gian chờ tối đa (tính bằng mili giây) sau đó nội dung của trang sẽ được --dump-dom, --screenshot và --print-to-pdf ghi lại ngay cả khi trang vẫn đang tải.

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

Cờ --timeout=5000 yêu cầu Chrome đợi tối đa 5 giây trước khi in tệp PDF. Do đó, quá trình này mất tối đa 5 giây để chạy.

--virtual-time-budget

--virtual-time-budget hoạt động như một nút "tua đi" cho mọi mã phụ thuộc vào thời gian (ví dụ: setTimeout/setInterval). Nó buộc trình duyệt thực thi mọi mã của trang nhanh nhất có thể trong khi làm cho trang tin rằng thời gian thực sự trôi qua.

Để minh hoạ cách sử dụng, hãy xem xét bản minh hoạ này. Bản minh hoạ này tăng, ghi nhật ký và hiển thị bộ đếm mỗi giây bằng cách sử dụng setTimeout(fn, 1000). Sau đây là mã có liên quan:

<output>0</output>
<script>
  const element = document.querySelector('output');
  let counter = 0;
  setInterval(() => {
    counter++;
    console.log(counter);
    element.textContent = counter;
  }, 1_000);
</script>

Sau một giây, trang này sẽ chứa "1"; sau hai giây, "2", v.v. Sau đây là cách bạn chụp trạng thái của trang sau 42 giây và lưu trạng thái đó dưới dạng tệp PDF:

chrome --headless --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time

--allow-chrome-scheme-url

Bạn phải dùng cờ --allow-chrome-scheme-url để truy cập vào các URL chrome://. Cờ này có trong Chrome 123. Ví dụ:

chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu

Gỡ lỗi

Vì Chrome gần như không hiển thị ở chế độ Không giao diện người dùng, nên việc giải quyết vấn đề có thể khó khăn. Bạn có thể gỡ lỗi Headless Chrome theo cách rất giống với Chrome có giao diện người dùng.

Khởi chạy Chrome ở chế độ Không có giao diện người dùng bằng cờ dòng lệnh --remote-debugging-port.

chrome --headless --remote-debugging-port=0 https://developer.chrome.com/

Thao tác này sẽ in một URL WebSocket duy nhất vào stdout, ví dụ:

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

Trong một phiên bản Chrome có giao diện người dùng, sau đó, chúng ta có thể sử dụng gỡ lỗi từ xa bằng Công cụ của Chrome cho nhà phát triển để kết nối với mục tiêu Headless và kiểm tra mục tiêu đó.

  1. Chuyển đến chrome://inspect rồi nhấp vào nút Configure… (Định cấu hình...).
  2. Nhập địa chỉ IP và số cổng trong URL WebSocket.
    • Trong ví dụ trước, tôi đã nhập 127.0.0.1:60926.
  3. Nhấp vào Xong. Bạn sẽ thấy một Mục tiêu từ xa xuất hiện cùng với tất cả các thẻ và mục tiêu khác được liệt kê.
  4. Nhấp vào inspect (kiểm tra) để truy cập vào Công cụ của Chrome cho nhà phát triển và kiểm tra mục tiêu Headless từ xa, bao gồm cả chế độ xem trực tiếp của trang.

Công cụ dành cho nhà phát triển của Chrome có thể kiểm tra một trang đích Headless từ xa

Phản hồi

Chúng tôi rất mong nhận được ý kiến phản hồi của bạn về chế độ Không có giao diện người dùng. Nếu bạn gặp bất kỳ vấn đề nào, hãy báo cáo lỗi.