דף זה תורגם על ידי Cloud Translation API.

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

Mathias Bynens

Peter Kvitek

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

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

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

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

chrome --headless

שימוש במצב 'דפדפן ללא GUI' מהגרסה הקודמת

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

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

מצב 'דפדפן ללא GUI' משתף קוד עם Chrome.

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

ב-Puppeteer

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

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: true,  // (default) enables Chrome Headless mode
  // `headless: 'shell'` enables Headless Shell (old headless)
  // `headless: false` enables "headful" mode
});

const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');

// …

await browser.close();

מידע נוסף על שימוש ב-Headless ב-Puppeteer זמין במקורות המידע כאן.

ב-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.

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

הפלאגים הבאים של שורת הפקודה זמינים במצב 'דפדפן ללא GUI' ובמעטפת 'דפדפן ללא GUI'.

`--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). היא מאלצת את הדפדפן להריץ את הקוד של הדף במהירות המרבית, תוך כדי יצירת מצג שווא שלפיו הזמן עובר.

כדי להמחיש את השימוש ב-API, אפשר לעיין בהדגמה הזו, שבה המונה עולה, מתועד ומוצג כל שנייה באמצעות 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`

כדי לגשת לכתובות URL של chrome://, צריך להשתמש בתכונה הניסיונית --allow-chrome-scheme-url. התכונה הזו זמינה החל מ-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 כדי להתחבר ליעד Headless ולבדוק אותו.

עוברים אל chrome://inspect ולוחצים על הלחצן הגדרה….
מזינים את כתובת ה-IP ואת מספר היציאה מכתובת ה-URL של WebSocket.
- בדוגמה הקודמת, הזנתי 127.0.0.1:60926.
לוחצים על סיום. אמור להופיע יעד מרוחק עם כל הכרטיסיות שלו ויעדים אחרים.
לוחצים על inspect (בדיקה) כדי לגשת לכלי הפיתוח ל-Chrome ולבדוק את היעד המרוחק של Headless, כולל תצוגה פעילה של הדף.

אפשר לבדוק דף יעד מרוחק ב-Headless Chrome באמצעות הכלים למפתחים ב-Chrome

משוב

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

מצב 'דפדפן Chrome ללא GUI' קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.