โหมด 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
แฟล็ก --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
ต้องใช้แฟล็ก --allow-chrome-scheme-url
เพื่อเข้าถึง URL chrome://
รายการ
แฟล็กนี้มีอยู่ใน Chrome 123 เช่น
chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu
แก้ไขข้อบกพร่อง
เนื่องจาก Chrome มองไม่เห็นในโหมด Headless จึงอาจฟังดูยุ่งยากในการแก้ปัญหา คุณสามารถแก้ไขข้อบกพร่องของ 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 เพื่อเชื่อมต่อกับเป้าหมายแบบ Headless และตรวจสอบได้
- ไปที่
chrome://inspect
แล้วคลิกปุ่มกําหนดค่า… - ป้อนที่อยู่ IP และหมายเลขพอร์ตจาก URL ของ WebSocket
- ในตัวอย่างก่อนหน้านี้ ฉันป้อน
127.0.0.1:60926
- ในตัวอย่างก่อนหน้านี้ ฉันป้อน
- คลิกเสร็จสิ้น คุณควรเห็นเป้าหมายระยะไกลปรากฏขึ้นพร้อมกับแท็บทั้งหมดและเป้าหมายอื่นๆ ที่แสดงอยู่
- คลิกตรวจสอบเพื่อเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และตรวจสอบเป้าหมายแบบไม่มีส่วนหัวระยะไกล รวมถึงการดูหน้าแบบสด
ความคิดเห็น
เราหวังว่าจะได้รับความคิดเห็นจากคุณเกี่ยวกับโหมดไม่มีส่วนหัว หากพบปัญหา โปรดรายงานข้อบกพร่อง