‏وقتی ایجنت کدنویس می‌تونه اپ Electron رو ببینه

این مقاله از Juri Strumpflohner یه مشکل اساسی موقع ساختن اپ‌های Electron با ایجنت‌های کدنویس هوش مصنوعی رو مطرح می‌کنه: ایجنت کد می‌نویسه، بیلد می‌گیره و شاید لاگ‌ها رو چک کنه، ولی هیچ‌وقت خود UI رندرشده رو نمی‌بینه. اگه پنجره خالی باشه یا چیدمان خراب شه، ایجنت اصلا خبردار نمی‌شه.

به گفته‌ی نویسنده، راه بستن این شکاف اینه که از ابزار agent-browser و پروتکل Chrome DevTools (که بهش CDP می‌گن) استفاده کنیم. نکته‌ی کلیدی اینه که هر اپ Electron روی Chromium ساخته شده، پس فلگ --remote-debugging-port رو به‌صورت توکار پشتیبانی می‌کنه. اپ رو با این فلگ بالا میاری، agent-browser رو وصل می‌کنی و حالا ایجنت می‌تونه اسکرین‌شات بگیره و DOM رو بازرسی کنه.

برای راه‌اندازی دو چیز لازمه: خود ابزار agent-browser که از طریق CDP با Chromium حرف می‌زنه، و یه اسکیل Electron برای Claude Code که به ایجنت یاد می‌ده چطور ازش استفاده کنه. بعد از نصب، وقتی از ایجنت بخوای با یه اپ Electron کار کنه، خودش به‌صورت خودکار ازش استفاده می‌کنه.

برای اجرا، با ابزار electron-vite باید فلگ دیباگ رو بعد از -- بدی تا به خود Electron فوروارد بشه. نویسنده پیشنهاد می‌کنه این فلگ رو مستقیم توی اسکریپت dev بذاری چون توی محیط توسعه هیچ ضرری نداره و کار رو ساده نگه می‌داره:

{
  "scripts": {
    "dev": "electron-vite dev --watch -- --remote-debugging-port=9333"
  }
}

به گفته‌ی نویسنده بهتره پورتی انتخاب کنی که آزاد باشه، چون پورت 9222 معمولا خود Chrome اشغالش کرده. بعد از این‌که اپ با CDP بالا اومد، با دستور agent-browser connect 9333 بهش وصل می‌شی و بعدش می‌تونی دقیقا مثل یه صفحه‌ی وب معمولی باهاش کار کنی: لیست پنجره‌ها رو بگیری، اسکرین‌شات بگیری یا با snapshot ساختار DOM رو ببینی.

ارزش اصلی اون‌جاست که این رو توی روند کدنویسی سیم‌کشی کنی. به گفته‌ی نویسنده، بعد از هر تغییر ایجنت می‌تونه اپ رو با CDP بالا بیاره، وصل شه، اسکرین‌شات بگیره و چون Claude چندوجهی (multimodal) هست خود تصویر رو بخونه، خروجی رو تایید کنه و اگه مشکلی بود رفعش کنه. توی مثال مقاله، اسکرین‌شات یه پنجره‌ی بدون قاب با تایتل‌بار سفارشی و پیام «tRPC IPC test: pong» رو نشون می‌ده که ثابت می‌کنه کل پشته از پراسس اصلی Electron تا پل preload و رندرر React درست کار می‌کنه.

نویسنده می‌گه بدون این تایید چشمی، ایجنت عملا داره کورکورانه کد می‌زنه؛ می‌تونه بفهمه بیلد موفق بوده و تست‌ها پاس شدن، ولی این‌ها بهش نمی‌گن که پنجره خالیه یا CSS خراب شده یا پل IPC بی‌صدا شکست خورده. با این حلقه‌ی بازخورد، اون چرخه‌ی چندمرحله‌ای «بیلد کن، بالا بیار، به صفحه زل بزن، گزارش بده» تبدیل به یه چیز کاملا خودکار می‌شه.

نکات کلیدی:

• چون هر اپ Electron روی Chromium سواره، فلگ --remote-debugging-port رو توکار داره و از طریق CDP بهش وصل می‌شی
• ابزار agent-browser به ایجنت اجازه می‌ده اسکرین‌شات بگیره و DOM رو بازرسی کنه
• چون مدل چندوجهیه، خود تصویر رو می‌خونه و خرابی رندر رو همون لحظه می‌گیره و رفع می‌کنه
• این روش روند «بیلد، اجرا، زل زدن به صفحه» رو به یه حلقه‌ی بازخورد کاملا خودکار تبدیل می‌کنه