خودکارسازی گردش‌های کار تکرارپذیر مرورگر با Chrome DevTools CLI

‫Chrome DevTools برای عامل‌ها شامل میانای خط فرمان (CLI) است که به عامل کدنویسی شما یا خودتان امکان می‌دهد ابزارهای DevTools را به‌عنوان فرمان‌های پوسته استاندارد اجرا کنید. به‌جای فراخوانی پویای ابزارها ازطریق سرور MCP، عامل شما همان کنش‌ها را به‌صورت فرمان‌های پوسته می‌نویسد و می‌تواند آن‌ها را به‌صورت زنجیره‌ای در یک اسکریپت قرار دهد که می‌توانید هرزمان خواستید آن را دوباره اجرا کنید. برای مثال، عامل شما ممکن است دستورگانی مانند این تولید کند:

chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"

هم سرور MCP و هم CLI به یک موتور متصل می‌شوند: یک دیمن پس‌زمینه دائمی که ازطریق «پروتکل Chrome DevTools» (CDP) با Chrome ارتباط برقرار می‌کند. تفاوت در نحوه دسترسی عامل شما به آن موتور است:

  • سرور MCP: عامل شما بااستفاده از JSON-RPC ازطریق ورودی/خروجی استاندارد متصل می‌شود و با هر ابزار مرورگر به‌عنوان یک فراخوانی تابع تعاملی رفتار می‌کند.
  • رابط خط فرمان: عامل شما فرمان‌های پوسته را مستقیماً در همان دیمن پس‌زمینه اجرا می‌کند.

می‌توانید از CLI برای انجام کارهای زیر استفاده کنید:

  • ذخیره کردن گردش کار: کنش‌هایی را که عاملتان درطول جلسه اشکال‌زدایی اکتشافی انجام داده است به دستورگان قابل‌استفاده مجدد تبدیل کنید.
  • بازتولید وضعیت برنامه: دستورگان را دوباره اجرا کنید تا مرورگر را قبل‌از اشکال‌زدایی مجدد به وضعیت شناخته‌شده‌ای برگردانید.
  • کنش‌های دسته‌ای: دنباله‌ای از فرمان‌های پیمایش، ورودی، شبیه‌سازی، و بازرسی را بدون نوبت مکالمه بین هر مرحله اجرا کنید.
  • اجرای دستورگان‌ها بدون عامل هوش مصنوعی: دستورگان‌های تولیدشده را از هر پایانه، زیرپوسته، یا محفظه CI که می‌تواند دستورگان‌های پوسته را اجرا کند، بدون نیاز به جلسه فعال LLM یا کارخواه MCP اجرا کنید.

انتخاب بین CLI و سرور MCP

انتخاب بین CLI و سرور MCP یک تصمیم مهندسی درباره هزینه، بافت، و گردش کار است.

  • هزینه پنجره بافتار: وقتی سرور MCP را ثبت می‌کنید، هر تعریف ابزار و طرح JSON در پیام‌واره سیستم LLM شما در هر مکالمه تزریق می‌شود. با مهارت CLI، عامل شما فقط یک خلاصه Markdown فشرده را بار می‌کند و هزینه توکن را زمانی پرداخت می‌کند که تصمیم می‌گیرد کل مهارت را بخواند و فرمان‌های موردنیاز خود را بسازد. برای جلسات طولانی و چندنوبتی نماینده، این تفاوت هم ازنظر هزینه و هم ازنظر تأخیر افزایش می‌یابد.
  • کاوش درمقابل اجرا: ابزارهای MCP در اشکال‌زدایی پویا و اکتشافی عالی هستند، زمانی که نه شما و نه عاملتان هنوز نمی‌دانید چه چیزی را باید بررسی کنید. چون عامل شما ازقبل درباره همه ابزارهای دردسترس می‌داند، احتمال بیشتری وجود دارد که از آن‌ها برای رسیدن به هدفش استفاده کند. وقتی مسیر ازقبل مشخص باشد، CLI به شما امکان می‌دهد فقط مراحل موردنیاز را اجرا کنید.
  • قابلیت استفاده مجدد: می‌توانید اسکریپت CLI را ذخیره کنید، از آن در یک مهارت استفاده مجدد کنید، یا آن را به‌صورت دستی خارج از حلقه عامل اجرا کنید. نمی‌توانید این کار را با فراخوانی‌های ابزار MCP انجام دهید.
از سرور MCP استفاده شود وقتی از CLI استفاده کنید وقتی
درحال بررسی مشکل ناشناخته‌ای هستید و به جعبه ابزار کامل نیاز دارید. ازقبل مراحل را می‌دانید و می‌خواهید آن‌ها را به‌طور قابل‌اعتماد تکرار کنید.
به حل مسئله پویا و زنده و درون‌نگری عمیق مرورگر نیاز دارید. مهارت‌های عامل با مصرف بهینه توکن یا خودکارسازی مبتنی بر پایانه می‌خواهید.
عامل شما در IDE یا کارخواهی با پشتیبانی MCP اجرا می‌شود. محیط شما از کارخواه‌های MCP پشتیبانی نمی‌کند.

