/ الدليل / الملعب / Chrome DevTools
← كل الخوادم ↗ GitHub
● رسمي ChromeDevTools ⚡ فوري

Chrome DevTools

بواسطة ChromeDevTools · ChromeDevTools/chrome-devtools-mcp

أعطِ Claude نفس الرؤية التي يعطيك إياها DevTools — آثار الأداء والشبكة والكونسول والـ DOM مباشرة. رسمي، تم تطويره بواسطة فريق Chrome.

أداة MCP رسمية لـ Chrome DevTools. تقود متصفح Chromium حقيقياً تحت الغطاء، وتكشف التنقل وفحص الـ DOM وتسجيل الشبكة وقراءة الكونسول وآثار الأداء وتقييم الـ JavaScript. تسمح للوكيل بتصحيح صفحات الويب والتحقق مما تم بناؤه للتو.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

chrome-devtools.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "chrome-devtools",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "chrome-devtools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "chrome-devtools-mcp"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: Chrome DevTools

تشخيص سبب بطء الصفحة باستخدام تتبع بأسلوب Lighthouse

👤 مهندسو الواجهة الأمامية والأداء ⏱ ~20 min intermediate

متى تستخدمه: تشعر الصفحة بأنها بطيئة وتريد أن يشغل Claude تتبعاً ويشير إلى الاختناق الفعلي بدلاً من التخمين.

المتطلبات الأساسية
  • يتم تحميل عنوان URL الهدف بدون تسجيل دخول (أو تتعامل مع المصادقة أولاً) — استخدم navigate_page مع عنوان URL؛ بالنسبة للصفحات المحمية بالمصادقة، قم بتسجيل الدخول أولاً عبر أدوات النقر والكتابة في chrome-devtools
الخطوات
  1. تشغيل تتبع الأداء
    افتح https://example.com/product/123. شغّل تتبع أداء مع تجميد CPU بمقدار 4x وملف تعريف شبكة slow-3G. أخبرني عن LCP و CLS و TBT.✓ تم النسخ
    → ثلاثة أرقام قياس بالإضافة إلى ملخص التتبع
  2. العثور على المسبب الرئيسي
    ما الموارد أو البرنامج النصي الوحيد الذي يساهم أكثر في تأخير LCP؟ أظهر توقيت الطلب.✓ تم النسخ
    → عنوان URL محدد تم تحديده، مع توزيع التوقيت (DNS/الاتصال/TTFB/التنزيل)
  3. اقتراح إصلاح ملموس
    ما الإصلاح الأقل تكلفة الذي سيجعل LCP أقل من 2.5 ثانية؟ اقترح تغييراً واحداً (preconnect أو preload أو defer أو lazy أو bundle-split) مع أسطر محددة للإضافة.✓ تم النسخ
    → فرق HTML/JavaScript قابل للتنفيذ، وليس قائمة عامة

النتيجة: تراجع في الأداء له سبب محدد وإصلاح معين، قابل للتحقق منه بإعادة تشغيل التتبع بعد تطبيقه.

المزالق
  • يختلف التتبع من تشغيل إلى آخر — الأرقام لمرة واحدة تضلل — شغّل التتبع 3 مرات وخذ الوسيط قبل الخروج بأي استنتاج
  • تختلف البناءات المحلية/التطوير عن الإنتاج — شغّل التتبع ضد عنوان URL للإنتاج أو معاينة يتم توفيرها من قبل CDN، وليس localhost بدون ضغط
اجمعها مع: filesystem · github

تحقق من أن الميزة التي كتبها Claude للتو تعمل بالفعل في المتصفح

👤 المطورون بمساعدة AI يغلقون الحلقة في وكيلهم ⏱ ~10 min beginner

متى تستخدمه: عدّل Claude للتو بعض رمز الواجهة الأمامية. قبل قول 'تم'، تريد منه فتح الصفحة والنقر على الزر والتأكد من أنه يعمل.

المتطلبات الأساسية
  • خادم التطوير قيد التشغيل — npm run dev في طرف آخر؛ لاحظ عنوان URL
الخطوات
  1. افتح الميزة والتقط صورة
    افتح http://localhost:3000/new-feature. التقط صورة. صف ما تراه — هل يطابق النية؟✓ تم النسخ
    → صورة بالإضافة إلى وصف صادق (قد تشير إلى 'الزر معروض خارج الشاشة')
  2. مارس التفاعل
    انقر على زر 'Submit' ببيانات الاختبار: {email: '[email protected]'}. التقط طلب الشبكة الخارج والاستجابة.✓ تم النسخ
    → إدخال شبكة مع استجابة 200 وحمل مطابق
  3. تحقق من الكونسول للأخطاء
    أي أخطاء أو تحذيرات في الكونسول أثناء هذا التدفق؟ قم بتضمين تحذيرات ترطيب React أو تحذيرات المفتاح المفقود.✓ تم النسخ
    → كونسول نظيفة، أو إصلاح محدد لأي تحذيرات وجدت

النتيجة: ميزة تم اختبارها ذاتياً مع صورة + تتبع شبكة كدليل. يسد الفجوة 'AI كتب رمزاً لا يعمل بالفعل'.

المزالق
  • تبدو الصورة بخير لكن التفاعل معطوب — تمرن دائماً على تدفق المستخدم (النقر/الكتابة)، وليس مجرد الفحص البصري
  • HMR لديه سباق مع صورة Claude — بعد التنقل، انتظر networkidle قبل التأكيد على أي شيء
اجمعها مع: filesystem · github

تصحيح سبب فشل استدعاء API من واجهتك الأمامية

👤 مطورو Stack الكامل يتابعون 4xx/5xx الذي 'لا يحدث محلياً' ⏱ ~15 min intermediate

متى تستخدمه: يعرض كونسول المتصفح fetch فاشل، ولا تثق في ذاكرتك الخاصة حول ما يتم إرساله من رؤوس/جسم.

الخطوات
  1. تشغيل الاستدعاء الفاشل
    افتح الصفحة، قم بإجراء الإجراء الذي يفشل. التقط عنوان URL الكامل للطلب الفاشل والطريقة والرؤوس والجسم.✓ تم النسخ
    → حمل الطلب الدقيق مرئي — لا تخمين
  2. مقارنة مع المتوقع
    الخادم يتوقع رأس X-Client-Id وجسم JSON مع حقل user_id. ما الذي يخرج بالفعل؟ اختلفه.✓ تم النسخ
    → تم تحديد حقل مفقود أو خاطئ محدد
  3. إصلاح والتحقق مرة أخرى
    أصلح الكود المصدري بحيث يطابق الطلب. ثم أعد تحميل الصفحة وأكد أن الاستدعاء الآن يعيد 200.✓ تم النسخ
    → يظهر إدخال الشبكة النهائي 200، وليس الخطأ الأصلي

النتيجة: استدعاء API مصحح مع إثبات تبويب الشبكة بأنه يعمل الآن — لا مزيد من 'يعمل على جهازي'.

المزالق
  • ملفات تعريف الجلسة أو CORS preflight تخفي الطلب الحقيقي — لا تنظر فقط إلى الطلب الفاشل — تحقق من خيارات الاختبار المسبق والسجل Set-Cookie
اجمعها مع: filesystem · postgres

اكتشف الانحدارات البصرية بعد إعادة تصميم CSS

👤 مطورو الواجهة الأمامية الذين يقومون بترحيل نظام التصميم ⏱ ~20 min intermediate

متى تستخدمه: قمت بإعادة تصميم CSS/الرموز. تريد التقاط 'آه لا الزر أصبح وردياً الآن' قبل الدمج.

الخطوات
  1. لقطة من الصفحات الرئيسية في main
    على http://localhost:3000 (فرع main)، التقط صور /, /pricing, /dashboard. احفظها في /tmp/visual/main/.✓ تم النسخ
    → تم حفظ 3 صور
  2. لقطة من نفس الصفحات على فرعك
    انتقل إلى فرع 'css-refactor' وأعد تشغيل خادم التطوير. التقط صور الصفحات الثلاث نفسها إلى /tmp/visual/branch/.✓ تم النسخ
    → تم حفظ 3 صور بمسارات متطابقة
  3. اختلاف والوصف
    لكل زوج، قارنهما بصرياً واصف أي تغيير. تجاهل مكافحة التعرج على مستوى البكسل؛ ارفع علم أي شيء قد يلاحظه المصمم.✓ تم النسخ
    → ملخص فرق لكل صفحة، وليس 'يبدو نفسه'

النتيجة: فرق جاهز للمراجعة يلتقط التغييرات البصرية غير المقصودة.

المزالق
  • المحتوى الديناميكي (التواريخ والتحيات العشوائية) يتغير بين الصور — استب الوقت وجمد RNG، أو قص تلك المناطق
اجمعها مع: filesystem · github

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

chrome-devtools + filesystem

تحرير المصدر → إعادة تحميل الصفحة → التحقق، في حلقة ضيقة

افتح localhost:3000/checkout. زر إرسال النموذج لون خاطئ. ابحث عن CSS الذي يتعلق به في src/ وأصلحه، ثم أعد تحميل وخذ لقطة شاشة للتأكيد.✓ تم النسخ
chrome-devtools + github

إعادة إنتاج خطأ من المشكلة، والتحقق من الإصلاح، وفتح PR مع لقطة شاشة

تقرير Issue #482 عن خطأ تخطيط على /pricing بعرض 375px. أعد إنتاجه باستخدام chrome-devtools (لقطة شاشة بعرض 375px)، أصلح CSS، افتح PR يتضمن لقطات الشاشة قبل وبعد.✓ تم النسخ
chrome-devtools + sentry

