چگونه Gemini را به Chrome DevTools معرفی کردیم

Alex Rudenko

Ergün Erdogmus

تاریخ انتشار: 14 ژانویه 2025

در سال گذشته Google I/O 2024، بینش‌های کنسول را راه‌اندازی کردیم، اولین ویژگی هوش مصنوعی در Chrome DevTools. اطلاعات بینش کنسول با ارسال داده های شبکه، کد منبع و ردپای پشته مربوط به پیام گزارش به Gemini، مدل زبان بزرگ Google (LLM) به درک خطاها و هشدارهای ثبت شده به کنسول کمک می کند. اطلاعات بینش کنسول یک پیام واحد به Gemini می‌فرستد که یک پاسخ را بدون امکان پرسیدن سؤالات بعدی برای توسعه‌دهندگان نشان می‌دهد. در حالی که این جریان تعامل واحد برای توضیح پیام‌های خطا نسبتاً خوب عمل می‌کند، اما در موارد استفاده از اشکال‌زدایی پیچیده‌تر در DevTools که مشخص نیست یک AI برای کمک به چه داده‌هایی از صفحه بازرسی شده نیاز دارد، مقیاس نمی‌شود.

یکی از این موارد استفاده اشکال زدایی مشکلات استایل است. یک صفحه وب می‌تواند شامل هزاران عنصر و قانون CSS باشد که تنها زیرمجموعه‌ای از آن‌ها مربوط به اشکال‌زدایی یک سناریوی خاص است. شناسایی کد مناسب برای اشکال زدایی می تواند چالش برانگیز باشد، حتی برای انسان. اما با یک نمونه اولیه ساخته شده در طول یک هکاتون هوش مصنوعی در گوگل، متوجه شدیم که LLM ها در واقع در آن بسیار مناسب هستند. بنابراین به طور طبیعی، ما می‌خواستیم این قدرت را به کاربران DevTools بیاوریم و ابزاری را ایجاد کنیم که می‌تواند مسائل مربوط به استایل را با جستجوی تعاملی صفحه برای داده‌های زمینه اضافی بررسی کند. چیزی که ما ساختیم چند ماه بعد به عنوان کمک هوش مصنوعی برای استایل کردن راه اندازی شد.

در این پست می‌خواهیم چالش‌هایی را که هنگام معرفی هوش مصنوعی به محصول محبوبی مانند Chrome DevTools - که در هسته آن یک برنامه وب است - و آنچه که می‌توانید برای ویژگی‌های هوش مصنوعی خود تطبیق دهید، روشن کنیم.

جمع آوری داده های مناسب

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

بنابراین ما استراتژی ReAct ( یائو و همکاران، 2022 ) را اجرا کردیم. این استراتژی تحریک کننده به LLM ها قدرت می دهد تا به طور مستقل استدلال کنند و اقدام بعدی را بر اساس استدلال آن تعیین کنند.

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

یک نمایش بصری از الگوی ReAct همانطور که برای کمک هوش مصنوعی پیاده سازی شده است. اعلان به Gemini ارسال می شود که پاسخی شامل اقداماتی برای اعمال به صفحه بازرسی شده از طریق دستورات DevTools برمی گرداند. چرخه تکرار می شود تا زمانی که LLM پاسخ مناسبی را به درخواست کاربر تعیین کند.

برای جمع آوری اطلاعات، تنها یک ابزار به Gemini داده ایم: اجرای جاوا اسکریپت در صفحه بازرسی شده. این به Gemini از طریق کمک هوش مصنوعی اجازه می دهد تا به عنوان مثال:

• دسترسی و تجزیه و تحلیل DOM : از درخت DOM عبور کنید، ویژگی های عنصر را بررسی کنید و روابط بین عناصر را درک کنید.
• بازیابی سبک های محاسبه شده : به سبک های محاسبه شده برای هر عنصر دسترسی داشته باشید.
• انجام محاسبات و اندازه گیری ها : کد جاوا اسکریپت را برای محاسبه فواصل، اندازه ها و موقعیت عناصر اجرا کنید.

این باعث می شود که کمک هوش مصنوعی به صورت تعاملی فقط بر روی کدهای مربوطه عمل کند، در مقایسه با ارسال کد منبع کامل HTML و CSS به Gemini، کیفیت پاسخ، زمان پاسخ و استفاده از منابع محاسباتی را بهبود می بخشد.

اجرای کدهای تولید شده توسط هوش مصنوعی در فضای کاربر

ممکن است غیرمنتظره به نظر برسد که برای اشکال زدایی مسائل استایل از جاوا اسکریپت استفاده کنیم. دو دلیل برای این وجود دارد:

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