هنگام استفاده از CLI، موارد زیر را درنظر داشته باشید:

  • پوشش ابزار: CLI از اکثر ابزارهای Chrome DevTools برای عامل‌ها برای خودکارسازی مبتنی بر پوسته پشتیبانی می‌کند. برای مشاهده فهرست کامل فرمان‌ها، به مرجع مهارت CLI مراجعه کنید.
  • راه‌اندازی ضمنی: سرور پس‌زمینه به‌طور خودکار در اولین استفاده راه‌اندازی می‌شود؛ نیازی نیست start، status، یا stop را قبل‌از هر فرمان اجرا کنید.
  • وضعیت پایدار: وضعیت مرورگر در بین فرمان‌ها پایدار می‌ماند، بنابراین صفحه‌ای که در یک فرمان باز می‌کنید، در فرمان بعدی نیز دردسترس است، مگر اینکه صریحاً بسته شود.
  • شناسه‌های صفحه و شناسه‌های منحصربه‌فرد عنصر: اکثر فرمان‌ها شناسه صفحه را به‌عنوان اولین شناسه خود می‌گیرند آرگومان. chrome-devtools list_pages را اجرا کنید تا آن را پیدا کنید، و chrome-devtools take_snapshot را اجرا کنید تا شناسه کاربری عناصری را که می‌خواهید با آن‌ها تعامل داشته باشید دریافت کنید.
  • قالب برونداد: برونداد به‌طور پیش‌فرض به‌صورت نوشتار ساده شبیه Markdown است. اگر می‌خواهید از نتایج در اسکریپت‌های دیگر یا خطوط لوله CI استفاده کنید، --output-format=json را ارسال کنید.
  • دسترسی به فایل: به‌طور پیش‌فرض، CLI دسترسی کامل به سیستم فایل برای پارامترهای ذخیره فایل و upload_file دارد. --allowUnrestrictedPaths=false را ارسال کنید تا دسترسی فایل به دایرکتوری موقت سیستم‌عامل محدود شود.
  • Lighthouse در CI: می‌توانید lighthouse_audit را از CLI اجرا کنید، اما Lighthouse CLI مستقل و GitHub Actions آن گزینه سبک‌تری هستند اگر فقط به امتیازهای Lighthouse در CI نیاز دارید.
  • انتزاع ساده‌تر نسبت‌به اسکریپت‌های خودکارسازی مرورگر: برخلاف نوشتن اسکریپت‌های کامل Puppeteer یا Playwright در JavaScript یا TypeScript،‏ DevTools CLI سطح میانای برنامه‌سازی کاربردی محدود و بسیار هدفمندی را ارائه می‌دهد. این نحو پوسته برای انسان‌ها آسان‌تر خوانده و نگهداری می‌شود و حتی برای مدل‌های سطح پایین نیز به‌طور قابل‌توجهی آسان‌تر است که بدون توهم به‌طور قابل‌اعتماد تولید شود.

پیش‌نیازها

قبل‌از استفاده از CLI، مطمئن شوید که موارد زیر را دارید:

  • Chrome DevTools برای عامل‌ها نصب شده است: راهنمای شروع به کار را دنبال کنید. افزونه‌ها و افزایه‌های مختص عامل (برای مثال، افزونه Gemini CLI) شامل مهارت‌های عامل‌محور در کنار سرور MCP هستند.
  • ‫CLI دردسترس در پوسته شما: نصب یک مرحله یک‌باره است و بخشی از گردش کار عادی عامل نیست. مرجع نصب را ببینید.
  • مهارت chrome-devtools-cli (نصب‌شده با Chrome DevTools برای عامل‌ها): این مهارت به عامل شما آموزش می‌دهد که چگونه اسکریپت‌های پوسته بنویسد یا فرمان‌های پوسته را با CLI اجرا کند.

ساختار فرمان

فرمان‌ها از الگوی chrome-devtools <tool> [arguments] [flags] پیروی می‌کنند. متغیرهای مستقل الزامی موقعیتی هستند و متغیرهای مستقل اختیاری از پرچم استفاده می‌کنند. برای جزئیات، از --help در هر فرمانی استفاده کنید.

برای مثال:

chrome-devtools new_page "https://example.com"      # Open a page
chrome-devtools list_pages                          # Find the page ID
chrome-devtools take_snapshot 1                     # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello"                # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"

موارد استفاده از Chrome DevTools CLI

