DevTools یک پنل کمکی هوش مصنوعی ارائه میدهد که به شما کمک میکند وبسایت خود را درک کنید و با چت کردن با یک عامل هوش مصنوعی داخلی، مشکلات را برطرف کنید.
پنل دستیار هوش مصنوعی توسط Gemini پشتیبانی میشود و موارد زیر را انجام میدهد:
- متخصص در توسعه وب.
- میتواند به سوالات عمومی در مورد کل صفحه وب پاسخ دهد و همچنین بینشهای خاصی در مورد موضوعات مختلف، از جمله اما نه محدود به سبک، شبکه، عملکرد و موارد دیگر، ارائه دهد.
- به طور خودکار زمینههای خاصی را برای گفتگو انتخاب میکند، مانند عناصر DOM، درخواستهای شبکه، رویدادهای ردیابی عملکرد و موارد دیگر.
- میتواند اقدامات مستقلی مانند اجرای ممیزیها و ثبت ردیابی عملکرد را انجام دهد.
- یک راهنمای گام به گام از اقدامات و دلایل خود ارائه میدهد و به بخشهای مرتبط DevTools پیوند میدهد، بنابراین میتوانید با یک کلیک آنها را بررسی کنید.
- میتواند تغییرات کد را پیشنهاد دهد و با بینشهای خود، اعلانی برای اجرای عامل کدنویسی شما ایجاد کند.
با کمک هوش مصنوعی ، میتوانید استایلبندی، شبکهبندی، عملکرد، منابع وبسایت خود و موارد دیگر را اشکالزدایی کنید.
برای چت کردن موثر با Gemini در پنل دستیار هوش مصنوعی ، یاد بگیرید که چگونه پنل را باز کنید، درخواست دهید و جریان مکالمه را کنترل کنید.
پنل کمک هوش مصنوعی را باز کنید
پنل دستیار هوش مصنوعی به طور پیشفرض در کشو باز میشود.
برای باز کردن پنل، روی دکمهی دستیار هوش مصنوعی که در نقطهی ورود سراسری در سمت راست نوار ابزار اصلی در بالا قرار دارد، کلیک کنید.
از پنل ها
شما میتوانید پنل را با انتخاب زمینه مکالمه، مستقیماً از پنلهای Elements ، Network ، Sources یا Performance به دو روش باز کنید:
کلیک کنید
اشکالزدایی با دکمه هوش مصنوعی در کنار یک عنصر، درخواست شبکه، فایل منبع یا بینش عملکرد گسترده. 
روی یک عنصر، درخواست، فایل یا ورودی ردیابی کلیک راست کنید و یکی از گزینههای رایج اعلان را از منوی زمینه Debug with AI انتخاب کنید.
از منوی فرمان
برای باز کردن دستیار هوش مصنوعی از منوی فرمان، AI را تایپ کنید و سپس دستور Show AI assistance را اجرا کنید که در کنار آن نشان Drawer قرار دارد.
از منوی «ابزارهای بیشتر»
روش دیگر این است که در گوشه بالا سمت راست، را انتخاب کنید: گزینههای بیشتر > ابزارهای بیشتر > دستیار هوش مصنوعی .
ترغیب
هنگام شروع یک مکالمه جدید، دستیار هوش مصنوعی نمونههایی از سوالات را ارائه میدهد تا به شما در شروع سریع کمک کند.
برای پر کردن فیلد ورودی اطلاعات در پایین پنل، روی هر یک از اعلانها کلیک کنید.
روش دیگر، تایپ کردن سوال یا درخواست خودتان در فیلد ورودی است.
برای ارسال یک پیام، یا Enter فشار دهید یا روی فلش سمت راست فیلد ورودی کلیک کنید.
سوالات باز و بدون زمینه
با استفاده از کادر گفتگوی آزاد، میتوانید سوالات سطح بالاتر و بدون پیشزمینه قبلی بپرسید. برای مثال:
How to use DevTools to debug accessibility?دستیار هوش مصنوعی ابتدا یک ممیزی Lighthouse برای دسترسیپذیری انجام میدهد تا بتواند به درخواست شما بهتر پاسخ دهد.
What are the slowest network requests on this page?دستیار هوش مصنوعی فهرستی از درخواستهای مشکوک و لینکهایی به آنها را در پنل شبکه ارائه میدهد، بنابراین میتوانید با یک کلیک، یک درخواست را به عنوان متن مکالمه انتخاب کنید.
What performance issues exist on the page?دستیار هوش مصنوعی به طور خودکار ردپایی از عملکرد را با تنظیمات انتخابی شما ثبت میکند تا به این سوال پاسخ دهد.
سوالاتی مانند
How do I use the Animation panel?یاWhere is the high contrast setting in DevTools?مستقیماً در مورد خود DevTools به شما کمک میکنند.
به محض اینکه چت را شروع میکنید، دستیار هوش مصنوعی به طور هوشمندانه و بر اساس اقدامات شما در زمانی که چت خالی است، متن را بهروزرسانی میکند، ضمن اینکه به انتخابهای دستی شما هنگام انجام آنها احترام میگذارد.
دستورالعملها با زمینه
وقتی دستیار هوش مصنوعی را از یک پنل باز میکنید، زمینه مکالمه مربوطه در کادر گفتگو انتخاب میشود، بنابراین میتوانید بهطور خاص درباره آنچه انتخاب کردهاید گفتگو کنید.
در هر زمانی، میتوانید با انتخاب یک عنصر در Elements ، درخواست در Network ، ردیابی ورودی در Performance یا فایل در Sources ، زمینه را به صورت دستی تغییر دهید.
همچنین میتوانید بخشهایی از یک فایل را مثلاً از پنل منابع کپی کرده و در چت جایگذاری کنید تا بپرسید چه کاری انجام میدهد.
در مرحله بعد، درباره جریان مکالمه در دستیار هوش مصنوعی بیشتر بدانید.
جریان مکالمه
ارسال یک درخواست، مکالمه با عامل را آغاز میکند. برای دریافت اطلاعات مورد نیاز برای پاسخ به درخواست شما به بهترین شکل، عامل جاوا اسکریپتی را تولید و اجرا میکند که APIهای وب را فراخوانی میکند.
پیشرفت عامل به صورت مرحلهای نشان داده میشود. وضعیت مرحله اولیه « Investigating… است.
برچسب مرحله اولیه با انجام اقدامات خاصتر توسط عامل برای پاسخ به درخواست شما، بهروزرسانی میشود.
بسته به آنچه که در حال اشکالزدایی آن هستید، عامل ممکن است اقداماتی را در DevTools انجام دهد، مانند ثبت ردیابی عملکرد یا اجرای ممیزیهای Lighthouse.
راهنمای عامل
به محض اینکه عامل به درخواست شما پاسخ داد، برچسب مرحله اولیه به «نمایش مراحل کار با عامل» یا «نمایش تفکر» تغییر میکند، که میتوانید آن را گسترش دهید تا مراحل انجام شده توسط عامل برای تجزیه و تحلیل دادهها را در یک پنل کناری در سمت راست مشاهده کنید.
مراحل شامل موارد زیر است:
- قطعه کدهای قابل توسعه، عامل اجرا شده را به همراه دادههای برگشتی، قطعه میکنند. میتوانید کد را کپی کرده و در کنسول اجرا کنید.
- ویجتهایی که یافتهها را در قالبی خواناتر برای انسان ارائه میدهند.
ویجتها یک دکمهی «آشکارسازی» (Reveal) در گوشهی بالا سمت راست دارند که شما را به بخش مربوطه در DevTools میبرد.
دستورالعملهای پیگیری
وقتی کارشناس به پاسخ نهایی رسید، ممکن است سوالاتی برای پیگیری پیشنهاد دهد. برای ادامه مکالمه، روی هر کدام کلیک کنید.
یک اعلان برای عامل کدنویسی خود ایجاد کنید
برای ایجاد یک اعلان برای عامل کدنویسی خود ، روی «کپی به عامل کدنویسی» کلیک کنید.
این عامل یافتهها و بینشهای خود را خلاصه میکند و یک دستورالعمل عملی، به شکل کوچکشده یا در قالب Markdown قابل خواندن توسط انسان، ارائه میدهد که میتوانید آن را در کلیپبورد کپی کنید و با یک عامل هوش مصنوعی مورد نظر خود به کدنویسی ادامه دهید.
مکالمات متوقف شده
دستیار هوش مصنوعی ممکن است کدی با عوارض جانبی تولید کند. وقتی این اتفاق میافتد، مکالمه قبل از اجرای کد متوقف میشود.
وقتی مکالمه متوقف شد، کد پیشنهادی عامل را بررسی کنید. برای ادامه روی یا برای جلوگیری از اجرا روی Cancel کلیک کنید.
شما میتوانید تغییرات کد پیشنهادی را در پنل تغییرات بررسی کنید.
عامل تغییرات را درون DevTools اعمال میکند، اما میتوانید فضای کاری خود را طوری پیکربندی کنید که DevTools تغییرات را در منابع شما ذخیره کند.
تغییرات را در فضای کاری خود ذخیره کنید
با یک پوشه فضای کاری متصل ، میتوانید تغییرات سبک پیشنهادی توسط دستیار هوش مصنوعی را در فایلهای منبع CSS در رایانه خود ذخیره کنید.
برای انجام این کار:
ابتدا، یک فایل متادیتا ایجاد کنید و یک پوشه فضای کاری را به آن متصل کنید .
روش دیگر، میتوانید پوشه را به صورت دستی اضافه کنید .
از پنل Elements یک چت شروع کنید.
برای تغییر CSS خود، از هوش مصنوعی کمک بگیرید.
دستیار هوش مصنوعی ممکن است کدی تولید کند و اجرا را متوقف کند . کد را مرور کنید و برای آزمایش تغییرات به صورت زنده، روی ادامه کلیک کنید.
بخش تغییرات ذخیره نشده را باز کنید و روی اعمال به فضای کاری کلیک کنید.
تغییرات را در یک
diffمرور کنید و روی ذخیره همه کلیک کنید.
برای یادگیری این روش کار، به ادامه مطلب مراجعه کنید:
پاسخی داده نشد
ممکن است به دلایل مختلف، دستیار هوش مصنوعی پاسخی ارائه ندهد.
اگر فکر میکنید درخواست شما موضوعی است که دستیار هوش مصنوعی باید بتواند در مورد آن بحث کند، یک اشکال (bug) ثبت کنید .
تاریخچه مکالمه
به محض اینکه مکالمهای را شروع میکنید، هر پاسخ بعدی بر اساس تعاملات قبلی بین شما و هوش مصنوعی خواهد بود.
دستیار هوش مصنوعی، تاریخچه مکالمات شما را بین جلسات ذخیره میکند، بنابراین میتوانید حتی پس از DevTools یا بارگذاری مجدد کروم به چتهای قبلی خود دسترسی داشته باشید.
برای کنترل سابقه مکالمات خود از کنترلهای گوشه بالا سمت چپ پنل استفاده کنید.
شروع جدید
برای شروع یک مکالمه جدید با متن مکالمه انتخاب شده فعلی، روی دکمه کلیک کنید.
ادامه
برای ادامه دادن به یک مکالمهی قبلی، روی دکمهی کلیک کنید و آن را از منوی زمینه انتخاب کنید.
حذف
برای حذف یک مکالمه از تاریخچه، روی دکمه کلیک کنید.
پاسخها را ارزیابی کنید و بازخورد ارائه دهید
دستیار هوش مصنوعی یک ویژگی آزمایشی است. بنابراین ما به طور فعال به دنبال بازخورد شما هستیم تا بدانیم چگونه میتوانیم کیفیت پاسخ و تجربه کلی را بهبود بخشیم.
به پاسخها رأی دهید
با استفاده از دکمههای «پسندیدن» که در زیر پاسخ قرار دارند، به پاسخ امتیاز دهید.
گزارش پاسخها
برای گزارش محتوای نامناسب، روی دکمه در کنار دکمههای رأیگیری کلیک کنید.