โหมด Chrome Headless ช่วยให้คุณเรียกใช้เบราว์เซอร์ในสภาพแวดล้อมที่ไม่มีผู้ดูแลได้โดยไม่ต้องมี UI ที่มองเห็นได้ คุณสามารถเรียกใช้ Chrome โดยไม่ต้องใช้ Chrome ได้
โหมด Headless เป็นตัวเลือกยอดนิยมสำหรับการทํางานอัตโนมัติของเบราว์เซอร์ผ่านโปรเจ็กต์ต่างๆ เช่น Puppeteer หรือ ChromeDriver
ใช้โหมดไม่มีส่วนหัว
หากต้องการใช้โหมดไม่มีส่วนหัว ให้ส่ง Flag บรรทัดคำสั่ง --headless ดังนี้
chrome --headless
ใช้โหมดไม่มีส่วนหัวแบบเก่า
ก่อนหน้านี้ โหมด Headless เป็นการใช้งานเบราว์เซอร์ทางเลือกแยกต่างหากที่รวมอยู่ในไบนารี Chrome เดียวกัน ไม่ได้แชร์โค้ดเบราว์เซอร์ Chrome ใดๆ ใน //chrome
ตอนนี้ Chrome มีโหมดไม่มีส่วนหัวและโหมดมีส่วนหัวแบบรวมกัน
ขณะนี้โหมดไม่มีส่วนหัวแบบเก่าจะยังคงใช้งานได้กับผลิตภัณฑ์ต่อไปนี้
chrome --headless=old
ใน Puppeteer
วิธีใช้โหมดไม่มีส่วนหัวใน 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
แฟล็กบรรทัดคำสั่ง
Flag บรรทัดคำสั่งต่อไปนี้พร้อมใช้งานในโหมด Headless
--dump-dom
Flag --dump-dom จะพิมพ์ DOM ที่แปลงเป็นอนุกรมของหน้าเป้าหมายไปยัง stdout
เช่น
chrome --headless --dump-dom https://developer.chrome.com/
ซึ่งแตกต่างจากการพิมพ์ซอร์สโค้ด HTML ที่คุณอาจทำด้วย curl หากต้องการแสดงผลลัพธ์ของ --dump-dom ก่อนอื่น Chrome จะแยกวิเคราะห์โค้ด HTML เป็น DOM จากนั้นจะเรียกใช้ <script> ที่อาจเปลี่ยนแปลง DOM แล้วเปลี่ยน DOM นั้นกลับเป็นสตริง HTML ที่แปลงเป็นรหัส
--screenshot
Flag --screenshot จะจับภาพหน้าจอของหน้าเป้าหมายและบันทึกเป็น screenshot.png ในไดเรกทอรีทํางานปัจจุบัน ซึ่งจะเป็นประโยชน์อย่างยิ่งเมื่อใช้ร่วมกับ Flag --window-size
เช่น
chrome --headless --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
Flag --print-to-pdf จะบันทึกหน้าเป้าหมายเป็น PDF ที่ชื่อ output.pdf ในไดเรกทอรีทํางานปัจจุบัน เช่น
chrome --headless --print-to-pdf https://developer.chrome.com/
คุณเพิ่ม Flag --no-pdf-header-footer เพื่อละเว้นส่วนหัว (พร้อมวันที่และเวลาปัจจุบัน) และส่วนท้าย (พร้อม URL และหมายเลขหน้า) ของเอกสารได้
chrome --headless --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
หมายเหตุ: ก่อนหน้านี้ฟังก์ชันการทำงานของ Flag --no-pdf-header-footer ใช้ได้กับ Flag --print-to-pdf-no-header คุณอาจต้องกลับไปใช้ชื่อ Flag แบบเก่าหากใช้เวอร์ชันก่อนหน้า
--timeout
Flag --timeout จะกำหนดเวลารอสูงสุด (เป็นมิลลิวินาที) หลังจากนั้น --dump-dom, --screenshot และ --print-to-pdf จะจับภาพเนื้อหาของหน้าเว็บ แม้ว่าหน้าเว็บจะยังโหลดอยู่ก็ตาม
chrome --headless --print-to-pdf --timeout=5000 https://developer.chrome.com/
Flag --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 วินาที จะมี "2" และอื่นๆ วิธีจับภาพสถานะของหน้าเว็บหลังจากผ่านไป 42 วินาทีและบันทึกเป็น PDF มีดังนี้
chrome --headless --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time
--allow-chrome-scheme-url
ต้องใช้ Flag --allow-chrome-scheme-url เพื่อเข้าถึง URL chrome://
Flag นี้พร้อมใช้งานใน Chrome 123 เช่น
chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu
แก้ไขข้อบกพร่อง
เนื่องจาก Chrome มองไม่เห็นในโหมด Headless จึงทำให้การแก้ปัญหาอาจดูยุ่งยาก คุณสามารถแก้ไขข้อบกพร่องของ Chrome แบบ Headless ในลักษณะที่คล้ายกับ Chrome แบบมีหน้าเว็บ
เปิด Chrome ในโหมด Headless ด้วยฟีเจอร์แฟล็กบรรทัดคำสั่ง--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 เพื่อเชื่อมต่อกับเป้าหมายแบบ Headless และตรวจสอบได้
- ไปที่
chrome://inspectแล้วคลิกปุ่มกําหนดค่า… - ป้อนที่อยู่ IP และหมายเลขพอร์ตจาก URL ของ WebSocket
- ในตัวอย่างก่อนหน้านี้ ฉันป้อน
127.0.0.1:60926
- ในตัวอย่างก่อนหน้านี้ ฉันป้อน
- คลิกเสร็จสิ้น คุณควรเห็นเป้าหมายระยะไกลปรากฏขึ้นพร้อมแท็บและเป้าหมายอื่นๆ ทั้งหมด
- คลิกตรวจสอบเพื่อเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และตรวจสอบเป้าหมายแบบ Headless ระยะไกล รวมถึงดูหน้าเว็บแบบเรียลไทม์
ความคิดเห็น
เราหวังว่าจะได้รับฟังความคิดเห็นจากคุณเกี่ยวกับโหมด Headless หากพบปัญหา โปรดรายงานข้อบกพร่อง