التطوير والاختبار

Browser Testing with DevTools

بواسطة Addy Osmani 78k نجوم GitHub

استخدام Chrome DevTools للفحص المباشر وقت التشغيل — الشبكة والـ console والأداء وتصحيح الـ DOM أثناء الاختبار.

#devtools#debugging#browser#inspection

Claude Code Codex

نظرة عامة

السكيل ده بيشغّل Chrome DevTools للفحص المباشر وقت التشغيل أثناء التحقق من التطبيق — فحص نشاط الشبكة ومخرجات الـ console والأداء والـ DOM. ده لتصحيح اللي بيحصل فعلاً في الـ browser، مش بس قراءة الكود.

بتنفع في إيه

فحص طلبات الشبكة أثناء باج
قياس أداء وقت التشغيل
تصحيح أخطاء الـ console مباشرة
التحقق من حالة الـ DOM في الـ browser

التثبيت

التثبيت في Claude Code

# ضيف الـ marketplace وبعدين ثبّت المهارة في Claude Code:
/plugin marketplace add addyosmani/agent-skills
/plugin install browser-testing-with-devtools

# أو ثبّتها يدويًا في ~/.claude/skills:
git clone https://github.com/addyosmani/agent-skills.git
cp -r agent-skills/browser-testing-with-devtools ~/.claude/skills/browser-testing-with-devtools

التثبيت في Codex

# Codex بيقرأ مهارات SKILL.md من ~/.codex/skills (اكتشاف تلقائي):
git clone https://github.com/addyosmani/agent-skills.git
cp -r agent-skills/browser-testing-with-devtools ~/.codex/skills/browser-testing-with-devtools

# وبعدين استخدم المهارة في Codex — بتتحمّل وقت الحاجة.

زيارة المصدر (GitHub)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

التطوير والاختبار

MCP Builder

توجيه إنشاء سيرفرات Model Context Protocol لربط الـ APIs والأدوات بالـ AI agents.

Claude Code Codex

التطوير والاختبار

Superpowers

مكتبة سكيلز أساسية فيها +20 أداة وفلو مجرّبة وقابلة للتركيب لمهام تطوير الـ agent اليومية.

Claude Code Codex

التطوير والاختبار

Vercel React Best Practices

إرشادات أداء React وNext.js من Vercel Engineering — جلب البيانات وتحسين الـ bundle وأنماط الرندر.

Claude Code Codex