تتضمّن "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء" واجهة سطر أوامر (CLI) تتيح لك أو لوكيل الترميز تشغيل أدوات المطوّرين كأوامر Shell عادية. بدلاً من استدعاء الأدوات ديناميكيًا من خلال خادم MCP، يكتب الوكيل الإجراءات نفسها كأوامر shell ويمكنه ربطها في نص برمجي يمكنك إعادة تشغيله في أي وقت. على سبيل المثال، قد ينشئ الوكيل نصًا برمجيًا مثل:
chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"
يتصل كل من خادم MCP وواجهة سطر الأوامر بالمحرّك نفسه: وهو برنامج خلفية مستمر يتواصل مع Chrome من خلال بروتوكول أدوات مطوّري البرامج في Chrome (CDP). ويكمن الاختلاف في كيفية وصول الوكيل إلى هذا المحرّك:
- خادم MCP: يتصل وكيلك عبر الإدخال/الإخراج المعياري باستخدام JSON-RPC ويتعامل مع كل أداة متصفّح كاستدعاء دالة تفاعلية.
- واجهة سطر الأوامر (CLI): ينفّذ الوكيل أوامر واجهة الأوامر مباشرةً على برنامج الخلفية نفسه.
يمكنك استخدام واجهة سطر الأوامر لإجراء ما يلي:
- حفظ سير العمل: يمكنك تحويل الإجراءات التي اتّخذها الوكيل خلال جلسة تصحيح الأخطاء الاستكشافية إلى نص برمجي قابل لإعادة الاستخدام.
- إعادة إنتاج حالة تطبيق: يمكنك إعادة تشغيل نص برمجي لإعادة المتصفّح إلى حالة معروفة قبل تصحيح الأخطاء مرة أخرى.
- الإجراءات المجمّعة: يمكنك تنفيذ سلسلة من أوامر التنقّل والإدخال والمحاكاة والفحص بدون الحاجة إلى تبادل الحديث بين كل خطوة وأخرى.
- تشغيل النصوص البرمجية بدون وكيل ذكاء اصطناعي: يمكنك تنفيذ النصوص البرمجية التي تم إنشاؤها من أي وحدة طرفية أو واجهة فرعية أو حاوية CI يمكنها تنفيذ نصوص Shell البرمجية، بدون الحاجة إلى جلسة LLM نشطة أو عميل MCP.
الاختيار بين واجهة سطر الأوامر وخادم MCP
إنّ الاختيار بين واجهة سطر الأوامر وخادم MCP هو قرار هندسي يتعلّق بالتكلفة والسياق وسير العمل.
- تكلفة نافذة السياق: عند تسجيل خادم MCP، يتم إدخال كل تعريف أداة ومخطط JSON في طلب نظام LLM في كل محادثة. باستخدام مهارة واجهة سطر الأوامر، يحمّل الوكيل فقط ملخّصًا موجزًا بتنسيق Markdown ويدفع تكلفة الرموز المميّزة عندما يقرر قراءة المهارة الكاملة وإنشاء الأوامر التي يحتاجها. في جلسات الوكيل الطويلة والمتعدّدة الجولات، يزداد هذا الفرق في كل من التكلفة ووقت الاستجابة.
- الاستكشاف مقابل التنفيذ: تتفوّق أدوات MCP في تصحيح الأخطاء الديناميكي والاستكشافي، عندما لا تعرف أنت أو وكيلك بعد ما تحتاج إلى فحصه. بما أنّ الوكيل يعرف جميع الأدوات المتاحة مسبقًا، من المرجّح أن يستخدمها لتحقيق هدفه. عندما يكون المسار معروفًا، تتيح لك واجهة سطر الأوامر تنفيذ الخطوات التي تحتاجها فقط.
- إمكانية إعادة الاستخدام: يمكنك حفظ نص برمجي لواجهة سطر الأوامر أو إعادة استخدامه في مهارة أو تشغيله يدويًا خارج حلقة الوكيل. لا يمكنك إجراء ذلك من خلال استدعاءات أدوات MCP.
| استخدام خادم MCP عندما | استخدِم واجهة سطر الأوامر في الحالات التالية: |
|---|---|
| أنت تحقّق في مشكلة غير معروفة وتحتاج إلى مجموعة الأدوات الكاملة المتاحة. | أنت تعرف الخطوات بالفعل وتريد تكرارها بشكل موثوق. |
| إذا أردت حلّ المشاكل بشكل ديناميكي ومباشر وإجراء فحص دقيق للمتصفّح | إذا أردت مهارات وكيل فعّالة من حيث الرموز المميّزة أو أتمتة مستندة إلى Terminal |
| يعمل الوكيل في بيئة تطوير متكاملة (IDE) أو برنامج متوافق مع بروتوكول MCP. | لا تتوافق بيئتك مع برامج MCP. |
عند استخدام واجهة سطر الأوامر، يُرجى مراعاة ما يلي:
- تغطية الأدوات: تتوافق واجهة سطر الأوامر مع معظم أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء لأتمتة المهام المستندة إلى واجهة الأوامر. للاطّلاع على القائمة الكاملة للأوامر، يُرجى مراجعة مرجع مهارات واجهة سطر الأوامر.
- التشغيل الضمني: يبدأ تشغيل الخادم في الخلفية تلقائيًا عند أول استخدام، ولن تحتاج إلى تشغيل
startأوstatusأوstopقبل كل أمر. - الحالة الثابتة: تظل حالة المتصفّح ثابتة في جميع الأوامر، لذا تظل الصفحة التي تفتحها في أحد الأوامر متاحة في الأمر التالي إذا لم يتم إغلاقها بشكل صريح.
- أرقام تعريف الصفحات وأرقام UID للعناصر: تتطلّب معظم الأوامر رقم تعريف الصفحة كوسيطة أولى. شغِّل
chrome-devtools list_pagesللعثور عليه، وchrome-devtools take_snapshotللحصول على أرقام UID للعناصر التي تريد التفاعل معها. - تنسيق الناتج: يكون الناتج تلقائيًا نصًا عاديًا يشبه Markdown. يمكنك تمرير
--output-format=jsonإذا أردت استخدام النتائج في نصوص برمجية أخرى أو مسارات CI. - الوصول إلى الملفات: تملك واجهة سطر الأوامر تلقائيًا إذن الوصول الكامل إلى نظام الملفات من أجل مَعلمات حفظ الملفات و
upload_file. يمكنك تمرير--allowUnrestrictedPaths=falseلتقييد الوصول إلى الملفات في دليل نظام التشغيل المؤقت. - Lighthouse في CI: يمكنك تشغيل
lighthouse_auditمن واجهة سطر الأوامر، ولكنّ واجهة سطر الأوامر في Lighthouse المستقلة وإجراءات GitHub الخاصة بها تكون أكثر ملاءمةً إذا كنت بحاجة فقط إلى نتائج Lighthouse في CI. - تجريد أبسط من نصوص التشغيل الآلي للمتصفّح: على عكس كتابة نصوص Puppeteer أو Playwright البرمجية الكاملة في JavaScript أو TypeScript، توفّر واجهة سطر الأوامر في "أدوات مطوّري البرامج" واجهة برمجة تطبيقات محدودة وموجّهة بشكل كبير. تُعدّ بنية shell هذه أسهل في القراءة والصيانة بالنسبة إلى البشر، وأسهل بكثير في الإنشاء بشكل موثوق بدون هلوسة، حتى بالنسبة إلى النماذج المنخفضة المستوى.
المتطلبات الأساسية
قبل استخدام واجهة سطر الأوامر، تأكَّد من توفّر ما يلي:
- تثبيت "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء": اتّبِع دليل البدء. تتضمّن المكوّنات الإضافية والإضافات الخاصة بالوكيل (مثل إضافة Gemini CLI) المهارات المستندة إلى الوكلاء إلى جانب خادم MCP.
- واجهة سطر الأوامر (CLI) المتاحة في واجهة الأوامر: التثبيت هو خطوة تتم لمرة واحدة وليس جزءًا من سير عمل الوكيل العادي. يُرجى الاطّلاع على مرجع التثبيت.
- مهارة
chrome-devtools-cli(المثبَّتة مع "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء"): تعلّم هذه المهارة وكيلك كيفية كتابة نصوص برمجية لـ Shell أو تشغيل أوامر Shell باستخدام واجهة سطر الأوامر.
بنية الأمر
تتّبع الأوامر النمط chrome-devtools <tool> [arguments] [flags].
الوسيطات المطلوبة هي وسيطات موضعية، وتستخدم الوسيطات الاختيارية علامات. استخدِم --help
مع أي أمر للحصول على التفاصيل.
على سبيل المثال:
chrome-devtools new_page "https://example.com" # Open a page
chrome-devtools list_pages # Find the page ID
chrome-devtools take_snapshot 1 # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello" # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"
حالات استخدام واجهة سطر الأوامر في "أدوات مطوّري البرامج في Chrome"
اطلب من الوكيل تسجيل الخطوات التي توصّل إليها كنص برمجي، بدلاً من إعادة حلّ مسار المتصفّح نفسه في كل جلسة.
حفظ جلسة تصحيح الأخطاء كنص برمجي قابل لإعادة الاستخدام
بعد جلسة تصحيح أخطاء استكشافية عبر بروتوكول MCP، لا يمكنك في كثير من الأحيان ضمان عدم ظهور المشكلة نفسها مرة أخرى. بدلاً من إعادة شرح خطوات إعادة الإنتاج في المرة القادمة، اطلب من وكيلك كتابة المسار الذي نفّذه للتو.
مثال على طلب:
Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.
مثال على تنفيذ الوكيل: يراجع الوكيل خطوات التنقّل والإدخال والفحص التي اتّخذها خلال الجلسة ويترجمها إلى سلسلة من أوامر chrome-devtools، مثل new_page وtake_snapshot وfill وclick وlist_console_messages. يتم حفظ النص البرمجي باسم test.sh. في المرة التالية التي تقوم فيها بتصحيح أخطاء هذه المنطقة، يمكنك توجيه وكيلك إلى البرنامج النصي للوصول إلى نفس الحالة مرة أخرى، أو تشغيله خارج حلقة الوكيل لتصحيح الأخطاء يدويًا.
إعادة إنتاج حالة التطبيق قبل التحقيق
فالحالات المعقّدة، مثل عملية الدفع المتعدّدة الخطوات أو لوحة البيانات المفلترة، تتطلّب من الوكيل إعادة إنشائها من خلال المحادثة في كل مرة، ما يكلّف الكثير من الوقت والجهد. استخدِم نصًا برمجيًا محفوظًا كنقطة بداية لتحقيق جديد.
مثال على طلب:
Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.
مثال على تنفيذ الوكيل: يشغّل الوكيل النص البرمجي الذي ينتقل إلى صفحة الدفع، ويملأ نموذج العنوان، ويحدّد خيار الشحن. بما أنّ حالة المتصفّح تظلّ محفوظة في جميع الأوامر، يستخدم وكيلك بعد ذلك take_snapshot وevaluate_script في الصفحة نفسها لفحص حالة الزرّ ومعالِجات الأحداث المرتبطة بأداة اختيار الدفع.
عمليات التحقّق المرئية المجمّعة على مستوى إطارات العرض
إنّ التحقّق من تغيير في التنسيق على عدة أحجام شاشات هو أمر متكرر ويتم عادةً يدويًا. اطلب من الوكيل نصًا برمجيًا يطبّق إعدادات المحاكاة ويلتقط دليلاً لكل منها في عملية تشغيل واحدة.
مثال على طلب:
Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.
مثال على تنفيذ الوكيل: يكتب الوكيل حلقة تكرارية تستدعي
chrome-devtools emulate 1 --viewport "<size>" متبوعة بـ chrome-devtools
take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png"
لكل إطار عرض. يمكنك إعادة تشغيل النص البرمجي بعد كل تغيير في CSS بدون
فتح محادثة.
إجراء اختبار دخان لمسار لا يتوفّر فيه عميل MCP
لا تتيح بعض البيئات، مثل حاويات CI أو إعدادات المؤسسات المقفلة، استخدام عملاء MCP. تتيح كل وحدة طرفية وقشرة فرعية وحاوية CI وإطار عمل وكيل تقريبًا تشغيل نصوص برمجية عادية للقشرة وقراءة stdout، ما يجعل واجهة سطر الأوامر مناسبة لعمليات التحقّق البسيطة في هذه الأماكن.
مثال على طلب:
Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.
مثال على تنفيذ الوكيل: يكتب الوكيل نصًا برمجيًا يستخدم new_page وtake_snapshot وfill وclick، ثم يستدعي list_console_messages 1
--types error --output-format=json ويحلّل مخرجات JSON لتحديد رمز الخروج.
تجميع سير عمل كمهارة بسيطة
إذا كان سير العمل مفيدًا في مشاريع أو مع زملاء في الفريق، يمكن للوكيل تضمين النص البرمجي في مهارة. هنا يأتي دور مهارة واجهة سطر الأوامر في "أدوات مطوّري البرامج"، وهي مرجع خفيف يتيح للوكيل تنفيذ أوامر محدّدة في المتصفّح بدون دفع تكلفة الرموز المميّزة مسبقًا لجميع الأدوات.
مثال على طلب:
Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.
مثال على تنفيذ الوكيل: ينشئ الوكيل SKILL.md باسم ووصف من سطر واحد للحالات التي تنطبق فيها المهارة وتعليمات تشير إلى النص البرمجي. وفي الجلسات اللاحقة، يقرأ الوكيل المهارة الكاملة فقط عندما تتطابق المهمة
مع وصفها.
الخطوات التالية
- للحصول على القائمة الكاملة لأوامر وعلامات واجهة سطر الأوامر، يُرجى الاطّلاع على مرجع مهارات واجهة سطر الأوامر.
- لضبط الخادم الأساسي (وضع headless والقنوات والفئات التجريبية)، يُرجى الاطّلاع على الإعدادات.