/ الدليل / الملعب / Browser Tools
← كل الخوادم ↗ GitHub
● مجتمع AgentDeskAI ⚡ فوري

Browser Tools

بواسطة AgentDeskAI · AgentDeskAI/browser-tools-mcp

اقرأ سجلات وحدة التحكم المباشرة، وأخطاء الشبكة، وDOM، والقطات الشاشة من Chrome الحقيقي الخاص بك — السياق المطلوب للتصحيح مباشرة إلى وكيلك.

يأتي MCP browser-tools من AgentDeskAI مع ملحقة Chrome + جسر محلي + خادم MCP. يرى وكيلك ما تراه أنت — جلسات مسجلة الدخول، والملحقات، وDOM الحقيقي ووحدة التحكم. مثالي لجلسات التصحيح حيث تكون إعادة الإنتاج في متصفح نظيف هي المشكلة.

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

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

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

عرض مباشر

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

browser-tools.replay ▶ جاهز
0/0

التثبيت

اختر العميل

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

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

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

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "browser-tools",
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  ]
}

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

~/.config/zed/settings.json
{
  "context_servers": {
    "browser-tools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@agentdeskai/browser-tools-mcp@latest"
        ]
      }
    }
  }
}

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

claude mcp add browser-tools -- npx -y @agentdeskai/browser-tools-mcp@latest

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

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

استخدامات عملية: Browser Tools

تصحيح خطأ واجهة أمامية مباشرة باستخدام وحدة التحكم الحقيقية + السياق الشبكي

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

متى تستخدمه: يحدث الخطأ فقط في جلستك الفعلية (مسجل دخول، بيانات محددة). تريد أن يقرأ الوكيل وحدة التحكم وعلامة التبويب الشبكية.

المتطلبات الأساسية
  • تم تثبيت ملحقة Chrome + خادم الجسر قيد التشغيل — ثبت الملحقة من صفحة الإصدارات، ثم npx @agentdeskai/browser-tools-server@latest في محطة طرفية
  • خادم MCP متصل بعميلك — npx -y @agentdeskai/browser-tools-mcp@latest
الخطوات
  1. أعد إنتاج الخطأ مع DevTools مفتوح
    افتح الصفحة المتأثرة في Chrome مع تفعيل الملحقة. أثر الخطأ. لا تغلق علامة التبويب.✓ تم النسخ
    → الخطأ مرئي، أيقونة الملحقة تظهر أنها تلتقط
  2. اسحب السياق إلى الوكيل
    احصل على آخر 50 رسالة وحدة تحكم وأي طلبات شبكة فاشلة. لخص ما تقوله الصفحة.✓ تم النسخ
    → أخطاء محددة مع تتبعات المكدس
  3. تشخيص واقتراح إصلاح
    بناءً على الأخطاء، أشر إلى الملف/السطر المسؤول على الأرجح. إذا كانت 404، حدد عنوان URL غير الصحيح؛ إذا كانت أخطاء JS، فحدد السبب الجذري.✓ تم النسخ
    → فرضية ملموسة مع دليل

النتيجة: حلقة تصحيح حيث يكون للوكيل نفس السياق الذي لديك عند فتح DevTools — أسرع من قراءة وصف لقطة الشاشة.

المزالق
  • خادم الجسر غير قيد التشغيل، MCP يعيد بيانات فارغة بدون تنبيه — تحقق دائماً من أن curl localhost:3025/identity يرد أولاً؛ يجب أن يكون الجسر قيد التشغيل قبل استدعاء MCP
  • التقاط من علامة تبويب خاطئة — الملحقة تلتقط علامة التبويب النشطة. انقر على علامة التبويب الصحيحة قبل السؤال الوكيل
اجمعها مع: sentry

تشغيل تدقيق على طراز Lighthouse على الصفحة التي تنظر إليها

👤 مهندسو الواجهة الأمامية / SEO / إمكانية الوصول ⏱ ~10 min beginner

متى تستخدمه: تريد تدقيق صفحة كما تُعرض فعلاً في جلستك (وليس فحص نظيف).

الخطوات
  1. افتح الصفحة المستهدفة
    انتقل إلى <URL> في Chrome مع تفعيل الملحقة.✓ تم النسخ
    → تم تحميل الصفحة
  2. تشغيل وضع التدقيق
    شغل أداة التدقيق — الأداء، إمكانية الوصول، SEO، أفضل الممارسات. لخص أفضل 5 مشاكل مع اقتراحات الإصلاح.✓ تم النسخ
    → قائمة المشاكل المرتبة حسب الأولوية
  3. ركز على
    بالنسبة لفشل إمكانية الوصول، اسرد المحددات الدقيقة وقاعدة WCAG المنتهكة.✓ تم النسخ
    → خطوات معالجة قابلة للتنفيذ

النتيجة: تدقيق كامل دون مغادرة متصفحك، محدود بحالة المستخدم الحقيقي.

المزالق
  • التدقيقات للصفحات المحمية بالمصادقة تفشل لأن الأداة تعيد التنقل — استخدم أدوات العنصر/وحدة التحكم في وضع التصحيح على الصفحة المحملة بالفعل بدلاً من التدقيق الكامل

فحص وشرح عنصر محدد

👤 مطورو الواجهة الأمامية، المصممون ⏱ ~5 min beginner

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

الخطوات
  1. حدد العنصر في DevTools
    افتح DevTools، انقر على فاحص العناصر، حدد العنصر المسيء.✓ تم النسخ
    → العنصر مظلل في لوحة العناصر
  2. اطلب من الوكيل الفحص
    احصل على الأنماط المحسوبة للعنصر المحدد، والقواعد الموروثة، والصندوق المحيط. اشرح لماذا يتم عرضه بهذه الطريقة.✓ تم النسخ
    → شرح مؤسس على سلسلة CSS الفعلية
  3. اقترح إصلاح
    اقترح أصغر تغيير CSS لتحقيق [المرئيات المرغوبة]. اعرض القاعدة قبل/بعد.✓ تم النسخ
    → اقتراح فرق minimal

النتيجة: تصحيح CSS بسرعة المحادثة.

المزالق
  • تحديد العنصر لا يستمر — الوكيل يرى عنصر مختلف — أعد تحديد العنصر مباشرة قبل السؤال؛ لا تدع لوحة DevTools تغير التركيز بين الرسائل

التركيبات

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

browser-tools + sentry

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

المشكلة WEB-3a91 في Sentry تقول أن طلب XHR إلى /api/checkout يعيد 500. انتقل إلى الصفحة في Chrome الخاص بي، أعد الإنتاج، والتقط وحدة التحكم + الشبكة.✓ تم النسخ
browser-tools + playwright

browser-tools للتصحيح المباشر، Playwright لإعادة الإنتاج القابلة للتكرار لاحقاً

وجدت الخطأ في Chrome الحي الخاص بي عبر browser-tools. الآن اكتب اختبار Playwright يعيد إنتاج تسلسل النقر الدقيق.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
takeScreenshot التقاط مرئي للحالة الحالية free
getConsoleLogs / getConsoleErrors تصحيح أي خطأ JS free
getNetworkLogs / getNetworkErrors تشخيص استدعاءات API الفاشلة free
getSelectedElement المستخدم حدد عنصر في DevTools free
runAccessibilityAudit مراجعة الوصول للصفحة الحالية free
runPerformanceAudit تدقيق الأداء للصفحة الحالية free
runSEOAudit مراجعة SEO free
runBestPracticesAudit مراجعة جودة الكود العامة free
runNextJSAudit أنت على Next.js free
wipeLogs واضح بين جلسات التحقيق free

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

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

حصة API
لا يوجد — كل شيء محلي
الرموز لكل استدعاء
قد تكون مستخلصات السجل كبيرة (5000+ رمز). استخدم wipeLogs بين الجلسات.
التكلفة المالية
مجاني، مفتوح المصدر
نصيحة
امسح السجلات قبل كل تحقيق — تجنب سحب ضوضاء غير ذات صلة

الأمان

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

تخزين بيانات الاعتماد: لا يوجد — يعمل مقابل جلسة Chrome الموجودة لديك
نقل البيانات الخارجي: فقط إلى localhost:3025 (الجسر). لا شيء يغادر جهازك إلا عبر ما يفعله الوكيل/عميل MCP.

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

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

جميع الأدوات تعيد فارغة / 'غير متصل'

خادم الجسر لا يعمل. ابدأ: npx @agentdeskai/browser-tools-server@latest في محطة طرفية مخصصة.

تحقق: curl http://localhost:3025/identity
أيقونة الملحقة رمادية / غير نشطة

انقر على أيقونة الملحقة، تأكد من قول 'متصل'. إن لم يكن، أعد تحميل علامة التبويب.

فشل التدقيقات مع انتهاء المهلة الزمنية

بعض التدقيقات تحتاج وقت إضافي على الصفحات الثقيلة. أغلق علامات التبويب الأخرى لتحرير CPU؛ أعد التشغيل.

تم التقاط علامة تبويب خاطئة

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

البدائل

Browser Tools مقابل البدائل

البديلمتى تستخدمهاالمقايضة
chrome-devtools MCPتريد وصول CDP مباشر بدون ملحقة متصفحلا توجد ملحقة مطلوبة لكنك تفقد سياق جلسة المستخدم الحقيقي
Playwright MCPتحتاج إلى أتمتة قابلة للتكرار، وليس تصحيح مباشرمتصفح نظيف — لا يمكنك رؤية جلستك المسجلة الدخول

المزيد

الموارد

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

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

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