ترقية وضع "بدون واجهة مستخدم" في Chrome's: التعريف --headless=new

أصبح وضع التشغيل بلا واجهة مستخدم رسومية في Chrome أفضل بكثير.

Mathias Bynens

Peter Kvitek

أصبح وضع التشغيل بلا واجهة مستخدم رسومية في Chrome أفضل بكثير. تقدِّم هذه المقالة نظرة عامة على الجهود الهندسية الأخيرة لجعل ميزة "بلا واجهة مستخدم رسومية" أكثر فائدة للمطوّرين من خلال تقريبها من وضع "headless" العادي في Chrome.

الخلفية

في عام 2017، قدّم Chrome 59 ما يُعرف باسم "وضع التشغيل بلا واجهة مستخدم رسومية"، والذي يتيح لك تشغيل المتصفح في بيئة غير خاضعة للمراقبة وبدون أي واجهة مستخدم مرئية. الوضع الأساسي هو تشغيل Chrome بدون كروم!

وضع التشغيل بلا واجهة مستخدم رسومية هو خيار شائع للتشغيل الآلي للمتصفِّح من خلال مشاريع مثل Puppeteer أو ChromeDriver. في ما يلي مثال مبسَّط من سطر الأوامر لاستخدام وضع "بدون واجهة مستخدم رسومية" لإنشاء ملف PDF لعنوان URL معيّن:

chrome --headless --print-to-pdf https://developer.chrome.com/

ما هي الميزات الجديدة في ميزة "بدون واجهة مستخدم رسومية"؟

قبل أن نتحدث بالتفصيل عن التحسينات الأخيرة التي تم إجراؤها بلا واجهة مستخدم رسومية، من المهم أن تفهم آلية عمل الميزات "القديمة" بلا واجهة مستخدم رسومية. يستخدم مقتطف سطر الأوامر الذي عرضناه في وقت سابق علامة سطر الأوامر --headless للإشارة إلى أنّ ميزة التشغيل بلا واجهة مستخدم رسومية هي مجرد وضع تشغيل في متصفّح Chrome العادي. من المدهش أن هذا لم يكن صحيحًا في الواقع. من الناحية الفنية، كان الإصدار القديم بلا واجهة مستخدم رسومية وهو تطبيق متصفّح بديل منفصل وتم شحنه كجزء من البرنامج الثنائي نفسه لمتصفِّح Chrome. لا يشارك التطبيق أيًّا من رموز متصفِّح Chrome في //chrome.

وتخمينك صحيح، كان تنفيذ هذا المتصفح المنفصل بلا واجهة مستخدم رسومية وصيانته يتطلب الكثير من العمل الهندسي، ولكن هذه لم تكن المشكلة الوحيدة. ولأنّه كان تطبيقًا منفصلاً، فإنّه كان يتضمّن أخطاءً وميزات لم تكن متوفّرة في إصدار Chrome الرئيسي. وقد تسبب هذا في حدوث موقف مُربك، حيث قد يجتاز أي اختبار مبرمَج للمتصفّح في وضع "العنوان الرئيسي" ولكنه يفشل في وضع "بدون واجهة مستخدم رسومية"، أو العكس، وهو يمثل مشكلة كبيرة لمهندسي التشغيل الآلي. واستبعدت أيضًا أي اختبار تلقائي يعتمد على تثبيت إضافة متصفّح. وينطبق الأمر نفسه على أي وظائف أخرى على مستوى المتصفِّح: فإذا كان تطبيق "بلا واجهة مستخدم رسومية" يتضمّن تنفيذًا خاصًا به ومنفصلاً، لا يتم دعمه.

في عام 2021، سعى فريق Chrome إلى حل هذه المشكلة وتوحيد أوضاع التشغيل بلا واجهة مستخدم رسومية ووضع العناوين الرئيسية بلا واجهة مستخدم رسومية.

يسعدنا الإعلان عن توفُّر الوضع الجديد بلا واجهة مستخدم رسومية في Chrome 112. في هذا الوضع، ينشئ Chrome أي نوافذ لنظام التشغيل ولكن لا يعرضها. وتتوفّر جميع الوظائف الأخرى الحالية والمستقبلية بدون قيود.

تجربة الإصدار الجديد بلا واجهة مستخدم رسومية

لتجربة وضع التشغيل بلا واجهة مستخدم رسومية، عليك ضبط علامة سطر الأوامر --headless=new:

chrome --headless=new

في الوقت الحالي، لا يزال وضع "بدون واجهة مستخدم رسومية" القديم متاحًا من خلال:

chrome --headless=old

في الوقت الحالي، يؤدي تمرير علامة سطر الأوامر --headless بدون قيمة صريحة إلى تفعيل وضع "بدون واجهة مستخدم رسومية" القديم، ولكننا نخطط لتغيير هذا الوضع التلقائي إلى وضع "بدون واجهة مستخدم رسومية" جديد بمرور الوقت.

ونخطط لإزالة الإصدار القديم بلا واجهة مستخدم رسومية من برنامج Chrome الثنائي نهائيًا والتوقف عن إتاحة هذا الوضع في Puppeteer في وقت لاحق من هذا العام. كجزء من عملية الإزالة هذه، سنجعل الإصدار القديم بلا واجهة مستخدم رسومية متاحًا كبرنامج ثنائي مستقل منفصل للمستخدمين الذين لم يتمكنوا من الترقية بعد.

أغنية جديدة بلا واجهة مستخدم رسومية في لعبة Puppeteer

لتفعيل وضع "بدون واجهة مستخدم رسومية" الجديد في 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();

راجِع مشاركة المدونة التابعة لفريق Selenium للاطّلاع على مزيد من المعلومات، بما في ذلك أمثلة على استخدام روابط لغوية أخرى.

علامات سطر أوامر خاصة بلا واجهة مستخدم رسومية

تتوفّر علامات سطر الأوامر التالية لوضع "بدون واجهة مستخدم رسومية" الجديد.

--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. وفقًا لإصدار Chrome الذي تستخدمه، قد تحتاج إلى العودة إلى اسم العلم القديم.

--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 للوصول إلى chrome:// عناوين URL. تتوفّر هذه العلامة بدءًا من إصدار 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 إلى إخراج stdout، على سبيل المثال:

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

في مثيل Chrome العادي، يمكننا استخدام تصحيح الأخطاء عن بُعد في "أدوات مطوري البرامج في Chrome" للاتصال بالهدف بلا واجهة مستخدم رسومية وفحصه. لإجراء ذلك، انتقِل إلى chrome://inspect، وانقر على الزر Configure... (ضبط...)، وأدخِل عنوان IP ورقم المنفذ من عنوان URL لـ WebSocket. في المثال أعلاه، أدخلت 127.0.0.1:60926. انقر على تمّ ومن المفترض أن يظهر لك "الهدف البعيد" مع كلّ علامات التبويب وأهدافه الأخرى الواردة أدناه. انقر على inspect ويمكنك الآن الوصول إلى "أدوات مطوري البرامج في Chrome" التي تفحص الهدف بلا واجهة مستخدم رسومية عن بُعد، inspect.

إضافة ملاحظات

نتطلع إلى تلقّي ملاحظاتك حول وضع "بدون واجهة مستخدم رسومية" الجديد. إذا واجهت أيّ مشاكل، يُرجى الإبلاغ عنها.