/ الدليل / الملعب / dev-browser
● مجتمع SawyerHood ⚡ فوري

dev-browser

بواسطة SawyerHood · SawyerHood/dev-browser

مهارة Claude تُشغّل متصفحًا مُفعَّلًا بـ devtools يمكن لوكيلك قيادته — تنقل، نقر، فحص، لقطة شاشة.

يمنح dev-browser وكيلك Claude متصفحًا غير مرئي موجَّهًا للمطورين عبر prompts المهارات. يُغلّف متصفحًا مبنيًا على CDP بأدوات صديقة للوكيل: selectors ثابتة، لقطة شاشة بعد كل إجراء، ولقطات DOM جاهزة للتقطيع. مثالي حين تحتاج متصفحًا دون إعداد playwright من البداية للنهاية.

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

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

عرض مباشر

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

جاهز

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "dev-browser-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ]
    }
  ]
}

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

~/.config/zed/settings.json
{
  "context_servers": {
    "dev-browser-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/SawyerHood/dev-browser",
          "~/.claude/skills/dev-browser"
        ]
      }
    }
  }
}

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

claude mcp add dev-browser-skill -- git clone https://github.com/SawyerHood/dev-browser ~/.claude/skills/dev-browser

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

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

استخدامات عملية: dev-browser

أجرِ بحثًا ويب سريعًا دون إعداد MCP

👤 المطورون الذين لا يريدون Playwright في إعداد MCP ⏱ ~15 min beginner

متى تستخدمه: تريد من جلسة Claude Code تصفح شيء مرةً واحدة دون الالتزام بخادم متصفح دائم.

المتطلبات الأساسية
  • المهارة مثبَّتة — git clone https://github.com/SawyerHood/dev-browser ~/.claude/skills/dev-browser
  • Chromium متاحnpx playwright install chromium يُحمّل الثنائي
الخطوات
  1. التشغيل
    استخدم dev-browser. افتح https://vercel.com/docs/functions. أدرج أقسام الشريط الجانبي.✓ تم النسخ
    → عناوين مستخرجة مع عناوين URL للارتساء
  2. التعمق
    انتقل إلى «Runtime» — اقرأ الصفحة ولخّص خيارات وقت التشغيل الثلاثة في فقرة لكل منها.✓ تم النسخ
    → ثلاث فقرات مع استشهادات لأجزاء URL
  3. الالتقاط
    التقط لقطة شاشة لقسم التسعير لملاحظاتي.✓ تم النسخ
    → لقطة الشاشة محفوظة محليًا

النتيجة: بحث مكتمل بمتصفح حين احتجته، بلا بنية تحتية مستمرة.

المزالق
  • ثنائي Chromium مفقود — شغّل npx playwright install chromium مرةً واحدة
اجمعها مع: filesystem

فحص سلامة تدفق تسجيل الدخول على بيئة التدريج

👤 المطورون المعنيون بالجودة قبل النشر ⏱ ~5 min beginner

متى تستخدمه: قبل النشر، تريد النقر عبر المسار الرئيسي السعيد مرةً واحدة.

الخطوات
  1. الفتح
    استخدم dev-browser. افتح https://staging.myapp.com، التقط لقطة شاشة.✓ تم النسخ
    → لقطة شاشة الصفحة الرئيسية
  2. تسجيل الدخول
    انقر "Sign in"، أدخل [email protected] / Test1234، أرسل.✓ تم النسخ
    → لوحة تحكم ما بعد تسجيل الدخول ملتقطة
  3. التأكيد
    هل النص «Welcome, qa» مرئي على الصفحة؟✓ تم النسخ
    → نعم/لا + لقطة شاشة

النتيجة: اختبار دخاني في 60 ثانية قبل النقر على نشر.

المزالق
  • CAPTCHA عند تسجيل الدخول — أضف تجاوزًا للاختبار فقط في التدريج؛ dev-browser ليس كاسر CAPTCHA

التركيبات

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

dev-browser-skill + filesystem

حفظ لقطات الشاشة بجانب الملاحظات

بعد كل خطوة، التقط لقطة شاشة في /notes/web-research/.✓ تم النسخ
dev-browser-skill + chrome-devtools

حين تحتاج عمقًا على مستوى devtools، تصاعد إلى chrome-devtools MCP

dev-browser أعطاني الصفحة — الآن استخدم chrome-devtools للتحقق من شلال الشبكة.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
open_url url التنقل 0
click selector|text التفاعل 0
type selector, text إدخال نص 0
snapshot none التأصيل في الحالة الحالية 0

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

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

حصة API
N/A
الرموز لكل استدعاء
لقطات DOM محدودة الحجم؛ لقطات الشاشة base64
التكلفة المالية
مجاني
نصيحة
تخطَّ لقطات DOM حين لا تحتاجها — لقطة الشاشة وحدها كافية في الغالب

الأمان

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

تخزين بيانات الاعتماد: لا شيء
نقل البيانات الخارجي: مباشرةً إلى المواقع التي تتنقل إليها

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

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

Error: Executable doesn't exist at chromium path

npx playwright install chromium — المهارة تفترض ثنائيات Playwright

Selector غير موجود

شغّل snapshot أولًا؛ اختر selector من DOM الحقيقي لا من تخمين

الصفحة تحجب الأتمتة

الموقع اكتشف الوضع غير المرئي — جرّب التشغيل مع headless=false في إعداد المهارة

البدائل

dev-browser مقابل البدائل

البديلمتى تستخدمهاالمقايضة
playwright MCPتريد متصفحًا دائمًا مسجَّلًا في MCPإعداد أكثر؛ المهارة أخف
mcp-chromeتحتاج Chrome الحقيقي المسجَّل دخولهليس متصفح اختبار غير مرئي

المزيد

الموارد

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

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

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