"أدوات مطوّري البرامج في Chrome" للوكلاء هي مجموعة من الأدوات التي تمنحك إمكانات "أدوات مطوّري البرامج في Chrome" في مهام سير عمل الترميز المستندة إلى الذكاء الاصطناعي. عند تثبيت "أدوات مطوّري البرامج في Chrome" للوكلاء، يمكنك الوصول إلى ما يلي:
- خادم MCP: يربط وكيل الذكاء الاصطناعي بمثيل متصفّح مباشر باستخدام بروتوكول سياق النموذج المفتوح المصدر.
- Chrome DevTools CLI: واجهة للتفاعل مع المتصفّح مباشرةً من جهازك الطرفي.
- المهارات المستندة إلى وكيل: تعليمات خبرائية تعلّم وكيلك كيفية تنسيق أدوات متعدّدة للمهام المعقّدة، مثل إمكانية الوصول أو تصحيح أخطاء الأداء.
في سياق تطوير الويب، تدمج "أدوات مطوّري البرامج في Chrome" للوكلاء إمكانات تصحيح الأخطاء في وكيل الذكاء الاصطناعي.
على سبيل المثال، يمكن للوكيل استخدام الأدوات لتسجيل عمليات تتبُّع الأداء وتقييمها من أجل تحليل أداء موقع إلكتروني وتحديد التحسينات المحتملة. بالإضافة إلى تطوير الويب، تتيح "أدوات مطوّري البرامج" للوكلاء أيضًا لوكيلك تصفُّح الويب المباشر بدلاً من استرداد HTML ثابت فقط.
الإعداد
يوضّح لك هذا الدليل كيفية إعداد "أدوات مطوّري البرامج في Chrome" للوكلاء لمساعدة وكيل الترميز في التحكّم في متصفّح Chrome مباشر وفحصه.
استخدِم حزمة chrome-devtools-mcp للتحكّم في متصفّح Chrome مباشر وفحصه من وكيل الترميز (مثل Gemini أو Claude أو Cursor أو Copilot). يُرجى العِلم أنّه على الرغم من أنّ "أدوات مطوّري البرامج في Chrome" للوكلاء توفّر المجموعة الكاملة من الأدوات، لا يتيح سطر الأوامر سوى مجموعة فرعية مستهدَفة للأتمتة المستندة إلى shell.
نماذج وبيئات تطوير متكاملة متوافقة
تتوافق "أدوات مطوّري البرامج في Chrome" للوكلاء مع أي أداة أو بيئة تطوير متكاملة تتيح استخدام بروتوكول سياق النموذج. ويشمل ذلك Antigravity وGemini CLI وClaude Code وCursor وCopilot وغير ذلك.
الاعتبارات الأمنية
بما أنّ وكيلك سيتمكّن من عرض الصفحات التي يصل إليها والتفاعل معها، يمكنه التصرّف نيابةً عنك بشكل فعّال إذا ربطته بمتصفّح يتضمّن جلسة نشطة وموثوقة. يُرجى تجنُّب مشاركة معلومات حساسة أو شخصية لا تريد مشاركتها مع الوكلاء.
المتطلبات الأساسية
قبل تثبيت "أدوات مطوّري البرامج في Chrome" للوكلاء، تأكَّد من أنّ بيئتك تستوفي المتطلبات التالية:
لإعداد "أدوات مطوّري البرامج في Chrome" للوكلاء، اختَر الطريقة التي تتطابق مع بيئة الترميز المفضّلة لديك. بينما تتطلّب بعض الوكلاء التثبيت اليدوي، تأتي وكلاء أخرى مع الأدوات المدمجة مسبقًا.
Antigravity
تأتي "أدوات مطوّري البرامج في Chrome" للوكلاء مجمّعة مسبقًا مع Antigravity 2.0. يمكنك البدء في استخدامها على الفور مع الوكيل الفرعي للمتصفّح. جرِّب استخدام أمر يبدأ بشرطة مائلة، مثل:
/browser Navigate to the Google homepage
للوصول إلى مهارات الوكيل المتخصّصة، ننصحك بتثبيت المكوّن الإضافي "أدوات مطوّري البرامج" خلال خطوة الإنشاء باستخدام 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. أضِف قاعدة بيانات المسجّلين في Marketplace:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
وثبِّت المكوّن الإضافي من قاعدة بيانات المسجّلين في Marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
راجِع صفحة المكوّن الإضافي الرسمي لـ Chrome DevTools Claude Plugin لمزيد من المعلومات.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
التثبيت باستخدام إعداد JSON
بالنسبة إلى الوكلاء الآخرين الذين يتيحون استخدام مفتاح الإعداد mcpServers، أضِف
هذا الإدخال يدويًا وتأكَّد من تثبيت "أدوات مطوّري البرامج" للوكلاء من خلال npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
التثبيت في وكلاء آخرين
لضبط وكيل غير مدرَج، راجِع مستودع GitHub الخاص بـ أدوات مطوري البرامج في Chrome MCP.
اختبار الإعداد
أدخِل الطلب التالي في وكيلك للتحقّق مما إذا كان كل شيء يعمل:
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.
التهيئة المتقدمة
في ما يلي بعض الطرق الأخرى التي يمكن لوكيلك من خلالها الوصول إلى المتصفّح.
إعداد وضع التشغيل بدون واجهة مستخدم
إذا أردت تنفيذ مهام في الخلفية بدون نافذة متصفّح مرئية، يمكنك تشغيل Chrome في وضع التشغيل بلا واجهة مستخدم رسومية. أضِف العلامة --headless إلى وسيطات الخادم:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
الاتصال بجلسة متصفّح حالية
تبدأ "أدوات مطوّري البرامج" للوكلاء تلقائيًا مثيلاً جديدًا من Chrome. ومع ذلك، يمكنك ربط وكيلك بجلسة متصفّح حالية باستخدام العلامة --autoConnect. ويكون ذلك مفيدًا بشكل خاص إذا كان على وكيلك التحقيق في مشكلة لا يمكن الوصول إليها إلا بعد تسجيل الدخول أو في جلسة بدأتها من قبل.
هناك طريقتان للاتصال بجلسة حالية:
استخدام الاتصال التلقائي (Chrome 144 والإصدارات الأحدث)
عند إعداد خادم أدوات مطوري البرامج في Chrome MCP باستخدام الخيار --autoConnect، سيتصل خادم MCP بمثيل نشط من Chrome ويطلب جلسة تصحيح أخطاء عن بُعد.
- في متصفّح Chrome قيد التشغيل، انتقِل إلى
chrome://inspect/#remote-debuggingلتفعيل تصحيح الأخطاء عن بُعد. عدِّل إعدادات MCP لتضمين العلامة
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }أرسِل طلبًا إلى وكيلك. سيعرض Chrome مربّع حوار يطلب إذن المستخدم للسماح بجلسة تصحيح الأخطاء عن بُعد. انقر على سماح.
الاتصال يدويًا باستخدام منفذ تصحيح الأخطاء عن بُعد
إذا لم تتمكّن من استخدام --autoConnect (على سبيل المثال، إذا كنت تشغِّل وكيلك داخل بيئة معزولة)، يمكنك بدء Chrome يدويًا باستخدام منفذ تصحيح الأخطاء.
في ما يلي مثال (على نظام التشغيل macOS):
ابدأ متصفّح Chrome مع تفعيل منفذ تصحيح الأخطاء عن بُعد. لأسباب أمنية، عليك أيضًا تحديد دليل مخصّص لبيانات المستخدم.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableاضبط وكيلك للاتصال باستخدام المَعلمة
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }