كيفية استخدام خادم MCP في أدوات مطوري Chrome

لطالما كان تصحيح الأخطاء (Debugging) في صميم تطوير الويب، ولكن مع صعود مساعدي البرمجة المدعومين بالذكاء الاصطناعي، يواجه المطورون تحديًا جديدًا: كيف يمكن لهذه الوكلاء أن يروا ويتفاعلوا بالفعل مع الكود الذي يقومون بإنشائه؟ نقدم لكم **خادم MCP لأدوات مطوري Chrome**—طريقة جديدة لربط مساعدي البرمجة المدعومين بالذكاء الاصطناعي الخاصين بك مع **أدوات المطور (DevTools)** في Chrome لتصحيح الأخطاء في الوقت الفعلي، والحصول على رؤى الأداء، واختبار تدفق المستخدم.

سيرشدك هذا الدليل إلى ماهية خادم Chrome DevTools MCP، وكيف يعمل، ولماذا هو مهم، والأهم من ذلك، **كيفية تثبيته واستخدامه في VS Code و Gemini CLI و Cursor**. بحلول النهاية، ستعرف كيفية دمج بيئة تصحيح الأخطاء القوية في Chrome في سير عمل تطويرك المدعوم بالذكاء الاصطناعي.

💡

هل تريد أداة رائعة لاختبار واجهات برمجة التطبيقات (API) تُنشئ توثيقًا جميلًا لواجهة برمجة التطبيقات؟

هل تريد منصة متكاملة وشاملة لفريق المطورين لديك للعمل معًا بأقصى إنتاجية؟

يلبي Apidog جميع متطلباتك، ويحل محل Postman بسعر أكثر ملاءمة بكثير!

زر

ما هو خادم Chrome DevTools MCP؟

إن **بروتوكول سياق النموذج (MCP)** هو معيار مفتوح المصدر يسمح لنماذج اللغة الكبيرة (LLMs) بالاتصال بالأدوات ومصادر البيانات الخارجية. يجلب **خادم Chrome DevTools MCP** قوة تصحيح الأخطاء في أدوات مطوري Chrome مباشرة إلى وكيل الذكاء الاصطناعي الخاص بك.

بدلاً من إنشاء الكود "بشكل أعمى"، يمكن لمساعد الذكاء الاصطناعي الخاص بك الآن:

تشغيل Chrome وفتح موقع ويب.
جمع آثار الأداء المباشرة.
فحص DOM و CSS ووقت تشغيل JavaScript.
تصحيح مشكلات التخطيط والشبكة ووحدة التحكم.
محاكاة سلوك المستخدم مثل النقرات، وتقديم النماذج، والتنقل.

وهذا يجعل وكيل البرمجة المدعوم بالذكاء الاصطناعي أكثر فعالية بكثير لأنه يمكنه التحقق من تغييرات الكود واختبارها وتحسينها في الوقت الفعلي، بدلاً من التخمين لما قد ينجح.

لماذا تستخدم خادم Chrome DevTools MCP؟

فيما يلي حالات الاستخدام الرئيسية لدمج خادم Chrome DevTools MCP في سير عملك:

1. التحقق من تغييرات الكود في الوقت الفعلي
قم بإنشاء إصلاحات بمساعدة مساعد الذكاء الاصطناعي الخاص بك وتأكد من أنها تعمل على الفور في المتصفح.

مثال على المطالبة: "تحقق في المتصفح من أن التغيير الخاص بك يعمل كما هو متوقع."

2. تشخيص أخطاء الشبكة ووحدة التحكم
تحديد مشكلات CORS، أو فشل واجهة برمجة التطبيقات (API)، أو تحذيرات وقت التشغيل غير المتوقعة.

مثال على المطالبة: "بعض الصور على localhost:8080 لا يتم تحميلها. ماذا يحدث؟"

3. محاكاة سلوك المستخدم
أتمتة تدفقات المستخدم مثل تقديم النماذج أو التنقل لإعادة إنتاج الأخطاء.

مثال على المطالبة: "لماذا يفشل تقديم النموذج بعد إدخال عنوان بريد إلكتروني؟"

4. تصحيح مشكلات الأنماط والتخطيط المباشرة
افحص DOM و CSS بحثًا عن أخطاء التجاوز، أو عدم المحاذاة، أو مشكلات العرض.

مثال على المطالبة: "تبدو الصفحة على localhost:8080 غريبة. تحقق مما يحدث هناك."

5. أتمتة تدقيقات الأداء
قم بتشغيل فحوصات على غرار Lighthouse مباشرة عبر مساعد الذكاء الاصطناعي.

مثال على المطالبة: "Localhost:8080 يتم تحميله ببطء. اجعله يحمل بشكل أسرع."

كيفية تثبيت خادم Chrome DevTools MCP

التثبيت بسيط سواء كنت تستخدم **VS Code أو Gemini CLI** و **Cursor**.

1. التثبيت في VS Code

افتح **VS Code**
اضغط على **Ctrl + Shift + P** (في Windows أو Linux) أو **Cmd + Shift + P** (لنظام Mac).
الآن، ابحث عن **"MCP"** وانقر على **"إضافة خادم MCP" (Add MCP Server).**
حدد **"تصفح خوادم MCP" (Browse MCP Servers).**

في الشريط الجانبي ضمن الإضافات (Extensions)، انقر على **"تصفح خوادم MCP" (Browse MCP Servers)** مرة أخرى. سيتم إعادة توجيهك إلى صفحة ويب تعرض خوادم MCP المتاحة.
في صفحة الويب هذه، ابحث عن **"خادم Chrome DevTools MCP" (Chrome Dev Tools MCP Server)** باستخدام الكلمة الرئيسية **"chrome."**

انقر على **تثبيت (Install)**، ثم اختر **"تثبيت في VS Code" (Install in VS Code).**

بمجرد التثبيت، سيتمكن مساعد الذكاء الاصطناعي في VS Code الخاص بك من الاتصال بـ Chrome لتصحيح الأخطاء المباشر.

تثبيت خادم Chrome DevTools MCP في VS Code

2. التثبيت في Cursor

افتح **محرر Cursor**.
انتقل إلى **الإعدادات (Settings) > الأدوات و MCP (Tools & MCP)**.

مرر لأسفل وانقر على **خادم MCP جديد (New MCP Server).**
سيؤدي هذا إلى فتح ملف JSON لتكوين MCP، حيث سيتعين عليك لصق تكوين MCP التالي:

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

ثم احفظ وأعد تشغيل Cursor.

الآن، سيتعرف Cursor على خادم Chrome DevTools MCP ويربطه بمساعد البرمجة المدعوم بالذكاء الاصطناعي الخاص بك لتصحيح الأخطاء.

3. التثبيت في Gemini (موصى به)

إذا كنت تستخدم **Gemini**، يمكنك أيضًا ربطه بـ **خادم Chrome DevTools MCP**. في الواقع، يوصي Chrome تحديدًا بتمكين هذه الميزة في Gemini للاستفادة الكاملة من إمكانيات تصحيح الأخطاء والفحص.

أولاً، حدد موقع ملف **settings.json** في مجلد .gemini في الدليل الجذر للمستخدم الخاص بك. هذا هو المكان الذي سنضيف فيه تكوين MCP الخاص بنا. يمكنك القيام بذلك بطريقتين:

1. التنقل عبر مجلداتك يدويًا:

ابحث عن مجلد .gemini ضمن ملف تعريف المستخدم الخاص بك ثم افتح ملف **settings.json** باستخدام محرر الأكواد الخاص بك (مثل VS Code).

2. استخدام الطرفية (Terminal):

انتقل إلى الدليل الجذر وافتح مجلد .gemini باستخدام الأوامر أدناه:

cd ~
cd .gemini

داخل مجلد .gemini، افتح ملف **settings.json** باستخدام VS Code باستخدام الأمر:

code settings.json

3. إضافة خادم Chrome DevTools MCP إلى Gemini CLI

الصق التكوين التالي في الملف لإضافة خادم Chrome DevTools MCP:

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

احفظ الملف وأغلقه.

يجب أن يبدو ملف التكوين شيئًا كهذا:

الآن افتح **Gemini** وقم بتشغيل الأمر التالي للتأكد من تثبيت الخادم:

/mcp

يجب أن ترى الآن **خادم Chrome DevTools MCP** مدرجًا ضمن الخوادم المتاحة. من هنا، يمكن لـ Gemini الاتصال مباشرة بأدوات مطوري Chrome، مما يسهل تصحيح أخطاء التطبيقات المباشرة بمساعدة الذكاء الاصطناعي.

كيفية استخدام خادم Chrome DevTools MCP

بمجرد التثبيت، يمكنك البدء في التفاعل معه مباشرة من خلال المطالبات في مساعد الذكاء الاصطناعي الخاص بك. على سبيل المثال:

1. تحليل الأداء
"يرجى التحقق من LCP (Largest Contentful Paint) لموقع web.dev."

استخدام خادم Chrome DevTools MCP لتحليل الأداء

2. تصحيح أخطاء CSS
"افحص localhost:8080 وقم بإصلاح العناصر المتجاوزة في الرأس."

3. سجلات وحدة التحكم والشبكة
"حلل أخطاء وحدة التحكم عند تقديم نموذج تسجيل الدخول على localhost:3000."

4. محاكاة تدفقات المستخدم
"انتقل إلى صفحة التسجيل، املأ النموذج، وأخبرني لماذا يفشل الإرسال."

الآن، لا يكتب مساعد الذكاء الاصطناعي الخاص بك الكود فحسب، بل يقوم أيضًا باختباره وتصحيح أخطائه مثلما يفعل المطور البشري، مباشرة في Chrome.

الميزات المتقدمة

1. التتبع الآلي
تسمح أداة performance_start_trace لوكيل الذكاء الاصطناعي الخاص بك بتسجيل التتبعات وتحليل اختناقات الأداء تلقائيًا.

2. فحص DOM و CSS
يمكن لمساعدي الذكاء الاصطناعي فحص هياكل DOM المباشرة وتقديم إصلاحات CSS أو HTML مستهدفة.

3. سير العمل القابل للتطوير
نظرًا لأنه مدعوم بـ MCP، فإن نفس الإعداد يعمل عبر مختلف المحررات والوكلاء الذين يدعمون MCP، مما يضمن الاتساق.

المشاركة والتوقعات المستقبلية

لا يزال خادم Chrome DevTools MCP في **المعاينة العامة**. هذا يعني أنه يتطور بسرعة، وتبحث Google بنشاط عن ملاحظات المطورين. قد تشمل التحسينات المستقبلية ما يلي:

تكاملات أعمق مع **Lighthouse** و **Core Web Vitals**.
محاكاة أكثر ثراءً لإدخال المستخدم (تدفقات متعددة الخطوات).
تصور أقوى للمشكلات التي يكتشفها الذكاء الاصطناعي.
دعم موسع لتصحيح الأخطاء متعدد علامات التبويب والأجهزة.

يمكنك متابعة التحديثات على مدونة مطوري Chrome وتقديم المشكلات أو الاقتراحات على GitHub.

الخاتمة

إن **خادم Chrome DevTools MCP** هو أكثر من مجرد أداة مطور أخرى—إنه جسر بين سير عمل تصحيح الأخطاء التقليدي وعالم البرمجة المدعومة بالذكاء الاصطناعي الناشئ. من خلال منح وكلاء البرمجة القدرة على الرؤية والاختبار وتصحيح الأخطاء في الوقت الفعلي، فإنه يحولهم من مولدات أكواد إلى **شركاء تصحيح أخطاء** متكاملين.

سواء كنت مطورًا محترفًا يستخدم VS Code، أو طالبًا يجرب في Cursor، أو متحمسًا للذكاء الاصطناعي يستكشف الأتمتة، فإن تثبيت واستخدام خادم Chrome DevTools MCP يمكن أن يعزز بشكل كبير الإنتاجية وجودة الكود.

الآن بعد أن أصبح بإمكان Chrome DevTools التحدث مباشرة مع وكيل الذكاء الاصطناعي الخاص بك، السؤال الوحيد المتبقي هو: ماذا ستبني، تختبر، وتصلح بعد ذلك؟

زر