ในปี 2017 Chrome 59 ได้เปิดตัวโหมดไม่มีส่วนหัว ทำให้คุณเรียกใช้เบราว์เซอร์ในสภาพแวดล้อมที่ไม่ต้องดำเนินการใดๆ ได้ โดยไม่มี UI ที่มองเห็นได้ และที่สำคัญ คุณสามารถใช้ Chrome โดยไม่ใช้ Chrome ได้
โหมดไม่มีส่วนหัวเป็นตัวเลือกยอดนิยมสำหรับระบบอัตโนมัติของเบราว์เซอร์ผ่านโปรเจ็กต์ต่างๆ เช่น Puppeteer หรือ ChromeDriver ตัวอย่างบรรทัดคำสั่งขั้นต่ำที่ใช้โหมดไม่มีส่วนหัวในการสร้างไฟล์ PDF มีดังนี้ ของ URL หนึ่งๆ:
chrome --headless --print-to-pdf https://developer.chrome.com/
วิธีการทำงานของฟีเจอร์แบบไม่มีส่วนหัว
ก่อนที่เราจะมาทบทวนวิธีการทำงานของฟีเจอร์ "ไม่มีส่วนหัว" ในตอนนี้ คุณควรทำความเข้าใจว่า
"เก่า" ฟีเจอร์ไม่มีส่วนหัวใช้งานได้แล้ว ข้อมูลโค้ดบรรทัดคำสั่งก่อนหน้าใช้ --headless
Flag บรรทัดคำสั่ง ซึ่งแสดงให้เห็นว่าฟีเจอร์ไม่มีส่วนหัวเป็นเพียงโหมดการดำเนินการของ
เบราว์เซอร์ Chrome ปกติ แต่ไม่น่าประหลาดใจว่านั่นไม่ใช่ความจริงเลย
อันที่จริง ระบบ "ไม่มีส่วนหัว" แบบเก่าคือ
การใช้เบราว์เซอร์สำรองที่แยกต่างหาก
ที่เกิดขึ้นโดยเป็นส่วนหนึ่งของไบนารีของ Chrome เดียวกัน ไม่แชร์
โค้ดเบราว์เซอร์ Chrome ใดๆ ใน
//chrome
การติดตั้งและดูแลรักษาเบราว์เซอร์แบบไม่มีส่วนหัวแยกต่างหากนั้น ในด้านวิศวกรรม และเนื่องจากฟีเจอร์ Headless ถือเป็นประสบการณ์ แต่มีข้อบกพร่องและฟีเจอร์ของตัวเอง Chrome ซึ่งสร้างความสับสนสำหรับการทดสอบเบราว์เซอร์อัตโนมัติ ซึ่งอาจผ่าน โหมดแสดงส่วนหัวแต่ล้มเหลวในโหมดไม่มีส่วนหัวหรือในทางกลับกัน
นอกจากนี้ Headless ได้ไม่รวมการทดสอบอัตโนมัติใดๆ ที่ใช้เบราว์เซอร์ การติดตั้งส่วนขยาย เช่นเดียวกันกับฟังก์ชันอื่นๆ ในระดับเบราว์เซอร์ เราไม่รองรับการใช้งาน Headless ของตนเองแยกต่างหาก
ตอนนี้ทีม Chrome ได้รวมโหมดไม่มีส่วนหัวและโหมดส่วนหัวเป็นแบบรวม
โหมดไม่มีส่วนหัวใหม่พร้อมให้บริการใน Chrome 112 แล้ว ในโหมดนี้ Chrome จะสร้าง แต่ไม่แสดงหน้าต่างแพลตฟอร์มใดๆ ฟังก์ชันอื่นๆ ทั้งหมดที่มีอยู่และ จะมีให้โดยไม่มีข้อจำกัด
ใช้โหมดไม่มีส่วนหัว
หากต้องการใช้โหมดไม่มีส่วนหัวใหม่ ให้ส่งแฟล็กบรรทัดคำสั่ง --headless=new
ดังนี้
chrome --headless=new
สำหรับตอนนี้ โหมดไม่มีส่วนหัวแบบเก่าจะยังคงใช้ได้กับอุปกรณ์ต่อไปนี้
chrome --headless=old
ในเกมเชิดหุ่นกระบอก
วิธีเลือกใช้โหมดไม่มีส่วนหัวใหม่ใน Puppeteer มีดังนี้
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: 'new',
// `headless: true` (default) enables old Headless;
// `headless: 'new'` enables new 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=new'))
.build();
await driver.get('https://developer.chrome.com/');
// …
await driver.quit();
ดูข้อมูลเพิ่มเติมและตัวอย่างการใช้การเชื่อมโยงภาษาอื่นได้ที่บล็อกโพสต์ของทีม Selenium
แฟล็กบรรทัดคำสั่ง
แฟล็กบรรทัดคำสั่งต่อไปนี้พร้อมใช้งานในโหมดไม่มีส่วนหัวใหม่
--dump-dom
แฟล็ก --dump-dom
จะพิมพ์ DOM การทำให้เป็นอนุกรมของหน้าเป้าหมายไปยัง stdout
เช่น
chrome --headless=new --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=new --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
แฟล็ก --print-to-pdf
บันทึกหน้าเป้าหมายเป็นไฟล์ PDF ชื่อ output.pdf
ใน
ไดเรกทอรีที่ใช้งานอยู่ในปัจจุบัน เช่น
chrome --headless=new --print-to-pdf https://developer.chrome.com/
นอกจากนี้ คุณยังเพิ่มธง --no-pdf-header-footer
เพื่อละเว้นการพิมพ์ได้
ส่วนหัว (ที่มีวันที่และเวลาปัจจุบัน) และส่วนท้าย (ที่มี URL และหน้าเว็บ)
ตัวเลข)
chrome --headless=new --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=new --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=new --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=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu
แก้ไขข้อบกพร่อง
เนื่องจาก Chrome จะมองไม่เห็นอย่างมีประสิทธิภาพในโหมดไม่มีส่วนหัว จึงอาจฟังดูยุ่งยาก เพื่อแก้ไขปัญหา คุณอาจแก้ไขข้อบกพร่องของ Chrome แบบ Headless ได้ในลักษณะที่ คล้ายกับ Chrome ที่เน้นส่วนหัว
เปิด Chrome ในโหมดไม่มีส่วนหัวด้วย
แฟล็กบรรทัดคำสั่ง --remote-debugging-port
chrome --headless=new --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
- ในตัวอย่างก่อนหน้านี้ ฉันป้อน
- คลิกเสร็จสิ้น คุณควรจะเห็นเป้าหมายระยะไกลปรากฏขึ้นพร้อมกับแท็บทั้งหมด เป้าหมายอื่นๆ ในรายการ
- คลิกตรวจสอบเพื่อเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และตรวจสอบรีโมต เป้าหมายแบบไม่มีส่วนหัว รวมถึงการดูหน้าแบบสด
ความคิดเห็น
เราหวังว่าจะได้รับความคิดเห็นจากคุณเกี่ยวกับโหมดไม่มีส่วนหัวแบบใหม่ ถ้า พบปัญหาใดๆ โปรดรายงานข้อบกพร่อง