chrome-devtools-debugging
تصحيح تطبيقات الويب باستخدام Chrome DevTools
يتطلب تصحيح تطبيقات الويب فحص أخطاء وحدة التحكم وطلبات الشبكة والجلسات المصادق عليها. توفر هذه المهارة وصولاً منظماً إلى Chrome DevTools MCP لسير عمل التصحيح الآلي وتحليل الأداء وتنفيذ JavaScript في سياق المتصفح.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "chrome-devtools-debugging". الحصول على جميع أخطاء وحدة التحكم
Resultado esperado:
- === أخطاء وحدة التحكم ===
- 1. TypeError: Cannot read property 'data' of undefined
- URL: https://app.example.com/dashboard
- Timestamp: 2024-01-15T10:23:45.123Z
- 2. Failed to load resource: net::ERR_FAILED
- URL: https://api.example.com/v1/users
- Status: 401 Unauthorized
Usando "chrome-devtools-debugging". التحقق من حالة الجلسة المصادق عليها
Resultado esperado:
- === localStorage ===
- auth_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
- user_id: "12345"
- sessionExpiry: "2024-01-15T12:00:00Z"
- === sessionStorage ===
- csrf_token: "abc123xyz"
Auditoría de seguridad
SeguroThis is a legitimate Chrome DevTools debugging skill. All static findings are false positives. The 'external_commands' detections are markdown code fences in documentation, not actual shell execution. 'Browser storage access' references are legitimate DevTools debugging operations for inspecting localStorage/sessionStorage during authenticated session debugging. 'Weak cryptographic algorithm' flags are triggered by security-related documentation content, not actual crypto implementation. No malicious code patterns found.
Factores de riesgo
🌐 Acceso a red (2)
⚡ Contiene scripts (1)
📁 Acceso al sistema de archivos (1)
Puntuación de calidad
Lo que puedes crear
تصحيح أخطاء JavaScript في الإنتاج
تحديد وتشخيص أخطاء وحدة التحكم بسرعة في تطبيقات الويب المنشورة دون فحص المتصفح يدوياً. الاتصال بنسخة Chrome قيد التشغيل واسترداد جميع رسائل الخطأ مع تتبع المكدس.
تحليل فشل طلبات API
ربط أخطاء وحدة التحكم مع طلبات الشبكة الفاشلة لتحديد مشاكل API. الحصول على تفاصيل الطلب والاستجابة الكاملة بما في ذلك الرؤوس ورموز الحالة ونصوص الاستجابة.
تصحيح جلسات المستخدمين المصادق عليها
الاتصال بمتصفح Chrome موجود مع مستخدم مسجل دخوله وفحص حالة المصادقة. فحص localStorage للرموز المميزة وsessionStorage لبيانات الجلسة.
Prueba estos prompts
أظهر لي جميع أخطاء وحدة التحكم من جلسة Chrome DevTools. قم بإدراج كل خطأ مع رسالته والطابع الزمني إذا كان متاحاً.
أظهر لي جميع طلبات الشبكة الفاشلة (رموز الحالة 4xx أو 5xx) من المتصفح. قم بتضمين عنوان URL للطلب ورمز الحالة ونص الاستجابة لكل منها.
فحص الجلسة المصادق عليها. احصل على جميع العناصر من localStorage وsessionStorage، وقم بإدراج أي رموز مصادقة أو بيانات مستخدم تم العثور عليها.
ابدأ تتبع الأداء، أعد تحميل الصفحة، ثم أوقف التتبع. ثم احصل على الرؤى المدعومة بالذكاء الاصطناعي حول اختناقات الأداء.
Mejores prácticas
- ابدأ Chrome مع التصحيح عن بُعد قبل الاتصال: google-chrome --remote-debugging-port=9222
- قم بتعيين متغير البيئة CHROME_DEVTOOLS_URL للإشارة إلى نسخة Chrome الخاصة بك
- استخدم الترقيم (page_size، page_idx) عند العمل مع أعداد كبيرة من رسائل وحدة التحكم أو طلبات الشبكة
- ادمج أدوات وحدة التحكم والشبكة لربط الأخطاء مع استدعاءات API الفاشلة
Evitar
- استخدام هذه المهارة للقطات الشاشة أو ملء النماذج (استخدم مهارة browser-discovery بدلاً من ذلك)
- محاولة الاتصال قبل بدء Chrome مع --remote-debugging-port=9222
- استدعاء الأدوات دون انتظار اكتمال تحميل الصفحة
- افتراض أن المهارة يمكنها تصحيح متصفحات غير Chrome
Preguntas frecuentes
كيف أبدأ Chrome للتصحيح؟
ما الفرق بين هذه ومهارة browser-discovery؟
هل يمكنني تصحيح نافذة التصفح المتخفي؟
كيف أفحص بيانات localStorage؟
هل يمكن لهذه المهارة تعديل محتوى الصفحة؟
هل يعمل هذا مع متصفحات أخرى؟
Detalles del desarrollador
Autor
ConsiliencyLicencia
MIT
Repositorio
https://github.com/Consiliency/treesitter-chunker/tree/main/.ai-dev-kit/skills/chrome-devtools-debuggingRef.
main
Estructura de archivos