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

Mathias Bynens

Peter Kvitek

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

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

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

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

chrome --headless

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

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

ב-Chrome יש עכשיו מצבי 'דפדפן' ו'דפדפן ללא GUI' מאוחדים.

נכון לעכשיו, מצב 'ללא GUI' הקודם זמין עם:

chrome --headless=old

ב-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 במצב 'דפדפן ללא ממשק גרפי' באמצעות התכונה הניסיונית --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 ומספר היציאה מכתובת ה-URL של WebSocket.
   • בדוגמה הקודמת, הזנתי 127.0.0.1:60926.
3. לוחצים על סיום. אמור להופיע היעד 'מרחוק' עם כל הכרטיסיות שלו ויעדי הטירגוט האחרים.
4. לוחצים על בדיקה כדי לגשת ל-Chrome DevTools ולבדוק את היעד המרוחק ללא גוף (headless), כולל תצוגה חיה של הדף.

משוב

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