بدء استخدام "أدوات مطوّري البرامج في Chrome" للوكلاء

"أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء" هي مجموعة من الأدوات التي تتيح لك الاستفادة من إمكانات "أدوات مطوّري البرامج في Chrome" في مهام الترميز المستندة إلى الذكاء الاصطناعي. من خلال تثبيت "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء"، يمكنك الوصول إلى ما يلي:

  • خادم MCP: يربط وكيل الذكاء الاصطناعي بمثيل متصفّح مباشر باستخدام بروتوكول سياق النموذج المفتوح المصدر.
  • أدوات مطوري البرامج في Chrome CLI: واجهة للتفاعل مع المتصفّح مباشرةً من نافذة الأوامر على جهازك
  • المهارات المستندة إلى الوكلاء: تعليمات الخبراء التي تعلّم الوكيل كيفية تنسيق أدوات متعددة لتنفيذ مهام معقّدة، مثل تصحيح أخطاء الأداء أو تسهيل الاستخدام.

في سياق تطوير الويب، تدمج "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء" إمكانات تصحيح الأخطاء في وكيل الذكاء الاصطناعي.

على سبيل المثال، يمكن أن يستخدم أحد العملاء الأدوات لتسجيل آثار الأداء وتقييمها من أجل تحليل أداء موقع إلكتروني وتحديد التحسينات المحتملة. بالإضافة إلى تطوير الويب، تتيح "أدوات مطوّري البرامج" الخاصة بالوكلاء لوكيلك أيضًا تصفّح الويب المباشر بدلاً من استرداد HTML ثابت فقط.

الإعداد

يوضّح لك هذا الدليل كيفية إعداد "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء" لمساعدة وكيل الترميز في التحكّم في متصفّح Chrome مباشر وفحصه.

استخدِم حزمة chrome-devtools-mcp للتحكّم في متصفّح Chrome مباشر وفحصه من وكيل الترميز (مثل Gemini أو Claude أو Cursor أو Copilot). يُرجى العِلم أنّه على الرغم من أنّ "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء" توفّر المجموعة الكاملة من الأدوات، لا تتوافق واجهة سطر الأوامر إلا مع مجموعة فرعية مستهدَفة لأتمتة العمليات المستندة إلى الأوامر.

بيئات التطوير المتكاملة والنماذج المتوافقة

تتوافق أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء مع أي أداة أو بيئة تطوير متكاملة (IDE) تتوافق مع بروتوكول سياق النموذج (MCP). ويشمل ذلك Antigravity وGemini CLI وClaude Code وCursor وCopilot وغيرها.

الاعتبارات الأمنية

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

المتطلبات الأساسية

قبل تثبيت "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء"، تأكَّد من أنّ بيئتك تستوفي المتطلبات التالية:

  • Node.js (أحدث إصدار من LTS) وnpm
  • Chrome (الإصدار الثابت الحالي)

لإعداد "أدوات مطوّري البرامج في Chrome" المخصّصة للوكلاء، اختَر الطريقة التي تتوافق مع بيئة الترميز المفضّلة لديك. بينما تتطلّب بعض البرامج تثبيتًا يدويًا، تتضمّن برامج أخرى الأدوات مدمجة مسبقًا.

Antigravity

تتوفّر "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء" مجمّعة مسبقًا مع Antigravity 2.0. يمكنك البدء في استخدامه على الفور من خلال الوكيل الفرعي للمتصفّح. جرِّب استخدام أمر يبدأ بشرطة مائلة، مثل:

/browser Navigate to the Google homepage

للوصول إلى مهارات الوكيل المتخصّص، ننصحك بتثبيت إضافة DevTools أثناء خطوة البناء باستخدام Google في عملية الإعداد الأولي أو من خلال إعدادات التطبيق. لمزيد من المعلومات، يمكنك الاطّلاع على مستندات Antigravity Browser Subagent.

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

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

إذا لم يكن وكيلك مُدرَجًا هنا، يمكنك العثور على كيفية تثبيته في مستودع GitHub الخاص بـ "أدوات مطوّري البرامج في Chrome للوكلاء".

لإضافة "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء" إلى وكيل سطر الأوامر، استخدِم أوامر واجهة سطر الأوامر المضمّنة الخاصة بالوكيل:

Gemini CLI

ثبِّت إضافة Gemini CLI التي تتضمّن حزمة MCP والمهارات المصاحبة باستخدام الأمر التالي:

# Gemini extension (MCP+Skills)
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

ثبِّت حزمة MCP فقط باستخدام الأمر التالي:

# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

‫Claude Code

لتثبيت "أدوات مطوّري البرامج في Chrome المخصّصة للوكلاء" كمكوّن إضافي لـ Claude Code، استخدِم أوامر الشرطة المائلة التالية في Claude Code. أضِف سجلّ السوق:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

ويمكنك تثبيت المكوّن الإضافي من سجلّ السوق:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

يمكنك الاطّلاع على صفحة "إضافة Claude في أدوات مطوّري البرامج في Chrome" الرسمية للحصول على مزيد من المعلومات.

Codex

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

التثبيت باستخدام إعدادات JSON

بالنسبة إلى الوكلاء الآخرين الذين يتوافقون مع مفتاح الإعداد mcpServers، أضِف هذا الإدخال يدويًا وتأكَّد من تثبيت DevTools للوكلاء من خلال npm i chrome-devtools-mcp.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

التثبيت في وكلاء آخرين

لضبط إعدادات وكيل غير مُدرَج، يُرجى الاطّلاع على مستودع GitHub الخاص بـ MCP في "أدوات مطوّري البرامج في Chrome".

اختبار الإعداد

أدخِل الطلب التالي في وكيلك للتحقّق مما إذا كان كل شيء يعمل:

Check the performance of https://developers.chrome.com

من المفترض أن يفتح الوكيل نافذة متصفّح ويسجّل عملية تتبُّع الأداء.

تحديد المشاكل في الإعداد وحلّها

إذا تعذّر على الوكيل تشغيل الأدوات وكان بإمكانه الوصول إلى مهارات "أدوات مطوّري البرامج في Chrome"، قد يحاول حلّ المشكلة تلقائيًا. إذا لم يحدث ذلك، يمكنك أن تطلب من الوكيل بشكل صريح ما يلي:

Use the Chrome DevTools troubleshooting skill to fix my setup.

أو يمكنك أن تكون أكثر تحديدًا:

I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.

الخطوات التالية

لتخصيص عملية الإعداد، يُرجى الاطّلاع على الإعداد.