کسبوکار و رشد
به AI اسکرینشات دادید تا frontend را درست کند. حدس زد. حالا لازم نیست.
- هوش مصنوعی
- OpenAI
- Codex
- توسعه وب
- دیباگ
ماهها این کل workflow بود. یک capture از UI خراب میفرستادید. agent یک patch پیشنهاد میداد—and امیدوار بودید با production واقعی جور دربیاید.
این رویکرد برای تنظیم layout کافی است. برای مشکلاتی که واقعاً بعدازظهرها را میبلعند ضعیف است: API کند در ترافیک شبکه، خطای console فقط بعد از login، باگ layout در styleهای اعمالشده—not در پیکسلهای اسکرینشات.
بهروزرسانی ژوئن ۲۰۲۶ Codex از OpenAI این خط را جابهجا میکند. **Developer mode** به Codex دسترسی کنترلشده به **Chrome DevTools Protocol (CDP)** در مرورگر درونبرنامهای Codex و با افزونه Chrome Codex در session معمولی Chrome میدهد. agent میتواند performance جاوااسکریپت را profile کند، خروجی console را بخواند، درخواستهای network را بررسی کند و وضعیت صفحه از جمله DOM و styleهای اعمالشده را ببیند.
Developer mode واقعاً چه چیزی باز میکند
CDP همان لایه تشخیصی است که توسعهدهندگان وب حرفهای در Chrome DevTools استفاده میکنند—for Codex وقتی ریشهیابی میخواهید، نه حدس از thumbnail.
- **خروجی console** — خطاهای runtime، هشدارها و logهایی که اسکرینشات نشان نداد
- **ترافیک network** — زمانبندی درخواست، header و payload پشت صفحات کند
- **عملکرد جاوااسکریپت** — profiling با گلوگاه واقعی، نه promptهای مبهم «سریعتر کن»
- **وضعیت صفحه** — ساختار DOM، styleهای اعمالشده و زمینه layout
- **تأیید** — fix را در صفحه زنده ببینید، نه فقط در کد تولیدشده
OpenAI این را روی یک chat app کند نشان داد: Codex تعاملات را profile کرد، network را بررسی کرد، fix داد و تغییر را با اندازهگیری پشتیبانی کرد. این workflow به مهندس frontend انسانی نزدیکتر و به «یک CSS دیگر امتحان کن» دورتر است.
کجا اجرا میشود: مرورگر درونبرنامهای در برابر Chrome
Codex دو نقطه ورود دارد و انتخاب مهم است:
- **`@Browser`** — مرورگر درونبرنامهای Codex؛ بهترین برای dev server محلی، preview فایل و صفحات عمومی بدون sign-in
- **`@Chrome`** — افزونه Chrome Codex؛ بهتر وقتی login state، extension یا context مرور واقعی لازم است
Developer mode را در **Settings → Browser → Enable full CDP access** فعال کنید. `@Browser` یا `@Chrome` را در task ذکر کنید. ادمین سازمان میتواند با `browser_use_full_cdp_access = false` در `requirements.toml` غیرفعال کند—قبل از برنامهریزی workflow تیمی بررسی کنید.
بخش امنیت جزئیات کوچک نیست
دسترسی کامل CDP بهدرستی elevated risk نامیده میشود. Codex میتواند بخشهای حساس مرورگر را ببیند: tabهای باز، cookie، local storage، ترافیک network، console و وضعیت زنده صفحه. برای دیباگ قوی و در profile اشتباه خطرناک.
OpenAI **تأیید صریح برای هر site** میخواهد قبل از استفاده Codex از CDP کامل روی یک وبسایت. site، task و دسترسی درخواستی را بخوانید قبل از approve.
قوانین عملی برای تیمهای وب از روز اول:
- **پروفایل Chrome یکبارمصرف** برای دیباگ agent—not مرورگر شخصی با رمز و tab بانکی
- فقط **origin در حال دیباگ** را تأیید کنید—not «همیشه همهچیز»
- **پنل admin production مشتری** را از مرورگر متصل به agent دور نگه دارید تا policy نباشد
- **مالک انسانی** برای هر fix که Codex بعد از CDP میدهد—همان انضباط هر تغییر کد AI
Developer mode مسئولیت را حذف نمیکند. به agent چشم بهتر میدهد. شما همچنان مالک merge هستید.
برای سایتهای marketing و frontend محصول چه تغییر میکند
آژانسها و تیم محصول که سایت مشتری را دیباگ میکنند شکاف را اول حس میکنند. فرم خراب، اسکریپت third-party که Core Web Vitals را کند میکند، hydration mismatch—بهندرت فقط در اسکرینشات دیده میشود.
Developer mode کار وب با AI را به سمت **fix مبتنی بر شواهد** میبرد: waterfall شبکه، console، profile تعامل، بعد تغییر کد. کندتر از codegen کور، سریعتر از سه دور «روی سیستم من کار میکند».
سطح **review** را هم بالا میبرد. وقتی Codex console و network میبیند، تیم باید auth، پرداخت و داده شخصی را دستی بررسی کند. تشخیص بهتر جای قضاوت انسان روی مسیرهای حساس را نمیگیرد.
چکلیست عملی برای اولین session
نیازی نیست یکشبه workflow را عوض کنید:
- Developer mode را یکبار در **پروفایل تست** فعال کنید
- یک **باگ محدود**—تعامل کند، فرم خراب، layout shift—not کل app
- با **`@Browser`** روی localhost شروع کنید قبل از `@Chrome` به staging با login
- در prompt تأیید **site + scope** را چک کنید قبل از CDP
- از Codex بخواهید **نشان دهد چه یافت**—به زبان console یا network، نه فقط patch کد
- بعد از fix **review و measure** (زمان بار، خطا رفت، درخواست کمتر)
دیباگ با اسکرینشات همیشه سقف بود. دسترسی CDP در است—عمدی بازشده، یک site در هر بار.
نتیجهٔ مخالف جریان
تیتر «AI جای Chrome DevTools را گرفت» نیست. تیتر: **AI بالاخره همان سیگنالهایی را میخواند که DevTools داشت**—با تأیید صریح و tradeoff امنیتی واقعی.
پروفایل یکبارمصرف. تأیید per site. مالک انسانی روی هر merge. نظر دوم میخواهید کجا دیباگ agent-assisted در workflow سایت marketing یا frontend محصول جا میگیرد—or نه؟ پیام بدهید.