إعادة إنتاج خطأ مستخدم حقيقي موجود في Sentry، في متصفحك المحلي

بالنسبة لمسألة Sentry WEB-3a91، تظهر breadcrumbs أن المستخدم انتقل إلى /cart ثم نقر على 'Checkout'. أعد تشغيل ذلك في chrome-devtools والتقط ما يكسر بالفعل.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
navigate_page url: str, wait_for?: 'load'|'networkidle' ابدأ أي تفاعل صفحة free
take_screenshot fullPage?: bool, selector?: str التأكيد البصري بعد التنقل أو التفاعل free
take_snapshot none محتوى الصفحة المنظم كنص — أفضل من الصور لـ Claude للتفكير فيها free
click selector: str | uid: str انقر على عنصر بواسطة CSS selector أو snapshot UID free
fill selector: str, value: str اكتب في حقل الإدخال free
evaluate_script script: str شغّل JavaScript تعسفي في سياق الصفحة للفحص free
list_console_messages none اقرأ سجلات الكونسول والأخطاء من الصفحة free
list_network_requests filter?: str افحص جميع XHR/fetch التي حدثت free
get_network_request requestId: str احصل على الرؤوس الكاملة وجسم طلب واحد free
performance_start_trace reload?: bool, cpu_throttle?: number, network?: 'slow3g'|'fast3g' ابدأ تسجيل الأداء free
performance_stop_trace none توقف وحلل تتبع الأداء الجاري free
emulate_cpu rate: number محاكاة الأجهزة البطيئة (4x = الهاتف المتوسط) free
emulate_network profile: 'slow3g'|'fast3g'|'offline' الاختبار تحت شبكات مقيدة free
new_page / close_page / select_page various إدارة علامات تبويب متعددة free

التكلفة والحدود

تكلفة التشغيل

حصة API
بلا — يشغل متصفحاً محلياً
الرموز لكل استدعاء
اللقطات وتفريغات الشبكة يمكن أن تكون كبيرة (5-30k tokens)؛ take_snapshot عادة ما يكون أكثر كفاءة في الرموز من الصور الكاملة بالإضافة إلى تفريغ DOM
التكلفة المالية
مجاني
نصيحة
فضّل take_snapshot على take_screenshot لـ Claude للتفكير في البنية — اللقطات مضغوطة ونصية. احفظ الصور لمراجعة الإنسان.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: لا شيء على مستوى MCP؛ إذا قمت بتسجيل الدخول إلى موقع أثناء الجلسة، فإن ملفات تعريف الارتباط تبقى في ملف تعريف Chromium حتى تغلقه
نقل البيانات الخارجي: Chromium يتصفح الويب المفتوح نيابة عنك — الأهداف تتلقى عنوان IP الخاص بك. لا توليد بيانات إلى Google بما يتجاوز ما يرسله Chromium الافتراضي.
لا تمنح أبدًا: لا تشير أبداً إلى ملف التعريف الفعلي للمتصفح الذي يحتوي على عمليات تسجيل دخول وكلمات مرور محفوظة

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

Chromium won't launch — missing dependencies on Linux

ثبّت مكتبات النظام المفقودة: sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libxkbcommon0 libasound2. يجمع MCP Chromium لكن ليس جميع اعتماديات وقت التشغيل الخاصة به.

تحقق: شغّل `npx chrome-devtools-mcp --version` — الأخطاء تسمي المكتبة المفقودة
navigate_page times out on slow page

مرر wait_for: 'load' بدلاً من الافتراضي networkidle؛ أو زد المهلة الزمنية في إعدادات MCP للعميل.

click fails: element not found

يكون المحدد قديماً أو مخفياً. أعد استدعاء take_snapshot أولاً واستخدم UID الطازج من اللقطة.

Performance trace is empty

تحتاج إما إلى إعادة تحميل الصفحة أثناء التتبع (reload: true) أو التفاعل معها — لا تنتج علامة تبويب خاملة أي خط زمني.

البدائل

Chrome DevTools مقابل البدائل

البديلمتى تستخدمهاالمقايضة
Playwright MCPتحتاج إلى اختبار عبر المتصفحات (Firefox و WebKit) أو تفضل سطح API الخاص بـ Playwrightقوة مماثلة؛ chrome-devtools لديه تتبع أداء أعمق، playwright لديه أتمتة أوسع
Puppeteer MCPتريد API Puppeteer على مستوى أقلChrome فقط، يتداخل بشدة مع chrome-devtools MCP
browser-tools MCPتريد الاتصال بـ Chrome الموجود لديك عبر امتداد DevTools Protocolلا توجد sandbox جديدة — تستخدم جلسة المتصفح الفعلية الخاصة بك، مع حالة تسجيل الدخول الخاصة بها

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills