ในปี 2017 Chrome 59 ได้เปิดตัวโหมดไม่มีส่วนหัว ซึ่งจะช่วยให้คุณเรียกใช้เบราว์เซอร์ในสภาพแวดล้อมที่ไม่มีผู้ดูแลได้โดยไม่มี UI ที่มองเห็นได้ และที่สำคัญ คุณสามารถใช้ Chrome โดยไม่ใช้ Chrome ได้
โหมดไม่มีส่วนหัวเป็นตัวเลือกยอดนิยมสำหรับการทำให้เบราว์เซอร์ทำงานอัตโนมัติผ่านโปรเจ็กต์ต่างๆ เช่น Puppeteer หรือ ChromeDriver ต่อไปนี้คือตัวอย่างบรรทัดคำสั่งขั้นต่ำที่ใช้โหมดไม่มีส่วนหัวเพื่อสร้างไฟล์ PDF ของ URL หนึ่งๆ
chrome --headless --print-to-pdf https://developer.chrome.com/
วิธีการทำงานของฟีเจอร์แบบไม่มีส่วนหัว
ก่อนที่เราจะมาทบทวนวิธีการทำงานของฟีเจอร์ "ไม่มีส่วนหัว" ในตอนนี้ คุณควรทำความเข้าใจวิธีการทำงานของ "ไม่มีส่วนหัว" "แบบเดิม" ก่อน ข้อมูลโค้ดบรรทัดคำสั่งก่อนหน้าใช้แฟล็กบรรทัดคำสั่ง --headless
ซึ่งบ่งชี้ว่า Headless เป็นเพียงโหมดการทำงานของเบราว์เซอร์ Chrome ทั่วไป แต่ไม่น่าประหลาดใจว่านั่นไม่ใช่ความจริงเลย
อันที่จริง Headless เวอร์ชันเก่าเป็นการใช้งานเบราว์เซอร์สำรองที่แยกต่างหากซึ่งมาพร้อมกับการจัดส่งโดยเป็นส่วนหนึ่งของไบนารี 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
เพื่อให้ได้เอาต์พุตของ --dump-dom
ก่อนอื่น Chrome จะแยกวิเคราะห์โค้ด HTML ลงใน DOM และเรียกใช้ <script>
ใดๆ ที่อาจแก้ไข DOM จากนั้นเปลี่ยน DOM นั้นกลับไปเป็นสตริง HTML แบบอนุกรม
--screenshot
แฟล็ก --screenshot
ถ่ายภาพหน้าจอของหน้าเป้าหมายและบันทึกเป็น screenshot.png
ในไดเรกทอรีที่ใช้งานอยู่ในปัจจุบัน วิธีนี้มีประโยชน์อย่างยิ่งเมื่อใช้ร่วมกับ
Flag --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/
ไม่ได้: ฟังก์ชันที่อยู่เบื้องหลัง Flag --no-pdf-header-footer
เคยใช้ได้กับแฟล็ก --print-to-pdf-no-header
คุณอาจต้องกลับไปใช้ชื่อ Flag เดิมหากใช้เวอร์ชันก่อนหน้า
--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 วินาที "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 แบบไม่มีส่วนหัวในลักษณะที่คล้ายคลึงกับ 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 และตรวจสอบเป้าหมายแบบไม่มีส่วนหัวระยะไกล รวมถึงการดูหน้าแบบสด
ความคิดเห็น
เราหวังว่าจะได้รับความคิดเห็นจากคุณเกี่ยวกับโหมดไม่มีส่วนหัวแบบใหม่ หากพบปัญหา ให้รายงานข้อบกพร่อง