باستخدام وضع Chrome Headless، يمكنك تشغيل المتصفّح في بيئة غير خاضعة للإشراف، بدون أي واجهة مستخدم مرئية. بعبارة أخرى، يمكنك تشغيل Chrome بدون Chrome.
يُعدّ وضع "المتصفّح بلا واجهة مستخدم" خيارًا شائعًا لأتمتة المتصفّح، وذلك من خلال مشاريع مثل Puppeteer أو ChromeDriver.
استخدام وضع التشغيل بلا واجهة مستخدم رسومية
لاستخدام وضع "التشغيل بلا واجهة مستخدم رسومية"، عليك ضبط علامة سطر الأوامر --headless:
chrome --headless
استخدام "وضع التشغيل بلا واجهة مستخدم رسومية" القديم
في السابق، كان وضع "Chrome بلا واجهة مستخدم رسومية"
تنفيذًا منفصلاً ومتغيرًا للمتصفّح
الذي تم إرساله كجزء من الإصدار الثنائي نفسه من Chrome. لم يتم مشاركة
أي من رمز متصفّح Chrome في
//chrome.
يتضمّن Chrome الآن وضعَي "التشغيل بلا واجهة مستخدم رسومية" و"التشغيل بواجهة مستخدم رسومية".
لا يزال وضع "بلا واجهة مستخدم رسومية" القديم متاحًا في الوقت الحالي مع:
chrome --headless=old
في Puppeteer
لاستخدام وضع "بلا واجهة مستخدم رسومية" في 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
لاستخدام وضع التشغيل بلا واجهة مستخدم رسومية في 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، ثم يحوّله مرة أخرى إلى سلسلة تسلسلية من رمز 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/
تُطلب من Chrome من خلال العلامة --timeout=5000 الانتظار لمدة تصل إلى 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://.
تتوفّر هذه العلامة من الإصدار 123 من Chrome. وفي ما يلي مثال لذلك:
chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu
تصحيح الأخطاء
ولأنّ Chrome غير مرئي بشكل فعّال في "وضع التشغيل بلا واجهة مستخدم رسومية"، قد يبدو من الصعب حلّ إحدى المشاكل. من الممكن تصحيح أخطاء "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" للاتصال بالهدف الذي يستخدم ميزة "Chrome بلا واجهة مستخدم رسومية" وفحصه.
- انتقِل إلى
chrome://inspectوانقر على الزر ضبط. - أدخِل عنوان IP ورقم المنفذ من عنوان URL الخاص بـ WebSocket.
- في المثال السابق، أدخلت
127.0.0.1:60926.
- في المثال السابق، أدخلت
- انقر على تم. من المفترض أن يظهر لك استهداف عن بُعد مع جميع علامات التبويب والاستهدافات الأخرى المدرَجة.
- انقر على فحص للوصول إلى "أدوات مطوّري البرامج في Chrome" وفحص المحتوى عن بُعد الهدف الذي لا يتضمّن واجهة مستخدم، بما في ذلك عرض مباشر للصفحة.
ملاحظات
نتطلّع إلى تلقّي ملاحظاتك وآرائك حول "وضع عدم إظهار الرأس". إذا واجهت أي مشاكل، يُرجى إبلاغنا بها.