چگونه هوش مصنوعی در حال تغییر اشکال زدایی با Google Gemini است

ek3nk4r 2025-05-29

0 2 خواندن این مطلب 8 دقیقه زمان میبرد

چگونه هوش مصنوعی در حال تغییر اشکال زدایی با Google Gemini است

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

نوشته شده توسط امانوئل جان✏

Chrome ویژگی های یکپارچه با هوش مصنوعی را برای بهبود تجربه اشکال زدایی در توسعه وب یکپارچه کرده است. این ویژگی ها از مدل Google Gemini AI استفاده می کنند تا به توسعه دهندگان در اشکال زدایی کد خود کمک کند بدون اینکه از محیط مرورگر خارج شوند.

Gemini بسیاری از ویژگی های مفید ، از جمله یک صفحه کمک هوش مصنوعی ، یک همراه رمزگذار هوشمند ، بینش کنسول را ارائه می دهد که توضیحات مربوط به AI را برای خطاهای کنسول و هشدارها به طور مستقیم در کنسول ارائه می دهد ، و یک ویژگی “Ask AI” که اکنون به منابع ، شبکه و پانل های عملکردی برای بینش های عمیق در مورد متریک عملکرد و درخواست های شبکه گسترش یافته است.

این مقاله با هدف بررسی این ویژگی ها با مثال های عملی ، نشان می دهد که چگونه توسعه دهندگان می توانند از آنها برای کارهایی مانند تجزیه و تحلیل عملکرد ، اشکال زدایی UI و پیشرفت های دسترسی استفاده کنند.

فهرست مطالب

پیش نیازهای

قبل از پیشروی با این آموزش ، باید داشته باشید:

دانش جاوا اسکریپت
ساخت برنامه های وب Frontend را تجربه کنید
آخرین مرورگر کروم
یک اتصال اینترنتی فعال

جمینی دستیار پانل

جمینی دستیار پانل پانل دستیار Gemini AI از گپ زدن با مدل Gemini AI مستقیماً در Chrome Devtools پشتیبانی می کند.

زمینه چت های شما با Gemini AI بر اساس کد منبع صفحه بازدید شده است. کمک های هوش مصنوعی برای حل چالش های یک ظاهر طراحی شده و DOM Tree ، پنل شبکه برای اشکال زدایی از شبکه ، پانل منابع برای اشکال زدایی و کاوش در کد منبع و پانل عملکرد برای اشکال زدایی در پانل های عنصر و سبک ها گسترش یافته است.

فعال کردن پانل دستیار هوش مصنوعی

برای دسترسی به پانل AI Assance ، باید آخرین نسخه مرورگر Chrome را بارگیری کنید. پس از نصب مرورگر خود ، موارد زیر را تضمین کنید:

با حساب Google خود وارد مرورگر Chrome شوید
فعال کردن انگلیسی (ایالات متحده) در تنظیمات زبان (تنظیمات > ترجیحات > ظاهر > زبان در DevTools)
همانطور که در تصویر فوق مشاهده می شود ، روی “پیوند AI در تنظیمات” کلیک کنید ، سپس فعال کنید کمک های هوش مصنوعی پرچم

سناریوی عملی و موارد استفاده

برنامه نسخه ی نمایشی React ما را با دو اشکال قابل توجه در نظر بگیرید ، حتی اگر آنها برنامه را بشکنند:

کارت ها هنگام پیمایش کاربر ، قسمت ورودی را همپوشانی می کنند
عملکرد جستجو همانطور که انتظار می رود کار نمی کند (وقتی کاربر وارد نام باشگاه در حروف کوچک می شود ، هیچ چیز نمایش داده نمی شود)

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

Place input field on top of the cards on scroll

پانل کمک هوش مصنوعی در Gemini AI Gemini AI پیشنهاد اضافه کردن z-index: 10 برای رفع این مشکل به قسمت ورودی. از آنجا که Tailwind CSS برای یک ظاهر طراحی شده استفاده می شود ، اضافه کنید z-10 به قسمت ورودی به شرح زیر:

<div className="fixed flex justify-center py-5 w-full">
  <input
    type="text"
    placeholder="Search for a team"
    value={searchTerm}
    onChange={(e) => setSearchTerm(e.target.value)}
    className="p-2 z-10 outline-none bg-transparent border border-[rgba(0, 255, 241, 0.4)] w-full md:w-[600px] text-gray-400 rounded"
  />
div>

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

