اجازه دهید کدنویس شما، مرورگر شما را با Chrome DevTools MCP اشکال‌زدایی کند.

Sebastian Benz

Alex Rudenko

منتشر شده: ۱۱ دسامبر ۲۰۲۵

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

با این پیشرفت، عامل‌های کدنویسی قادرند:

1. استفاده مجدد از یک جلسه مرورگر موجود: تصور کنید که می‌خواهید عامل کدنویسی شما مشکلی را که پشت ورود به سیستم پنهان شده است، برطرف کند. عامل کدنویسی شما اکنون می‌تواند مستقیماً به جلسه مرور فعلی شما دسترسی پیدا کند و نیازی به ورود مجدد ندارد.
2. دسترسی به جلسات اشکال‌زدایی فعال: کدنویسان اکنون می‌توانند به یک جلسه اشکال‌زدایی فعال در رابط کاربری DevTools دسترسی داشته باشند. به عنوان مثال، وقتی یک درخواست شبکه ناموفق را در پنل شبکه Chrome DevTools کشف می‌کنید، درخواست را انتخاب کنید و از کدنویس خود بخواهید که آن را بررسی کند. همین امر با عناصر انتخاب شده در پنل Elements نیز کار می‌کند. ما از این قابلیت جدید برای انتقال یکپارچه بین اشکال‌زدایی دستی و اشکال‌زدایی با کمک هوش مصنوعی هیجان‌زده هستیم.

آن را در عمل ببینید:

ویژگی اتصال خودکار، علاوه بر روش‌های موجود برای اتصال Chrome DevTools MCP به یک نمونه کروم، اضافه شده است. توجه داشته باشید که همچنان می‌توانید:

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

چگونه کار می‌کند؟

ما یک ویژگی جدید به Chrome M145 (که در حال حاضر در Canary است) اضافه کرده‌ایم که به سرور Chrome DevTools MCP اجازه می‌دهد تا یک اتصال اشکال‌زدایی از راه دور درخواست کند. این جریان جدید بر اساس قابلیت‌های اشکال‌زدایی از راه دور موجود در Chrome ساخته شده است. به طور پیش‌فرض، اتصالات اشکال‌زدایی از راه دور در Chrome غیرفعال هستند. توسعه‌دهندگان باید ابتدا با رفتن به chrome://inspect#remote-debugging ، این ویژگی را به صراحت فعال کنند.

وقتی سرور Chrome DevTools MCP با گزینه --autoConnect پیکربندی می‌شود، سرور MCP به یک نمونه فعال Chrome متصل می‌شود و یک جلسه اشکال‌زدایی از راه دور درخواست می‌کند. برای جلوگیری از سوءاستفاده توسط عوامل مخرب، هر بار که سرور Chrome DevTools MCP درخواست یک جلسه اشکال‌زدایی از راه دور را می‌کند، Chrome یک کادر محاوره‌ای به کاربر نشان می‌دهد و از او اجازه می‌گیرد تا جلسه اشکال‌زدایی از راه دور را مجاز کند. علاوه بر این، در حالی که یک جلسه اشکال‌زدایی فعال است، Chrome بنر "Chrome توسط نرم‌افزار تست خودکار کنترل می‌شود" را در بالا نمایش می‌دهد.

شروع کنید

برای استفاده از قابلیت‌های جدید اشکال‌زدایی از راه دور، ابتدا باید اشکال‌زدایی از راه دور را در کروم فعال کنید و سپس سرور Chrome DevTools MCP را برای استفاده از ویژگی اتصال خودکار جدید پیکربندی کنید.

مرحله ۱: اشکال‌زدایی از راه دور را در کروم راه‌اندازی کنید

در کروم، برای تنظیم اشکال‌زدایی از راه دور، مراحل زیر را انجام دهید:

1. برای فعال کردن اشکال‌زدایی از راه دور، به chrome://inspect/#remote-debugging بروید.
2. برای مجاز یا غیرمجاز کردن اتصالات اشکال‌زدایی ورودی، رابط کاربری پنجره را دنبال کنید.

مرحله 2: پیکربندی سرور Chrome DevTools MCP برای اتصال خودکار به یک نمونه Chrome در حال اجرا

برای اتصال سرور chrome-devtools-mcp به نمونه در حال اجرا کروم، از آرگومان خط فرمان --autoConnect برای مجموعه سرور MCP استفاده کنید.

قطعه کد زیر نمونه‌ای از پیکربندی برای gemini-cli است:

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

مرحله ۳: تنظیمات خود را آزمایش کنید

حالا gemini-cli را باز کنید و دستور زیر را اجرا کنید:

Check the performance of https://developers.chrome.com

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

کلیک روی «مجاز» منجر به باز شدن سرور Chrome DevTools MCP به آدرس developers.chrome.com و ثبت عملکرد آن می‌شود.

برای دستورالعمل‌های کامل، فایل README را در GitHub بررسی کنید.

اجازه دهید کدنویس شما جلسه اشکال‌زدایی را به عهده بگیرد

امکان اتصال به یک نمونه زنده کروم به این معنی است که لازم نیست بین کنترل خودکار و دستی یکی را انتخاب کنید. می‌توانید خودتان از DevTools استفاده کنید یا یک کار اشکال‌زدایی را به عامل کدنویسی خود بسپارید. اگر مشکلی در وب‌سایت خود پیدا کردید، می‌توانید DevTools را باز کنید تا عنصری را که باعث ایجاد مشکل شده است، شناسایی کنید. اگر می‌خواهید عامل کدنویسی شما مشکل را برطرف کند، اکنون می‌توانید این کار را با Chrome DevTools MCP Server انجام دهید. می‌توانید عنصر را در پنل Elements انتخاب کنید و از عامل کدنویسی بخواهید که مشکل را بررسی کند.

همین امر برای پنل شبکه نیز صدق می‌کند. می‌توانید یک درخواست شبکه را انتخاب کنید و از کارشناس کدنویسی خود بخواهید که آن را بررسی کند.

اما این فقط قدم اول است. ما قصد داریم به تدریج داده‌های پنل بیشتری را از طریق سرور Chrome DevTools MCP در اختیار کدنویسان قرار دهیم. منتظر باشید!