يُستخدم عند إنشاء أو تصحيح أي شيء يتم تشغيله في المتصفح. استخدمه عندما تحتاج إلى فحص DOM، أو التقاط أخطاء وحدة التحكم، أو تحليل طلبات الشبكة، أو أداء الملف الشخصي، أو التحقق من الإخراج المرئي باستخدام بيانات وقت التشغيل الحقيقية عبر Chrome DevTools MCP.
ثبّت مهارة الذكاء الاصطناعي browser-testing-with-devtools بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: addyosmani/agent-skills.
Use Chrome DevTools MCP to give your agent eyes into the browser. This bridges the gap between static code analysis and live browser execution — the agent can see what the user sees, inspect the DOM, read console logs, analyze network requests, and capture performance data. Instead of guessing what's happening at runtime, verify it.
When NOT to use: Backend-only changes, CLI tools, or code that doesn't run in a browser.
| Tool | What It Does | When to Use |
يُستخدم عند إنشاء أو تصحيح أي شيء يتم تشغيله في المتصفح. استخدمه عندما تحتاج إلى فحص DOM، أو التقاط أخطاء وحدة التحكم، أو تحليل طلبات الشبكة، أو أداء الملف الشخصي، أو التحقق من الإخراج المرئي باستخدام بيانات وقت التشغيل الحقيقية عبر Chrome DevTools MCP. المصدر: addyosmani/agent-skills.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtoolsيُستخدم عند إنشاء أو تصحيح أي شيء يتم تشغيله في المتصفح. استخدمه عندما تحتاج إلى فحص DOM، أو التقاط أخطاء وحدة التحكم، أو تحليل طلبات الشبكة، أو أداء الملف الشخصي، أو التحقق من الإخراج المرئي باستخدام بيانات وقت التشغيل الحقيقية عبر Chrome DevTools MCP. المصدر: addyosmani/agent-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/addyosmani/agent-skills