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

Mathias Bynens

Peter Kvitek

باستخدام وضع 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، ثم مجددًا يحوّل بنية 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 العادي.

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

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

ملاحظات

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