با درک ما از زمینه انباشت CSS ، موقعیت والدین DIV ثابت می شود و باعث می شود که در پشت سایر مؤلفه ها بنشیند. بنابراین z-10 باید در مؤلفه والدین باشد تا آن را بالاتر از سایر مؤلفه ها قرار دهد:

<div className="fixed z-10 flex justify-center py-5 w-full">
  <input
    type="text"
    placeholder="Search for a team"
    value={searchTerm}
    onChange={(e) => setSearchTerm(e.target.value)}
    className="p-2 outline-none bg-transparent border border-[rgba(0, 255, 241, 0.4)] w-full md:w-[600px] text-gray-400 rounded"
  />
div>

برنامه را اجرا کنید و متوجه خواهید شد که اشکال برطرف شده است: اشکال برطرف شده با استفاده از Gemini AI برای اشکال عملکرد جستجو ، عنصر ورودی جستجو را انتخاب کرده و AI را با موارد زیر فرکانس کنید:

The search functionality implemented in React doesn't work as expected. (nothing is displayed when user enters a club name in lowercase )

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

const filterByName = (teams, searchTerm) => {
  return teams.filter((team) =>
    team.name.includes(searchTerm)
  );
};

در اینجا راه حل است:

const filterByName = (teams, searchTerm) => {
  return teams.filter((team) =>
    team.name.toLowerCase().includes(searchTerm.toLowerCase()));
};

با استفاده از این راه حل ، عملکرد جستجوی ما باید همانطور که انتظار می رود کار کند: عملکرد جستجو ثابت

بینش کنسول

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

سناریوی عملی و موارد استفاده

کنسول مرورگر برنامه React Demo را بررسی کنید و خطای زیر را مشاهده خواهید کرد:

