Chrome DevTools (MCP) برای عامل هوش مصنوعی شما

ماتیاس بیننس
مایکل هابلیچ

تاریخ انتشار: ۲۳ سپتامبر ۲۰۲۵

ما امروز یک پیش‌نمایش عمومی را برای سرور جدید پروتکل زمینه مدل DevTools Chrome (MCP) راه‌اندازی می‌کنیم و قدرت ابزارهای توسعه‌دهنده Chrome را به دستیاران کدنویسی هوش مصنوعی می‌آوریم.

عوامل کد نویسی با یک مشکل اساسی روبرو هستند: آنها نمی توانند ببینند کدی که تولید می کنند در هنگام اجرا در مرورگر چه کار می کند. آنها به طور موثر با چشم بند برنامه نویسی می کنند.

سرور Chrome DevTools MCP این را تغییر می دهد. دستیارهای کدنویسی هوش مصنوعی می توانند صفحات وب را مستقیماً در کروم اشکال زدایی کنند و از قابلیت های اشکال زدایی DevTools و بینش عملکرد بهره مند شوند. این دقت آنها را هنگام شناسایی و رفع مشکلات بهبود می بخشد.

خودتان ببینید چگونه کار می کند:

پروتکل بافت مدل (MCP) چیست؟

پروتکل بافت مدل (MCP) یک استاندارد منبع باز برای اتصال مدل های زبان بزرگ (LLM) به ابزارهای خارجی و منابع داده است. سرور Chrome DevTools MCP قابلیت های اشکال زدایی را به عامل هوش مصنوعی شما اضافه می کند.

برای مثال، سرور Chrome DevTools MCP ابزاری به نام performance_start_trace ارائه می‌کند. هنگامی که وظیفه بررسی عملکرد وب‌سایت شما، یک LLM می‌تواند از این ابزار برای راه‌اندازی Chrome، باز کردن وب‌سایت شما و استفاده از Chrome DevTools برای ثبت ردیابی عملکرد استفاده کند. سپس LLM می تواند ردیابی عملکرد را برای پیشنهاد بهبودهای بالقوه تجزیه و تحلیل کند. با استفاده از پروتکل MCP، سرور MCP DevTools Chrome می‌تواند قابلیت‌های اشکال‌زدایی جدیدی را به عامل کدنویسی شما بیاورد تا در ساخت وب‌سایت‌ها بهتر شود.

اگر می‌خواهید درباره نحوه عملکرد MCP اطلاعات بیشتری کسب کنید، مستندات MCP را بررسی کنید.

برای چه کاری می توانید از آن استفاده کنید؟

در زیر چند نمونه دستور وجود دارد که می توانید در دستیار هوش مصنوعی انتخابی خود مانند Gemini CLI امتحان کنید.

بررسی تغییرات کد در زمان واقعی

با عامل هوش مصنوعی خود یک اصلاح ایجاد کنید، و سپس به طور خودکار تأیید کنید که راه حل مطابق با Chrome DevTools MCP کار می کند.

اعلان امتحان کنید:

Verify in the browser that your change works as expected.

خطاهای شبکه و کنسول را تشخیص دهید

به نماینده خود قدرت دهید تا درخواست‌های شبکه را برای کشف مشکلات CORS تجزیه و تحلیل کند یا گزارش‌های کنسول را بررسی کند تا بفهمد چرا یک ویژگی طبق انتظار کار نمی‌کند.

اعلان امتحان کنید:

A few images on localhost:8080 are not loading. What's happening?

شبیه سازی رفتار کاربر

پیمایش کنید، فرم‌ها را پر کنید، و روی دکمه‌ها کلیک کنید تا باگ‌ها را بازتولید کنید و جریان‌های پیچیده کاربر را آزمایش کنید - همه در حین بررسی محیط اجرا.

اعلان امتحان کنید:

Why does submitting the form fail after entering an email address?

اشکال زدایی استایل و طرح‌بندی زنده

از عامل هوش مصنوعی خود بخواهید به یک صفحه زنده متصل شود، DOM و CSS را بررسی کند، و پیشنهادات ملموسی برای رفع مشکلات طرح‌بندی پیچیده مانند سرریز عناصر بر اساس داده‌های زنده از مرورگر دریافت کند.

اعلان امتحان کنید:

The page on localhost:8080 looks strange and off. Check what's happening there.

ممیزی عملکرد را خودکار کنید

به عامل هوش مصنوعی خود دستور دهید تا یک ردیابی عملکرد اجرا کند، نتایج را تجزیه و تحلیل کند، و مسائل عملکردی خاص مانند اعداد LCP بالا را بررسی کند.

اعلان امتحان کنید:

Localhost:8080 is loading slowly. Make it load faster.

برای فهرستی از تمام ابزارهای موجود، به مستندات مرجع ابزار ما مراجعه کنید.

شروع کنید

برای امتحان کردن این، ورودی پیکربندی زیر را به مشتری MCP خود اضافه کنید:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

برای بررسی اینکه آیا کار می کند، دستور زیر را در عامل کد نویسی خود اجرا کنید:

Please check the LCP of web.dev.

برای جزئیات بیشتر، مستندات Chrome DevTools MCP را در GitHub بررسی کنید.

درگیر شوید

ما در حال ساخت Chrome DevTools MCP هستیم و از نسخه پیش‌نمایش عمومی که امروز منتشر می‌کنیم شروع می‌کنیم. ما فعالانه به دنبال بازخورد شما و جامعه درباره قابلیت‌هایی هستیم که در مرحله بعد باید اضافه کنیم. خواه توسعه‌دهنده‌ای باشید که از دستیاران کدنویسی هوش مصنوعی استفاده می‌کند یا فروشنده‌ای که نسل بعدی ابزارهای توسعه هوش مصنوعی را می‌سازد، بینش شما بسیار ارزشمند خواهد بود و اگر چیزی کم است یا کار نمی‌کند، لطفاً در GitHub مشکلی را ثبت کنید.