منتشر شده: ۲۳ سپتامبر ۲۰۲۵
ما امروز پیش‌نمایش عمومی سرور جدید Chrome DevTools Model Context Protocol (MCP) را راه‌اندازی می‌کنیم و قدرت Chrome DevTools را به دستیاران کدنویسی هوش مصنوعی می‌آوریم.
کدنویسان با یک مشکل اساسی روبرو هستند: آنها قادر به دیدن عملکرد واقعی کدی که تولید می‌کنند هنگام اجرا در مرورگر نیستند. آنها عملاً با چشم بسته برنامه‌نویسی می‌کنند.
سرور Chrome DevTools MCP این وضعیت را تغییر می‌دهد. دستیاران کدنویسی هوش مصنوعی می‌توانند صفحات وب را مستقیماً در کروم اشکال‌زدایی کنند و از قابلیت‌های اشکال‌زدایی DevTools و بینش‌های عملکرد بهره‌مند شوند. این امر دقت آنها را هنگام شناسایی و رفع مشکلات بهبود می‌بخشد.
خودتان ببینید چطور کار می‌کند:
پروتکل زمینه مدل (MCP) چیست؟
پروتکل زمینه مدل (MCP) یک استاندارد متن‌باز برای اتصال مدل‌های زبان بزرگ (LLM) به ابزارها و منابع داده خارجی است. سرور Chrome DevTools MCP قابلیت‌های اشکال‌زدایی را به عامل هوش مصنوعی شما اضافه می‌کند.
برای مثال، سرور Chrome DevTools MCP ابزاری به نام performance_start_trace ارائه می‌دهد. وقتی وظیفه بررسی عملکرد وب‌سایت شما به یک LLM محول می‌شود، او می‌تواند از این ابزار برای راه‌اندازی کروم، باز کردن وب‌سایت شما و ثبت ردیابی عملکرد از Chrome DevTools استفاده کند. سپس LLM می‌تواند ردیابی عملکرد را تجزیه و تحلیل کند تا بهبودهای بالقوه را پیشنهاد دهد. با استفاده از پروتکل MCP، سرور Chrome DevTools MCP می‌تواند قابلیت‌های اشکال‌زدایی جدیدی را به عامل کدنویسی شما ارائه دهد تا در ساخت وب‌سایت‌ها بهتر عمل کند.
اگر می‌خواهید درباره نحوه کار 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 مشکل خود را ثبت کنید.