Với chế độ Không có giao diện người dùng của Chrome, bạn có thể chạy trình duyệt trong môi trường không cần giám sát 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ế độ Không có giao diện người dùng là một phương thức triển khai trình duyệt riêng biệt, thay thế và tình cờ được vận chuyển trong cùng một tệp nhị phân Chrome. Ứng dụng này không chia sẻ bất kỳ mã trình duyệt Chrome nào trong //chrome.
Chrome hiện đã hợp nhất chế độ Không có giao diện người dùng và chế độ có giao diện người dùng.
Hiện tại, bạn vẫn có thể sử dụng chế độ Không có giao diện người dùng cũ với:
chrome --headless=old
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 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();
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ả cá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.
--dump-dom
Cờ --dump-dom in DOM đã chuyển đổi tuần tự của trang đích vào stdout.
Ví dụ:
chrome --headless --dump-dom https://developer.chrome.com/
Việc 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. Để cung cấp 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ể 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 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 lưu trang đích dưới dạng tệp PDF có tên 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 đầu trang in (có ngày và giờ hiện tại) và chân trang (có URL và số trang).
chrome --headless --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
Không: Chức năng đằng sau cờ --no-pdf-header-footer trước đây đã có với cờ --print-to-pdf-no-header. Bạn có thể cần phải quay lại tên cờ cũ nếu đang sử 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 PDF. Do đó, quá trình này mất tối đa 5 giây để chạy.
--virtual-time-budget
--virtual-time-budget đóng vai trò là "tiến nhanh" cho mọi mã phụ thuộc thời gian (ví dụ: setTimeout/setInterval). Phương thức này buộc trình duyệt thực thi mọi mã của trang nhanh nhất có thể trong khi vẫn khiến 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 setTimeout(fn, 1000). Dưới đâ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 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 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 cần có cờ --allow-chrome-scheme-url để truy cập vào 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 không hiển thị hiệu quả ở chế độ Không có giao diện người dùng, nên có vẻ như việc giải quyết vấn đề sẽ gặp 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.
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, chúng ta có thể sử dụng tính nă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 Không có giao diện người dùng và kiểm tra mục tiêu đó.
- Chuyển đến
chrome://inspectrồi nhấp vào nút Configure… (Định cấu hình…). - Nhập địa chỉ IP và số cổng từ URL WebSocket.
- Trong ví dụ trước, tôi đã nhập
127.0.0.1:60926.
- Trong ví dụ trước, tôi đã nhập
- 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ê.
- Nhấp vào 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 Không có giao diện người dùng từ xa, bao gồm cả chế độ xem trực tiếp của trang.
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 vấn đề, hãy báo cáo lỗi.