ด้วยโหมดไม่มีส่วนหัวของ Chrome คุณสามารถเรียกใช้เบราว์เซอร์ในสภาพแวดล้อมที่ไม่มีผู้ดูแล โดยไม่มี UI ที่มองเห็นได้ และที่สำคัญ คุณสามารถเรียกใช้ Chrome โดยไม่ใช้ Chrome ได้
โหมดไม่มีส่วนหัวเป็นตัวเลือกยอดนิยมสำหรับระบบอัตโนมัติของเบราว์เซอร์ผ่านโปรเจ็กต์ต่างๆ เช่น Puppeteer หรือ ChromeDriver
ใช้โหมดไม่มีส่วนหัว
หากต้องการใช้โหมดไม่มีส่วนหัว ให้ส่งแฟล็กบรรทัดคำสั่ง --headless ดังนี้
chrome --headless
ใช้โหมดไม่มีส่วนหัวแบบเก่า
ก่อนหน้านี้ โหมดไม่มีส่วนหัวคือ
การใช้เบราว์เซอร์สำรองที่แยกต่างหาก
ที่เกิดขึ้นโดยเป็นส่วนหนึ่งของไบนารีของ Chrome เดียวกัน ไม่ได้แชร์
โค้ดเบราว์เซอร์ Chrome ใดๆ ใน
//chrome
ตอนนี้ Chrome มีโหมดไม่มีส่วนหัวและโหมดส่วนหัวเป็นแบบรวม
สำหรับตอนนี้ โหมดไม่มีส่วนหัวแบบเก่าจะยังคงใช้ได้กับอุปกรณ์ต่อไปนี้
chrome --headless=old
ในเกมเชิดหุ่นกระบอก
วิธีใช้โหมดไม่มีส่วนหัวใน 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();
ใน Selenium-WebDriver
วิธีใช้โหมดไม่มีส่วนหัวใน Selenium-WebDriver
const driver = await env
.builder()
.setChromeOptions(options.addArguments('--headless'))
.build();
await driver.get('https://developer.chrome.com/');
// …
await driver.quit();
ดูข้อมูลเพิ่มเติมและตัวอย่างการใช้การเชื่อมโยงภาษาอื่นได้ที่บล็อกโพสต์ของทีม Selenium
แฟล็กบรรทัดคำสั่ง
แฟล็กบรรทัดคำสั่งต่อไปนี้พร้อมใช้งานในโหมดไม่มีส่วนหัว
--dump-dom
แฟล็ก --dump-dom จะพิมพ์ DOM แบบอนุกรมของหน้าเป้าหมายไปยัง stdout
เช่น
chrome --headless --dump-dom https://developer.chrome.com/
วิธีนี้แตกต่างจากการพิมพ์ซอร์สโค้ด HTML ซึ่งคุณอาจทำกับ
curl Chrome จะแยกวิเคราะห์ HTML เพื่อนำเอาต์พุตของ --dump-dom มาให้คุณ
ลงใน DOM ซึ่งจะเรียกใช้ <script> ใดๆ ที่อาจเปลี่ยน DOM จากนั้น
เปลี่ยน DOM นั้นกลับไปเป็นสตริง HTML แบบอนุกรม
--screenshot
แฟล็ก --screenshot ถ่ายภาพหน้าจอของหน้าเป้าหมายและบันทึกไว้เป็น
screenshot.png ในไดเรกทอรีที่ใช้งานอยู่ในปัจจุบัน ซึ่งจะเป็นประโยชน์อย่างยิ่งใน
ร่วมกับแฟล็ก --window-size
เช่น
chrome --headless --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
แฟล็ก --print-to-pdf บันทึกหน้าเป้าหมายเป็นไฟล์ PDF ชื่อ output.pdf ใน
ไดเรกทอรีที่ใช้งานอยู่ในปัจจุบัน เช่น
chrome --headless --print-to-pdf https://developer.chrome.com/
นอกจากนี้ คุณยังเพิ่มธง --no-pdf-header-footer เพื่อละเว้นการพิมพ์ได้
ส่วนหัว (ที่มีวันที่และเวลาปัจจุบัน) และส่วนท้าย (ที่มี URL และหน้าเว็บ)
ตัวเลข)
chrome --headless --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
ไม่ได้: ฟังก์ชันการทำงานเบื้องหลังการตั้งค่าสถานะ --no-pdf-header-footer เดิมมีอยู่แล้ว
พร้อมใช้งานเมื่อมีแฟล็ก --print-to-pdf-no-header คุณอาจต้องกลับไปใช้
ชื่อแฟล็กเดิมหากใช้เวอร์ชันก่อนหน้า
--timeout
แฟล็ก --timeout กำหนดเวลารอสูงสุด (เป็นมิลลิวินาที) หลังจากนั้น
เนื้อหาของหน้าถูกบันทึกไว้โดย --dump-dom, --screenshot และ
--print-to-pdf แม้ว่าหน้าเว็บจะยังคงโหลดอยู่
chrome --headless --print-to-pdf --timeout=5000 https://developer.chrome.com/
ธง--timeout=5000จะบอกให้ Chrome รอประมาณ 5 วินาทีก่อนพิมพ์
PDF ดังนั้น กระบวนการนี้จึงใช้เวลาสูงสุด 5 วินาทีในการเรียกใช้
--virtual-time-budget
--virtual-time-budget ทำหน้าที่เป็น "กรอไปข้างหน้า" สำหรับโค้ดที่ขึ้นอยู่กับเวลา
(เช่น setTimeout/setInterval) ซึ่งจะบังคับให้เบราว์เซอร์เรียกใช้
ของโค้ดของหน้าเว็บให้เร็วที่สุดเท่าที่จะทำได้ ขณะเดียวกันก็ทำให้หน้าเว็บเชื่อว่า
เวลาทั้งหมดผ่านไป
ถ้าต้องการดูตัวอย่างการใช้งาน
ให้ดูการสาธิตนี้
ที่เพิ่มขึ้น บันทึก และแสดงตัวนับทุกวินาที
ด้วย setTimeout(fn, 1000) นี่คือโค้ดที่เกี่ยวข้อง
<output>0</output>
<script>
const element = document.querySelector('output');
let counter = 0;
setInterval(() => {
counter++;
console.log(counter);
element.textContent = counter;
}, 1_000);
</script>
หลังจากผ่านไป 1 วินาที หน้าเว็บจะมี "1" หลังจากสองวินาที "2" เป็นเช่นนี้ไปเรื่อยๆ วิธีบันทึกสถานะของหน้าเว็บหลังจากผ่านไป 42 วินาทีและบันทึกเป็น PDF มีดังนี้
chrome --headless --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time
--allow-chrome-scheme-url
ต้องมีแฟล็ก --allow-chrome-scheme-url เพื่อเข้าถึง URL chrome://
ธงนี้มีอยู่ใน Chrome 123 เช่น
chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu
แก้ไขข้อบกพร่อง
เนื่องจาก Chrome จะมองไม่เห็นอย่างมีประสิทธิภาพในโหมดไม่มีส่วนหัว จึงอาจฟังดูยุ่งยาก เพื่อแก้ไขปัญหา คุณอาจแก้ไขข้อบกพร่องของ Chrome แบบ Headless ได้ในลักษณะที่ คล้ายกับ Chrome ที่เน้นส่วนหัว
เปิด Chrome ในโหมดไม่มีส่วนหัวด้วย
แฟล็กบรรทัดคำสั่ง --remote-debugging-port
chrome --headless --remote-debugging-port=0 https://developer.chrome.com/
การดำเนินการนี้จะพิมพ์ URL ของ WebSocket ที่ไม่ซ้ำกันไปยัง stdout ตัวอย่างเช่น
DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9
ในอินสแตนซ์ Chrome ล่วงหน้า เราสามารถใช้ การแก้ไขข้อบกพร่องจากระยะไกลในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อเชื่อมต่อ ไปยังเป้าหมายแบบไม่มีส่วนหัวแล้วตรวจสอบ
- ไปที่
chrome://inspectแล้วคลิกปุ่มกำหนดค่า... - ป้อนที่อยู่ IP และหมายเลขพอร์ตจาก URL ของ WebSocket
- ในตัวอย่างก่อนหน้านี้ ฉันป้อน
127.0.0.1:60926
- ในตัวอย่างก่อนหน้านี้ ฉันป้อน
- คลิกเสร็จสิ้น คุณควรจะเห็นเป้าหมายระยะไกลปรากฏขึ้นพร้อมกับแท็บทั้งหมด เป้าหมายอื่นๆ ในรายการ
- คลิกinspectเพื่อเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และตรวจสอบรีโมต เป้าหมายแบบไม่มีส่วนหัว รวมถึงการดูหน้าแบบสด
ความคิดเห็น
เราหวังว่าจะได้รับความคิดเห็นจากคุณเกี่ยวกับโหมดไม่มีส่วนหัว ถ้า พบปัญหาใดๆ โปรดรายงานข้อบกพร่อง