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

Mathias Bynens
Peter Kvitek
Peter Kvitek

ในปี 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 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 เพื่อเชื่อมต่อ ไปยังเป้าหมายแบบไม่มีส่วนหัวแล้วตรวจสอบ

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สามารถตรวจสอบหน้าเป้าหมายแบบไม่มีส่วนหัวระยะไกล

ความคิดเห็น

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