ב-2017 הוספנו ל-Chrome 59 את מצב 'ללא GUI', מאפשרות להפעיל את הדפדפן בסביבה ללא השגחה, ללא ממשק משתמש גלוי. בעיקרון, אפשר להפעיל את Chrome בלי Chrome.
מצב 'ללא GUI' הוא בחירה פופולרית לאוטומציה של דפדפנים, באמצעות פרויקטים כמו Puppeteer או ChromeDriver. דוגמה מינימלית לשורת פקודה שמשתמשים במצב 'דפדפן ללא ממשק גרפי' ליצירת קובץ PDF של כתובת URL נתונה:
chrome --headless --print-to-pdf https://developer.chrome.com/
איך פועל טכנולוגיית 'דפדפן ללא GUI'
לפני שנבדוק איך התכונה 'דפדפן ללא GUI' פועלת עכשיו, חשוב להבין איך
'old' עבדו ללא GUI. קטע הקוד הקודם של שורת הפקודה משתמש ברכיב --headless
הדגל של שורת הפקודה, שמצביע על כך ש-Headless הוא רק מצב פעולה
דפדפן Chrome רגיל. באופן מפתיע, הטענה הזו לא הייתה נכונה.
למעשה, טכנולוגיית Headless הישנה
הטמעה נפרדת של דפדפן חלופי
שנשלח כחלק מאותו בינארי של Chrome. לא ניתן לשתף
כל אחד מהקודים של דפדפן Chrome
//chrome
ההטמעה והתחזוקה של דפדפן נפרד ללא ממשק גרפי כללו הרבה מהתקורה ההנדסית. וכמו ש-Headless הייתה היו לו באגים ותכונות שלא היו כלולות Chrome. הדבר גרם לבלבול בבדיקות אוטומטיות של הדפדפן, מה שעלול לעבור מצב 'דפדפן ללא GUI' נכשל במצב 'דפדפן ללא GUI', או להיפך.
בנוסף, אפליקציית 'דפדפן ללא GUI' החריגה כל בדיקה אוטומטית שהסתמכה על דפדפן התקנה של תוספים. אותו עיקרון חל על פונקציות אחרות ברמת הדפדפן, אלא אם אפליקציית Headless השתמשה בהטמעה נפרדת שלה, לא הייתה תמיכה בה.
צוות Chrome איחד עכשיו את המצבים 'דפדפן ללא GUI' ומצב 'ראשי'.
מצב 'דפדפן ללא GUI' זמין החל מ-Chrome 112. במצב הזה, Chrome יוצר אבל לא מוצג, חלונות פלטפורמה. כל שאר הפונקציות, הקיימות בעתיד, זמינים ללא הגבלה.
שימוש במצב 'דפדפן ללא GUI'
כדי להשתמש במצב 'דפדפן ללא ממשק גרפי' החדש, מעבירים את דגל שורת הפקודה --headless=new:
chrome --headless=new
נכון לעכשיו, מצב 'דפדפן ללא GUI' הישן עדיין זמין עם:
chrome --headless=old
בבובת מונטיזציה
כדי להצטרף למצב החדש 'ללא GUI' ב-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();
למידע נוסף, כולל דוגמאות לקישורי שפות אחרים, ניתן לעיין בפוסט בבלוג של צוות סלניום.
התרעות לגבי שורת הפקודה
דגלי שורת הפקודה הבאים זמינים במצב 'דפדפן ללא ממשק גרפי' החדש.
--dump-dom
הדגל --dump-dom מדפיס את ה-DOM הסידורי של דף היעד ל-stdout.
לדוגמה:
chrome --headless=new --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=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'. אחרי שתי שניות, '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 בלתי נראה באופן יעיל במצב 'ללא GUI', לכן הוא עשוי להישמע מסובך כדי לפתור בעיה. ניתן לנפות באגים ב-Chrome ללא ממשק גרפי באופן שקשה מאוד דומה ל-Chrome הראשי.
הפעלת Chrome במצב 'דפדפן ללא GUI' באמצעות
דגל שורת הפקודה --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 לצורך התחברות ליעד ללא GUI ולבדוק אותו.
- עוברים אל
chrome://inspectולוחצים על הלחצן Configure.... - מזינים את כתובת ה-IP ואת מספר היציאה מכתובת ה-URL של WebSocket.
- בדוגמה הקודמת הזנתי
127.0.0.1:60926.
- בדוגמה הקודמת הזנתי
- לוחצים על סיום. אמור להופיע יעד מרוחק עם כל הכרטיסיות יעדים אחרים שצוינו.
- לוחצים על inspect כדי לגשת לכלי הפיתוח ל-Chrome ולבדוק את השלט הרחוק. יעד ללא GUI, כולל צפייה בזמן אמת של הדף.
משוב
נשמח לקבל ממך משוב על מצב 'ללא GUI' החדש. אם המיקום אם תיתקלו בבעיות, דווחו על באג.