โหมดไม่มีส่วนหัวของ Chrome

Mathias Bynens

Peter Kvitek

โหมด 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 และตรวจสอบได้

1. ไปที่ chrome://inspect แล้วคลิกปุ่มกําหนดค่า…
2. ป้อนที่อยู่ IP และหมายเลขพอร์ตจาก URL ของ WebSocket
   • ในตัวอย่างก่อนหน้านี้ ฉันป้อน 127.0.0.1:60926
3. คลิกเสร็จสิ้น คุณควรเห็นเป้าหมายระยะไกลปรากฏขึ้นพร้อมแท็บและเป้าหมายอื่นๆ ทั้งหมด
4. คลิกตรวจสอบเพื่อเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และตรวจสอบเป้าหมายแบบ Headless ระยะไกล รวมถึงดูหน้าเว็บแบบเรียลไทม์

ความคิดเห็น

เราหวังว่าจะได้รับฟังความคิดเห็นจากคุณเกี่ยวกับโหมด Headless หากพบปัญหา โปรดรายงานข้อบกพร่อง