المهارات chrome-devtools
🖥️

chrome-devtools

مخاطر منخفضة ⚙️ الأوامر الخارجية

أتمتة Chrome وتصحيح أخطاء صفحات الويب

أتمتة المتصفح بطيئة ومعرضة للأخطاء مع الأوامر اليدوية. توفر هذه المهارة أنماطًا محسّنة لأتمتة Chrome وتصحيح أخطاء الصفحات والتقاط لقطات الشاشة وفحص طلبات الشبكة من خلال خادم chrome-devtools-mcp.

يدعم: Claude Codex Code(CC)
📊 69 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "chrome-devtools". التقاط لقطة شاشة لـ https://example.com

النتيجة المتوقعة:

  • تم التقاط لقطة الشاشة بنجاح (صفحة كاملة، تنسيق PNG)
  • تم تنظيف جلسة المتصفح تلقائيًا
  • اكتمل الأمر في حوالي 8 ثوانٍ

استخدام "chrome-devtools". التحقق من أخطاء وحدة التحكم على localhost:3000

النتيجة المتوقعة:

  • رسائل وحدة التحكم الموجودة: 3 أخطاء
  • Error 1: Uncaught ReferenceError at line 42
  • Error 2: TypeError: undefined is not an object

استخدام "chrome-devtools". عرض طلبات الشبكة على example.com

النتيجة المتوقعة:

  • طلبات الشبكة الملتقطة: 12 إجمالاً
  • GET / (200 OK) - 15ms
  • GET /styles.css (200 OK) - 45ms
  • GET /api/data (304 Not Modified) - 23ms

التدقيق الأمني

مخاطر منخفضة
v5 • 1/16/2026

Documentation-only skill providing patterns for chrome-devtools-mcp server. Contains only markdown files with shell command examples for legitimate browser automation. No executable code, no credential access, no network exfiltration. Static findings are false positives from pattern detection in documentation text.

2
الملفات التي تم فحصها
343
الأسطر التي تم تحليلها
1
النتائج
5
إجمالي عمليات التدقيق

عوامل الخطر

⚙️ الأوامر الخارجية (1)
SKILL.md:21-240
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
85
المحتوى
30
المجتمع
90
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

تصحيح أخطاء التطوير المحلي

التحقق من أخطاء وحدة التحكم وطلبات الشبكة على خوادم التطوير المحلية localhost بسرعة.

أتمتة اختبار المتصفح

التقاط لقطات الشاشة ومحتوى الصفحة للتحقق من تغييرات واجهة المستخدم والسلوك.

استخراج بيانات صفحات الويب

التنقل إلى الصفحات وتنفيذ النصوص البرمجية وأخذ لقطات للمحتوى لسير عمل استخراج البيانات.

جرّب هذه الموجهات

التحقق من أخطاء وحدة التحكم 
Check console errors on http://localhost:3000 using chrome-devtools skill
التقاط لقطة شاشة 
Take a full-page screenshot of https://example.com using chrome-devtools
فحص الشبكة 
Show all network requests on https://httpbin.org using chrome-devtools
تشغيل JavaScript 
Run JavaScript on https://example.com to count all div elements

أفضل الممارسات

  • استخدام وضع shell مع عدة أوامر في خط أنابيب واحد لتنفيذ أسرع
  • استخدام علامة --isolated دائمًا لمنع تعارضات قفل ملف تعريف المتصفح
  • تضمين غلاف المهلة الزمنية لمنع الأوامر المعلقة

تجنب

  • تشغيل جلسات shell منفصلة لكل أمر يسبب مشاكل قفل المتصفح
  • تخطي خطوة التنظيف يؤدي إلى أخطاء المتصفح قيد التشغيل بالفعل
  • استخدام npx بدلاً من bunx قد يسبب مشاكل التوافق

الأسئلة المتكررة

ما هي المتصفحات المدعومة؟
فقط Google Chrome مدعوم. يستخدم خادم MCP بروتوكول Chrome DevTools مباشرة.
ما هو الحد الأقصى لحجم لقطة الشاشة؟
تدعم لقطات الشاشة التقاط الصفحة الكاملة. قد تستغرق الصفحات الكبيرة وقتًا أطول للمعالجة.
كيف أتصل بنسخة Chrome موجودة؟
ابدأ Chrome مع علامة --remote-debugging-port=9222 واستخدم معامل --browserUrl.
هل بيانات التصفح الخاصة بي آمنة؟
تستخدم علامة --isolated ملفات تعريف متصفح مؤقتة. تجنب زيارة المواقع الحساسة أثناء الأتمتة.
لماذا أحصل على أخطاء قفل المتصفح؟
نسخ المتصفح السابقة تحتفظ بملف التعريف. قم بتشغيل pkill -9 -f chrome-devtools-mcp أولاً.
كيف يقارن هذا مع Puppeteer أو Playwright؟
هذا يستخدم بروتوكول Chrome DevTools MCP مباشرة. إنه أخف وزنًا ولكن أقل ثراءً بالميزات من تلك الأدوات.

تفاصيل المطور

المؤلف

Cygnusfear

الترخيص

MIT

المستودع

https://github.com/Cygnusfear/claude-stuff/tree/main/skills/chrome-devtools

مرجع

main

بنية الملفات

📄 SKILL.md