به نماینده‌تان دستور دهید مراحلی را که قبلاً به‌عنوان یک اسکریپت تشخیص داده است ضبط کند، به‌جای اینکه همان جریان مرورگر را در هر جلسه دوباره حل کند.

ذخیره کردن جلسه اشکال‌زدایی به‌عنوان اسکریپت قابل‌استفاده مجدد

پس‌از یک جلسه اشکال‌زدایی اکتشافی ازطریق MCP، اغلب نمی‌توانید تضمین کنید که همان مشکل دوباره ظاهر نخواهد شد. به‌جای اینکه دفعه بعد مراحل بازتولید را دوباره توضیح دهید، از نماینده‌تان بخواهید جریانی را که به‌تازگی اجرا کرده است بنویسد.

پیام‌واره نمونه:

Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.

نمونه اجرای عامل: عامل شما مراحل پیمایش، ورودی، و بازرسی را که درطول جلسه انجام داده است مرور می‌کند و آن‌ها را به دنباله‌ای از فرمان‌های chrome-devtools ترجمه می‌کند، برای مثال new_page، take_snapshot، fill، click، و list_console_messages. این دستورات را به‌عنوان test.sh ذخیره می‌کند. دفعه بعد که این ناحیه را اشکال‌زدایی می‌کنید، می‌توانید عاملتان را به اسکریپت ارجاع دهید تا دوباره به همان وضعیت برسید، یا آن را خارج از حلقه عامل اجرا کنید تا به‌صورت دستی اشکال‌زدایی کنید.

بازتولید وضعیت برنامه قبل‌از بررسی

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

پیام‌واره نمونه:

Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.

نمونه اجرای نماینده: نماینده شما اسکریپت را اجرا می‌کند، که به صفحه تسویه‌حساب می‌رود، فرم نشانی را پر می‌کند، و گزینه ارسال را انتخاب می‌کند. چون وضعیت مرورگر در سراسر فرمان‌ها حفظ می‌شود، سپس نماینده شما از take_snapshot و evaluate_script در همان صفحه استفاده می‌کند تا وضعیت دکمه و گرداننده‌های رویداد متصل به انتخابگر پرداخت را بررسی کند.

بررسی‌های دیداری دسته‌ای در سراسر ناحیه‌های نمایش

درستی‌سنجی تغییر چیدمان در چندین اندازه صفحه‌نمایش تکراری است و معمولاً به‌صورت دستی انجام می‌شود. از نماینده‌تان بخواهید اسکریپتی ارائه دهد که تنظیمات شبیه‌سازی را اعمال کند و شواهد مربوط به هرکدام را در یک اجرا ضبط کند.

پیام‌واره نمونه:

Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.

نمونه اجرای نماینده: نماینده شما حلقه‌ای می‌نویسد که chrome-devtools emulate 1 --viewport "<size>" و سپس chrome-devtools take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" را برای هر نمای هدف فراخوانی می‌کند. می‌توانید پس‌از هر تغییر «سرویس مقایسه قیمت»، بدون باز کردن مکالمه، اسکریپت را دوباره اجرا کنید.

تست دود جریانی که هیچ کارخواه MCP دردسترس نیست

برخی محیط‌ها، مانند محفظه‌های CI یا تنظیمات سازمانی قفل‌شده، از کارخواه‌های MCP پشتیبانی نمی‌کنند. تقریباً هر پایانه، زیرپوسته، محفظه CI، و چارچوب عاملی از اجرای اسکریپت‌های پوسته استاندارد و خواندن خروجی استاندارد پشتیبانی می‌کند، که باعث می‌شود CLI برای بررسی‌های سبک در آن مکان‌ها مناسب باشد.

پیام‌واره نمونه:

Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.

نمونه اجرای عامل: عامل شما دستورگانی می‌نویسد که از new_page، take_snapshot، fill، و click استفاده می‌کند، سپس list_console_messages 1 --types error --output-format=json را فراخوانی می‌کند و برونداد JSON را تجزیه می‌کند تا درباره کد خروج تصمیم بگیرد.

بسته‌بندی کردن گردش کار به‌عنوان مهارت سبک

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

پیام‌واره نمونه:

Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.

نمونه اجرای نماینده: نماینده شما یک SKILL.md با نام، توضیح یک‌خطی درباره زمان اعمال مهارت، و دستورالعمل‌هایی که به متن ارجاع می‌دهند ایجاد می‌کند. در جلسه‌های بعدی، عامل فقط زمانی مهارت کامل را می‌خواند که تکلیف با شرح آن مطابقت داشته باشد.

مراحل بعدی

  • برای مشاهده فهرست کامل فرمان‌ها و پرچم‌های CLI، به مرجع مهارت CLI مراجعه کنید.
  • برای پیکربندی سرور زیرین (حالت بدون سر، کانال‌ها، دسته‌های آزمایشی)، پیکربندی را ببینید.