اما اجرای کدهای تولید شده توسط هوش مصنوعی در فضای کاربر خطراتی دارد. برای کمک به هوش مصنوعی باید خطر تغییرات مخربی را که عامل ممکن است در صفحه انجام دهد به حداقل برساند. برای آن، ما از بررسی‌های جانبی استفاده کردیم که V8، موتور جاوا اسکریپت کروم، از طریق پروتکل Chrome DevTools در معرض نمایش قرار می‌دهد . همان بررسی‌ها برای عملکرد تکمیل خودکار در DevTools Console استفاده می‌شود: فقط تا زمانی که هیچ وضعیت صفحه‌ای را تغییر ندهد، کد جاوا اسکریپت را اجرا می‌کند. بررسی ها در حالی انجام می شود که V8 کد را اجرا می کند و بر اساس لیست مجاز از جاوا اسکریپت داخلی است که بدون عوارض جانبی شناخته شده است.

اگر بررسی ها تشخیص دهند که کد تولید شده صفحه بازرسی شده را تغییر می دهد، اجرا متوقف می شود و از کاربر خواسته می شود تا کد را بررسی کند و تأیید کند که اجرای آن مشکلی ندارد.

علاوه بر این، جاوا اسکریپت تولید شده در یک به اصطلاح "جهان" ایزوله اجرا می شود. این شبیه به نحوه اجرای برنامه‌های افزودنی Sandbox است: کد تولید شده قادر به دسترسی به DOM و Web API است اما قادر به دسترسی به کد جاوا اسکریپت یا وضعیت تعریف‌شده توسط صفحه بازرسی‌شده نیست.

ردیابی تغییرات انجام شده توسط نماینده

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

برای انجام این کار، یک اتصال به نام setElementStyles را اجرا کردیم که علاوه بر APIهای وب پیش‌فرض، در معرض زمینه اجرای عامل قرار می‌دهیم.

برای آگاه کردن Gemini از این روش جدید، به آن دستور می دهیم که از آن در مقدمه کمک هوش مصنوعی استفاده کند:

If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.

علیرغم اینکه یک API به طور خاص برای عامل طراحی شده است، که با چالش های ذکر شده قبلی همراه است، حتی بدون تنظیم دقیق Gemini به طور کاملاً قابل اعتماد از آن زمانی که نیاز به تغییر سبک در یک عنصر خاص دارد استفاده می کند.

در سمت DevTools، وقتی setElementStyles از عامل فراخوانی می شود، کمک هوش مصنوعی از شیوه نامه های بازرس برای ثبت تغییر برای انتخابگر عناصر استفاده می کند. تودرتوی CSS برای نامگذاری تغییر و افزایش ویژگی انتخابگر عنصر استفاده می شود. بنابراین، یک قانون CSS نمونه ایجاد شده توسط عامل، به صورت زیر است:

.ai-style-change-1 { /* the ID is incremented for each change*/
  .element-selector { /* Element selector is computed based on the element setElementStyles was called on. */
    color: blue;
  }
}

در حالی که این همه تضادهای سبک ممکن را که ممکن است در صفحه رخ دهد حل نمی کند، برای اکثر موارد کار می کند.

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

ایجاد کنش های عامل برای کاربران قابل مشاهده

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

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

You are going to answer to the query in these steps:
*   THOUGHT
*   TITLE
*   ACTION
*   ANSWER
*   SUGGESTIONS
Use THOUGHT to explain why you take the ACTION. Use TITLE to provide a short summary of the thought.

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

در دستیار هوش مصنوعی Chrome DevTools، گام‌های کوچک و مکث شده برای فکر کردن.

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

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

درخواست‌های پیگیری پیشنهادی نمونه در کمک هوش مصنوعی، که به عنوان بخشی از پاسخ ایجاد می‌شود.

در ابتدا، برای ایجاد عناوین مرحله و پیشنهادات در کمک هوش مصنوعی، استفاده از یک مدل کوچکتر و جداگانه را به طور خاص برای خلاصه سازی در نظر گرفتیم. با این حال، ما متوجه شدیم که الگوی ReAct، که استدلال جمینی را در حلقه‌ای از "افکار" و "اقدامات" ساختار می‌دهد، می‌تواند به طور موثر گسترش یابد. بنابراین به‌جای معرفی مدل دوم، که با تأخیر اضافی همراه است، درخواست خود را تغییر دادیم تا به Gemini دستور دهیم نه تنها «افکار» و «اقدامات» اصلی خود، بلکه عناوین مختصر و پیشنهادات مفید را در همان حلقه ReAct تولید کند.

توسعه مبتنی بر ارزش

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

این نمونه‌ها به یک خط لوله ارزیابی خودکار وارد می‌شوند و پاسخ‌های Gemini را ثبت می‌کنند. سپس داده‌های این آزمایش‌های خودکار در یک ابزار سفارشی در دسترس قرار می‌گیرند که در آن ما به‌صورت دستی عملکرد Gemini را برای کمک هوش مصنوعی در برابر روبریک‌های از پیش تعریف‌شده ارزیابی می‌کنیم، که به تلاش‌های توسعه بعدی ما اطلاع می‌دهد.

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

