في عام 2017، قدَّم Chrome 59 وضع التشغيل بلا واجهة مستخدم رسومية، الذي يتيح لك تشغيل المتصفِّح في بيئة غير خاضعة للمراقبة، بدون أي واجهة مستخدم مرئية. وبشكل أساسي، يمكنك تشغيل Chrome بدون Chrome.
يُعدّ "وضع التشغيل بلا واجهة مستخدم رسومية" خيارًا شائعًا للأساليب المبرمَجة في المتصفِّح، من خلال مشاريع مثل Puppeteer أو ChromeDriver. في ما يلي مثال مصغر لسطر الأوامر باستخدام وضع "بدون واجهة مستخدم رسومية" لإنشاء ملف PDF لعنوان URL معين:
chrome --headless --print-to-pdf https://developer.chrome.com/
طريقة عمل ميزة "بلا واجهة مستخدم رسومية"
قبل أن نراجع كيف تعمل ميزة "بلا واجهة مستخدم رسومية" الآن، من المهم أن نفهم كيف تعمل
"القديمة" بلا واجهة مستخدم رسومية. يستخدم مقتطف سطر الأوامر السابق علامة سطر الأوامر --headless، ما يشير إلى أنّ "بلا واجهة مستخدم رسومية" ما هي إلا وضع تشغيل لمتصفّح Chrome العادي. من المستغرب أن هذا ليس صحيحًا في الواقع.
في الواقع، كان الإصدار القديم بلا واجهة مستخدم رسومية
تنفيذًا منفصلاً وبديلة للمتصفّح
تم شحنه كجزء من برنامج Chrome الثنائي نفسه. ولا يشارك أيًّا من رموز متصفّح Chrome في //chrome.
كان استخدام متصفّح منفصل بلا واجهة مستخدم رسومية وصيانته تصاحبه الكثير من الأعباء الهندسية. ونظرًا لأن الإصدار "بلا واجهة مستخدم رسومية" كان عملية تنفيذ منفصلة، فكان يحتوي على أخطاء وميزات خاصة لم تكن موجودة في Chrome ذات العنوان الرأسي. وقد أدى ذلك إلى حدوث ارتباك في اختبارات المتصفّح المبرمَجة، والتي قد تمر في وضع التصفّح الرأسي لكنها تخفق في وضع التشغيل بلا واجهة مستخدم رسومية أو العكس.
علاوةً على ذلك، استبعدت أداة "بلا واجهة مستخدم رسومية" أي اختبار آلي اعتمد على تثبيت إضافة المتصفّح. وينطبق الشيء نفسه على أي دوال أخرى على مستوى المتصفح؛ ما لم يكن لها واجهة مستخدم منفصلة، ما لم تكن متوافقة.
قام فريق Chrome الآن بتوحيد أوضاع التشغيل بلا واجهة مستخدم رسومية والوضع الرأسي.
يتوفّر وضع "بلا واجهة مستخدم رسومية" جديد من Chrome 112. في هذا الوضع، يُنشئ Chrome أي نوافذ للأنظمة الأساسية ولكن لا يعرضها. جميع الدوال الأخرى، الحالية والمستقبلية، متاحة بدون قيود.
استخدام وضع التشغيل بلا واجهة مستخدم رسومية
لاستخدام "وضع التشغيل بلا واجهة مستخدم رسومية" الجديد، عليك ضبط علامة سطر الأوامر --headless=new على النحو التالي:
chrome --headless=new
لا يزال وضع "بلا واجهة مستخدم رسومية" القديم متاحًا في الوقت الحالي مع:
chrome --headless=old
في محرّك الدُمى
لتفعيل وضع "بلا واجهة مستخدم رسومية" الجديد في 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();
يمكنك الاطّلاع على مشاركة المدونة التي نشرها فريق Seenium للحصول على مزيد من المعلومات، بما في ذلك أمثلة تستخدم روابط لغوية أخرى.
علامات سطر الأوامر
تتوفّر علامات سطر الأوامر التالية في وضع "بلا واجهة مستخدم رسومية" الجديد.
--dump-dom
تطبع العلامة --dump-dom نموذج كائن المستند (DOM) المتسلسل للصفحة المستهدفة بتنسيق stdout.
مثلاً:
chrome --headless=new --dump-dom https://developer.chrome.com/
يختلف ذلك عن طباعة رمز مصدر HTML الذي قد تفعله باستخدام curl. لعرض مخرجات --dump-dom، يحلّل Chrome أولاً رمز HTML في نموذج DOM وينفّذ أي <script> قد يغيّر نموذج 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 غير مرئي بشكلٍ فعّال في "وضع التشغيل بلا واجهة مستخدم رسومية"، قد يبدو من الصعب حلّ إحدى المشاكل. من الممكن تصحيح الأخطاء في "Chrome بلا واجهة مستخدم رسومية" بطريقة تشبه إلى حدٍ كبير متصفِّح Chrome الذي يتضمّن واجهة مستخدم رسومية.
شغِّل متصفِّح Chrome في وضع "بلا واجهة مستخدم رسومية" باستخدام
علامة سطر الأوامر --remote-debugging-port.
chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/
يؤدي ذلك إلى طباعة عنوان URL فريد لـ WebSocket لتثبيته بشكل قياسي، على سبيل المثال:
DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9
في نسخة افتراضية من Chrome، يمكننا استخدام تصحيح الأخطاء عن بُعد في "أدوات مطوري البرامج في Chrome" للاتصال بالهدف بلا واجهة مستخدم رسومية وفحصه.
- انتقِل إلى
chrome://inspectوانقر على الزر إعداد.... - أدخِل عنوان IP ورقم المنفذ من عنوان URL WebSocket.
- في المثال السابق، أدخلت
127.0.0.1:60926.
- في المثال السابق، أدخلت
- انقر على تم. من المفترض أن يظهر "الهدف البعيد" مع جميع علامات التبويب والأهداف الأخرى المدرجة.
- انقر على فحص للوصول إلى "أدوات مطوري البرامج في Chrome" وفحص الهدف البعيد الذي بلا واجهة مستخدم رسومية، بما في ذلك العرض المباشر للصفحة.
ملاحظات
نتطلّع إلى تلقّي ملاحظاتك وآرائك حول وضع التشغيل بلا واجهة مستخدم رسومية الجديد. إذا واجهت أي مشاكل، يمكنك الإبلاغ عن خطأ.