מצב 'דפדפן Chrome ללא GUI'

Mathias Bynens

Peter Kvitek

במצב Chrome Headless אפשר להריץ את הדפדפן בסביבה ללא ניטור, ללא ממשק משתמש גלוי. בעיקרון, אפשר להריץ את Chrome בלי chrome.

מצב ללא ראש הוא בחירה פופולרית לאוטומציה של דפדפנים, באמצעות פרויקטים כמו Puppeteer או ChromeDriver.

הערה: בגרסה 112 של Chrome עדכנו את מצב Headless כך ש-Chrome יוצר חלונות פלטפורמה, אבל לא מציג אותם. כל שאר הפונקציות, הקיימות והעתידיות, זמינות ללא הגבלות.

שימוש במצב 'דפדפן ללא GUI'

כדי להשתמש במצב 'דפדפן ללא GUI', מעבירים את הדגל --headless בשורת הפקודה:

chrome --headless

שימוש במצב 'דפדפן ללא GUI' הקודם

בעבר, מצב Headless היה הטמעה נפרדת של דפדפן חלופי, שבמקרה נשלחה כחלק מאותו קובץ בינארי של Chrome. לא שותף בהם אף קטע קוד של דפדפן Chrome ב-//chrome.

עכשיו יש ב-Chrome מצב מאוחד של דפדפן ללא ממשק משתמש (Headless) ומצב של דפדפן עם ממשק משתמש (Headful).

בשלב הזה, המצב הקודם של דפדפן ללא ממשק משתמש עדיין זמין עם:

chrome --headless=old

הערה: אנחנו מתכוונים להסיר את Headless הישן מהקובץ הבינארי של Chrome. כהכנה להסרה הזו, הפכנו את המצב הקודם של דפדפן ללא ממשק משתמש (Headless) לזמין כקובץ בינארי עצמאי בשם chrome-headless-shell.

ב-Puppeteer

כדי להשתמש במצב 'דפדפן ללא GUI' ב-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

כדי להשתמש במצב 'דפדפן ללא GUI' ב-Selenium-WebDriver:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

מידע נוסף, כולל דוגמאות לשימוש בקישור שפות אחר, זמין בפוסט בבלוג של צוות Selenium.

התרעות לגבי שורת הפקודה

הדגלים הבאים של שורת הפקודה זמינים במצב ללא מסך.

--dump-dom

הדגל --dump-dom מדפיס את ה-DOM הסריאלי של דף היעד ב-stdout. לדוגמה:

chrome --headless --dump-dom https://developer.chrome.com/

זה שונה מהדפסה של קוד המקור של ה-HTML, שאפשר לעשות באמצעות curl. כדי להציג את הפלט של --dump-dom, Chrome קודם מנתח את קוד ה-HTML ל-DOM, מבצע את כל <script> שעשויים לשנות את ה-DOM ואז הופך את ה-DOM הזה חזרה למחרוזת של HTML בסדרה.

--screenshot

הדגל --screenshot מאפשר לצלם צילום מסך של דף היעד ולשמור אותו בתור screenshot.png בספריית העבודה הנוכחית. האפשרות הזו שימושית במיוחד בשילוב עם הדגל --window-size.

לדוגמה:

chrome --headless --screenshot --window-size=412,892 https://developer.chrome.com/

--print-to-pdf

הדגל --print-to-pdf שומר את דף היעד כקובץ PDF בשם output.pdf בספריית העבודה הנוכחית. לדוגמה:

chrome --headless --print-to-pdf https://developer.chrome.com/

אפשר גם להוסיף את הדגל --no-pdf-header-footer כדי להשמיט את הכותרת העליונה (עם התאריך והשעה הנוכחיים) ואת הכותרת התחתונה (עם כתובת ה-URL ומספר הדף).

chrome --headless --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 --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', אחרי שתי שניות הוא מכיל את המספר '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, יכול להיות שיישמע קשה לפתור בעיה. אפשר לנפות באגים ב-Headless Chrome באופן שדומה מאוד לניפוי באגים ב-Chrome רגיל.

מפעילים את Chrome במצב 'דפדפן ללא GUI' באמצעות הדגל --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 כדי להתחבר ליעד ללא ממשק משתמש ולבדוק אותו.

1. עוברים אל chrome://inspect ולוחצים על הלחצן Configure….
2. מזינים את כתובת ה-IP ומספר היציאה מכתובת ה-WebSocket.
   • בדוגמה הקודמת, הזנתי 127.0.0.1:60926.
3. לוחצים על סיום. אמור להופיע היעד 'מרחוק' עם כל הכרטיסיות שלו ויעדי הטירגוט האחרים.
4. לוחצים על בדיקה כדי לגשת ל-Chrome DevTools ולבדוק את היעד המרוחק ללא גוף (headless), כולל תצוגה חיה של הדף.

משוב

נשמח לקבל ממך משוב על מצב Headless. אם תיתקלו בבעיות, תוכלו לדווח על באג.