وضع التشغيل بلا واجهة مستخدم رسومية في Chrome

Mathias Bynens

Peter Kvitek

باستخدام وضع Chrome Headless، يمكنك تشغيل المتصفّح في بيئة غير مراقَبة بدون أي واجهة مستخدم مرئية. بشكل أساسي، يمكنك تشغيل Chrome بدون Chrome.

يُعدّ وضع التشغيل بلا واجهة مستخدم رسومية خيارًا شائعًا لأتمتة المتصفّح، وذلك من خلال مشاريع مثل Puppeteer أو ChromeDriver.

استخدام "وضع التشغيل بلا واجهة مستخدم رسومية"

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

chrome --headless

استخدام "وضع التشغيل بلا واجهة مستخدم رسومية" القديم

في السابق، كان وضع Headless تنفيذًا منفصلاً وبديلاً للمتصفّح تم شحنه كجزء من برنامج Chrome الثنائي نفسه. لم تتم مشاركة أي من رموز متصفّح Chrome في //chrome.

يتضمّن Chrome الآن وضعَي التشغيل بلا واجهة مستخدم رسومية ومع واجهة مستخدم رسومية.

منذ الإصدار 132.0.6793.0 من Chrome، لا يتوفّر وضع Headless القديم إلا كبرنامج ثنائي مستقل باسم chrome-headless-shell يمكن تنزيله من هنا.

في Puppeteer

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

لاستخدام "وضع التشغيل بلا واجهة مستخدم رسومية" في Selenium-WebDriver، اتّبِع الخطوات التالية:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

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

علامات سطر الأوامر

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

--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). ويجبر المتصفّح على تنفيذ أي رمز من رموز الصفحة بأسرع ما يمكن مع إيهام الصفحة بأنّ الوقت يمرّ فعلاً.

لتوضيح طريقة استخدامها، اطّلِع على هذا العرض التوضيحي الذي يزيد عدّادًا ويسجّل ويَعرض قيمته كل ثانية باستخدام 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 غير مرئي فعليًا في وضع Headless، قد يبدو من الصعب حلّ أي مشكلة. يمكن تصحيح أخطاء "Chrome بلا واجهة مستخدم رسومية" بطريقة مشابهة جدًا لتصحيح أخطاء Chrome العادي.

شغِّل Chrome في وضع Headless باستخدام علامة سطر الأوامر --remote-debugging-port.

chrome --headless --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" للاتصال بالهدف "بلا واجهة مستخدم رسومية" وفحصه.

1. انتقِل إلى chrome://inspect وانقر على الزر ضبط….
2. أدخِل عنوان IP ورقم المنفذ من عنوان URL الخاص بـ WebSocket.
   • في المثال السابق، أدخلتُ 127.0.0.1:60926.
3. انقر على تم. من المفترض أن يظهر هدف بعيد مع كل علامات التبويب الخاصة به والأهداف الأخرى المُدرَجة.
4. انقر على فحص للوصول إلى "أدوات مطوّري البرامج في Chrome" وفحص هدف Headless البعيد، بما في ذلك عرض مباشر للصفحة.

الملاحظات

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