index.jsx:72 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Cards`. See https://reactjs.org/link/warning-keys for more information.
    at div
    at Cards (http://localhost:3000/static/js/bundle.js:317:86)
    at App
Cards@index.jsx:72

روی پیام خطا شناور شوید ، و یک نماد لامپ را در بخش سمت راست پیام خطا مشاهده خواهید کرد. روی نماد لامپ کلیک کنید ، سپس روشن کنید بینش کنسول در تنظیمات برای دریافت کمک هوش مصنوعی برای درک و پرداختن به هشدارها و خطاهای کنسول: بینش کنسول AI جمینی اکنون ، Gemini AI خطا را توضیح می دهد و رفع خطا را پیشنهاد می کند: Gemina AI رفع اصلاحات را پیشنهاد کرد یک کلید منحصر به فرد را به مؤلفه کارت اضافه کنید و خطا برطرف می شود:

{filteredTeams.map((team) => (
  <div key={team.name} className="card relative flex justify-center items-center rounded-lg transition-all duration-150 h-[250px] sm:h-[200px] w-[250px] sm:w-[200px]">
    <div className="card-content flex flex-col justify-center items-center gap-[16px] sm:gap-[26px] bg-[#13161c] rounded-lg transition-all duration-250 h-[calc(100%-2px)] w-[calc(100%-2px)]">
      <img
        className="logo w-[40px] sm:w-[50px]"
        src={`${getImage(team.logo)}`}
        alt={team.name}
      />
      ....
    </div>
  </div>
))}

درخواست شبکه اشکال زدایی هوش مصنوعی

درخواست شبکه اشکال زدایی هوش مصنوعی به شما امکان می دهد با Gemini AI با زمینه بر اساس لیست درخواست شبکه انتخاب شده گپ بزنید. روی هر درخواست شبکه راست کلیک کرده و روی کلیک کنید از شما بپرسید گزینه ای برای دسترسی به درخواست شبکه اشکال زدایی هوش مصنوعی: اکنون می توانید بر اساس زمینه درخواست شبکه انتخاب شده با دستیار Gemini AI گپ بزنید. همچنین می توانید با انتخاب درخواست شبکه دیگر ، زمینه گپ را تغییر دهید.

برای دیدن داده های خام استفاده شده توسط Gemini AI برای پاسخ به گپ ما ، روی کلیک کنید تجزیه و تحلیل داده های شبکه کشویی: Gemini AI تجزیه و تحلیل داده های شبکه

سناریوی عملی و موارد استفاده

یک مورد استفاده عالی برای اشکال زدایی درخواست شبکه ، اشکال زدایی مشکلات شبکه مانند زمان بندی (سرور برای پاسخ دادن خیلی طولانی طول می کشد) ، مشکلات وضوح DNS (نمی توان میزبان را حل کرد) ، خطاهای SSL/TLS (گواهی نامعتبر یا مشکلات HTTPS) و محدود کردن یا محدود کردن نرخ (به عنوان مثال ، 429 درخواست های بیش از حد). سرعت بار اولیه برنامه نسخه ی نمایشی ما کند است – بیایید دریابیم که چرا. درخواست را انتخاب کنید tailwindcss.com و AI را با موارد زیر سوق دهید:

Why is this network request taking so long?

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

کد منبع AI دستیار

دستیار کد منبع AI به شما امکان می دهد با Gemini AI با زمینه بر اساس پرونده های انتخاب شده در پانل منبع گپ بزنید. با این کار ، می توانید یک مرور کلی درباره آنچه هر پرونده در وب سایت خود انجام می دهد ، داشته باشید. برای دسترسی به کد منبع AI دستیار:

حرکت به منبع پانل در Devtools Chrome
روی یک پرونده راست کلیک کنید
کلیک بر روی از شما بپرسید گزینه

دستیار هوش مصنوعی را وادار کنید تا در چارچوب پرونده انتخاب شده پاسخی دریافت کند.

AI برای تجزیه و تحلیل نمودار شعله

نمودار شعله در Chrome Devtools تجسم میزان زمان CPU شما از توابع شما را نشان می دهد. این به شما کمک می کند تا به سرعت تشخیص دهید که برنامه شما وقت زیادی را صرف عملیات همزمان می کند.

عملکرد AI AI Assistant مسائل مربوط به عملکرد را نشان می دهد و پیشنهاداتی را برای حل آنها بر اساس نمودار شعله و پروفایل های عملکرد ضبط شده ارائه می دهد. برای دسترسی به دستیار عملکرد هوش مصنوعی:

به Devtools Chrome بروید عمل تابلو
برای ضبط نمایه عملکرد ، روی نماد ضبط کلیک کنید
کلیک بر روی اصلی کشویی و راست روی موارد کلیک کرده ، سپس انتخاب کنید از شما بپرسید:

از ai chrome devtools بپرسید می توانید یک درخواست سفارشی وارد کنید یا پرونده های مثال را انتخاب کنید. اکنون AI را با موارد زیر سوق دهید:

Identify performance issues in this call tree

AI دستیار پرچم گذاری مسائل مربوط به عملکرد دستیار هوش مصنوعی درخت تماس را برای مسائل مربوط به عملکرد تجزیه و تحلیل می کند و پیشنهاداتی را برای حل آنها ارائه می دهد.

دستیار هوش مصنوعی مسائل مربوط به عملکرد را نشان می دهد و پیشنهاداتی را برای حل آنها بر اساس نمودار شعله و پروفایل های عملکرد ضبط شده ارائه می دهد. این می تواند به شناسایی مؤلفه ها و عملکردهای آهسته در برنامه های ما کمک کند.

رفع کنتراست رنگ

دستیار هوش مصنوعی همچنین می تواند کنتراست رنگ را برای برآورده کردن نیازهای دسترسی به WCAG AA/AAA تنظیم کند. به کنتراست رنگ ضعیف در این صفحه توجه کنید: نسخه ی نمایشی کنتراست رنگ ضعیف بیایید از دستیار هوش مصنوعی برای رفع این مشکل استفاده کنیم. ابتدا بخش یا عنصر را با کنتراست رنگ ضعیف بازرسی کنید.

روی نماد پالت رنگ کلیک کنید ، سپس منوی Contrast Ratio را باز کنید تا گزینه های AI-Sugeded را برای بهبود کنتراست مشاهده کنید: هوش مصنوعی گزینه هایی را برای بهبود کنتراست پیشنهاد داد برای رفع خودکار مسئله کنتراست ، روی کادر انتخاب در هر گزینه کلیک کنید.

پایان

اجرای اخیر Google از مدل Gemini AI ابزاری عالی برای اشکال زدایی است. در این راهنما ، ما با پانل AI Assance ، Color Contrast Fixer ، دستیار کد منبع AI ، دستیار کد منبع ، اشکال زدایی AI ، Console Insight و AI را برای تجزیه و تحلیل نمودار شعله ارائه دادیم.

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

در عرض چند دقیقه با ردیابی خطای مدرن Logrocket تنظیم شوید:

برای دریافت شناسه برنامه به https://logrocket.com/signup/ مراجعه کنید.
Logrocket را از طریق NPM یا برچسب اسکریپت نصب کنید. LogRocket.init() باید طرف مشتری خوانده شود ، نه سمت سرور.

NPM:

$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');

برچسب اسکریپت:

Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>