dev-tools-skill
تصحيح تطبيقات الويب باستخدام Chrome DevTools MCP
الأخطاء في الواجهة الأمامية صعبة التشخيص بدون الأدوات المناسبة. توفر هذه المهلة سير عمل موجه لتحديد وإصلاح مشكلات واجهة المستخدم، مشاكل الأداء، أخطاء الشبكة، وفشل وحدة التحكم باستخدام Chrome DevTools MCP.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“dev-tools-skill”。 زر تسجيل الدخول لا يعمل في صفحة الدفع
预期结果:
- 1. تُظهر اللقطة وجود زر تسجيل الدخول لكنه مغطى بطبقة علوية
- 2. تحتوي الطبقة العلوية على z-index: 9999 و pointer-events: none
- 3. الزر مرئي تقنياً لكنه غير قابل للنقر
- 4. الإصلاح: تعديل z-index للزر أو إزالة الطبقة العلوية الحاجبة
- 5. مستوى المخاطر: منخفض - تغيير CSS فقط، سهل التراجع
正在使用“dev-tools-skill”。 لوحة التحكم تستغرق 5 ثوان للتحميل
预期结果:
- 1. يُظهر تتبع الأداء LCP عند 4.8 ثانية
- 2. الاختناق الرئيسي: حزمة كبيرة (2.3 ميجابايت) تحجب الخيط الرئيسي
- 3. ثانوي: 3 صور يتجاوز حجمها 500 كيلوبايت لكل منها
- 4. التوصيات: تقسيم الحزمة، التحميل الكسول للصور، تأخير JS غير الحرج
正在使用“dev-tools-skill”。 فشل استدعاءات واجهة برمجة التطبيقات مع أخطاء CORS
预期结果:
- 1. تُظهر الشبكة 3 طلبات فاشلة لنقطة النهاية /api/data
- 2. جميع الإخفاقات تُظهر رأس 'Access-Control-Allow-Origin' مفقود
- 3. تُظهر وحدة التحكم: أخطاء 'Blocked by CORS policy'
- 4. الإصلاح مطلوب: إضافة رؤوس CORS لتكوين الخادم الخلفي
安全审计
安全Documentation-only skill containing markdown guidance for Chrome DevTools MCP. No executable code, scripts, network calls, or file system access. All static findings are false positives: YAML field names and JSON hash strings misidentified as cryptographic algorithms; markdown backticks for tool names misidentified as shell execution. This is pure documentation.
风险因素
⚙️ 外部命令 (50)
🌐 网络访问 (2)
质量评分
你能构建什么
تصحيح أخطاء التخطيط وواجهة المستخدم
حدد بسرعة لماذا تكون العناصر مخفية أو غير محاذية أو لا تستجيب للتفاعلات.
إصلاح أخطاء الشبكة وواجهة برمجة التطبيقات
شخص الطلبات الفاشلة، مشاكل CORS، ومشاكل تحميل البيانات في تطبيقات الويب.
تحليل أداء الصفحة
تتبع التحميلات البطيئة والرسوم المتحركة المتقطعة والمهام الطويلة لتقديم توصيات للتحسين.
试试这些提示
تخطيط الصفحة يبدو معطلاً. استخدم مهارة DevTools لأخذ لقطة، والعثور على العناصر المتأثرة، وتحديد السبب المحتمل.
هذه الصفحة بطيئة في التحميل. استخدم مهارة DevTools لتشغيل تتبع الأداء والعثور على الاختناقات الرئيسية.
البيانات لا يتم تحميلها بشكل صحيح. استخدم مهارة DevTools للتحقق من طلبات الشبكة ووحدة التحكم بحثاً عن أخطاء.
هناك خطأ JavaScript في هذه الصفحة. استخدم مهارة DevTools لقراءة الخطأ الكامل وتتبعه إلى المصدر.
最佳实践
- احصل دائماً على لقطة أولاً لالتقاط حالة DOM الحالية قبل إجراء تغييرات
- اقترح أصغر إصلاح ممكن أولاً والتحقق من صحته قبل محاولة تغييرات أكبر
- أكد الإجراءات المدمرة مثل إرسال النماذج مع المستخدم قبل المتابعة
避免
- تشغيل تتبع الأداء على صفحات الإنتاج أثناء ذروة الحركة
- إرسال نماذج أو إجراء استدعاءات واجهة برمجة التطبيقات بدون موافقة صريحة من المستخدم
- إجراء تغييرات إعادة هيكلة كبيرة بدلاً من إصلاحات موجهة صغيرة
常见问题
ما الأدوات التي تتطلبها هذه المهلة؟
هل يمكن لهذه المهلة إصلاح مشاكل واجهة برمجة التطبيقات الخلفية؟
هل تعدل هذه المهلة كودي؟
هل بياناتي آمنة عند استخدام هذه المهلة؟
لماذا تختلف اللقطات عن الصفحة المرئية؟
كيف يختلف هذا عن استخدام DevTools يدوياً؟
开发者详情
许可证
MIT
引用
main
文件结构