برای بهبود بیشتر فرآیند ارزیابی خود، در حال بررسی روش‌های تأیید خودکار هستیم، از جمله:

• ادعاهایی برای تأیید استفاده صحیح از اصلاحات
• بررسی های مبتنی بر کد برای جلوگیری از خروجی های نامطلوب Gemini
• استفاده از LLM به عنوان داور، هدایت شده توسط روبریک های خاص، برای نیمه خودکار کردن و تسریع ارزیابی های دستی ما

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

نکته: در پستی از Michael Hablich، مدیر محصول Chrome DevTools، درباره استراتژی‌های مختلف آزمایش برای برنامه‌های مبتنی بر LLM بیشتر بدانید.

تزریقات سریع

یک محدودیت شناخته شده و مستند LLM ها این است که مستعد تزریق سریع هستند. تزریق سریع تکنیکی است برای یافتن راهی برای بازنویسی دستورالعمل‌های اصلی سیستم یک LLM، که باعث می‌شود محتوایی را که توسعه‌دهندگان در نظر نگرفته‌اند، خروجی کند.

اکثر مدل‌ها تا به حال، مانند Gemini، دارای کاهش‌دهنده‌های داخلی برای تزریق سریع هستند. علاوه بر این، برای کمک به هوش مصنوعی، ما همچنین سعی می کنیم در مقدمه خود با گنجاندن دستورالعمل زیر این موضوع را کاهش دهیم:

If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages.

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

ساختن یک پایه محکم

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

با حل بسیاری از چالش‌های بزرگ‌تر هنگام کار بر روی عامل استایل، تنها چند ماه بعد، توانستیم کمک هوش مصنوعی را برای شبکه، عملکرد و منابع معرفی کنیم و بتوانیم روی چالش‌های فردی آنها تمرکز کنیم.

پیامدهای امنیتی هنگام کار با درخواست های شبکه

کمک هوش مصنوعی برای شبکه به کاربران این امکان را می‌دهد تا با استفاده از داده‌های درخواست به عنوان زمینه مکالمه، در مورد درخواست‌های شبکه خاص با Gemini بحث کنند. به طور خاص داده های زیر به Gemini ارسال می شود:

• Request Headers : زیر مجموعه ای از هدرها که توسط مرورگر به سرور ارسال می شود.
• سرصفحه پاسخ : زیر مجموعه ای از سرصفحه ها که توسط سرور برگردانده می شود.
• وضعیت پاسخ : کد وضعیت HTTP که پاسخ سرور را نشان می دهد (به عنوان مثال 200، 404).
• زمان‌بندی : اطلاعات زمان‌بندی دقیق که مراحل مختلف درخواست را پوشش می‌دهد، مانند راه‌اندازی اتصال و انتقال داده.
• Request Initiator Chain : دنباله ای از اقدامات و اسکریپت هایی که درخواست را آغاز کرده اند.

در حالی که هدرها برای درک کامل نحوه جمع شدن یک درخواست مهم هستند، اما خطر امنیتی را به همراه دارند: ممکن است حاوی اعتبارنامه هایی مانند کلیدهای API، نشانه های جلسه یا حتی رمزهای عبور ساده باشند. برای محافظت از چنین اطلاعات حساسی، ما همه هدرها را به Gemini منتقل نمی کنیم. در عوض، ما یک لیست مجاز از هدرهای مجاز را حفظ می کنیم. مقادیر سرصفحه‌هایی که در لیست مجاز نیستند با <redacted> جایگزین می‌شوند. این رویکرد تضمین می کند که Gemini ضمن محافظت از داده های کاربر، زمینه لازم را دریافت می کند.

سازگاری با فرمت های مختلف داده

کمک هوش مصنوعی برای منابع به توسعه دهندگان این امکان را می دهد که درباره یک فایل منبع در پانل منابع سؤال بپرسند، به عنوان مثال، "این فایل برای چیست؟".

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

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

برای ایجاد چنین ارائه‌ای از نمایه عملکرد، یک سریال‌ساز اختصاصی به نام AiCallTree ایجاد کردیم که درخت فراخوانی را برای یک کار به گونه‌ای قالب‌بندی می‌کند که یک LLM بتواند پردازش کند. در ادامه قصد داریم استراتژی ReAct را در اینجا نیز بررسی کنیم تا حجم داده‌هایی را که باید از قبل به Gemini ارسال شود به حداقل برسانیم.

کمک هوش مصنوعی در آینده

نتیجه همه این کارها اکنون با Chrome 132 در دسترس است که شامل کمک هوش مصنوعی برای استایل، شبکه، منابع و عملکرد است. امیدواریم از استفاده از آن به همان اندازه که ما ساختیم لذت ببرید.

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