نحوه استفاده از هوش مصنوعی برای کمک به توسعه در Google Chrome

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

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

AI Assistance را فعال کنید

ابتدا مطمئن شوید که مرورگر کروم شما به روز است و ویژگی های هوش مصنوعی فعال هستند. برای انجام این کار، Chrome DevTools را باز کنید و به آن بروید "تنظیمات" (تصویر زیر را ببینید).

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

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

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

با استفاده از AI Assistance

پس از فعال شدن، می توانید به تب AI Assistance در کنسول دسترسی داشته باشید (تصویر زیر را ببینید). در اینجا، می توانید مانند یک برنامه چت معمولی با AI Assistance تعامل داشته باشید.

از آنجایی که AI Assistance در مرورگر تعبیه شده است، زمینه جلسه مرور فعلی شما را درک می کند و به محتوای صفحه و APIهای مرورگر دسترسی مستقیم دارد. شما می توانید با پرسیدن یک سوال کلی مانند، در چه زمینه ای می توانید به من کمک کنید؟.

این می تواند به طیف گسترده ای از وظایف، مانند توضیح اینکه چرا یک عنصر قابل مشاهده نیست، عیب یابی مشکلات طرح بندی، و حتی پیشنهاد بهبود در CSS شما کمک کند!

بیایید آن را امتحان کنیم!

درک عناصر و سبک ها

قبل از اینکه AI Assistance بتواند یک عنصر را تجزیه و تحلیل کند، باید آن را انتخاب کنید. شما دو گزینه دارید:

• از انتخابگر عنصر استفاده کنید: این روش استاندارد برای انتخاب یک عنصر در Chrome DevTools است.
• روی عنصر موجود در درخت DOM کلیک راست کرده و "Ask AI" را انتخاب کنید.: این یک گزینه سریعتر برای هدف قرار دادن عناصر خاص است.

برای مثال، بیایید منوی کشویی را در نوار پیمایش در Hongkiat.com انتخاب کنیم و از هوش مصنوعی بپرسیم: چرا این عنصر قابل مشاهده نیست؟

AI Assistance باید مشکل را تشخیص دهد و پیشنهادات مفیدی برای حل آن ارائه دهد.

خطاها و هشدارهای اشکال زدایی

یکی از مفیدترین جنبه های AI Assistance قابلیت اشکال زدایی آن است. برای مثال، اگر متوجه هشدارهایی در کنسول شوید و کمک هوش مصنوعی فعال باشد، Chrome یک این هشدار را درک کنید دکمه کنار هر پیام هشدار

با کلیک بر روی این دکمه توضیحی درباره هشدار ایجاد می شود و راه هایی برای حل آن پیشنهاد می شود.

بهینه سازی صفحه

فراتر از HTML، CSS و اشکال زدایی، AI Assistance می تواند به بهینه سازی صفحات شما برای عملکرد و سئو کمک کند. به عنوان مثال، می توانید بپرسید، برای بهبود عملکرد بارگذاری این صفحه چه پیشنهادی دارید؟.

AI Assistance صفحه را تجزیه و تحلیل می کند و چندین پیشنهاد برای بهبود ارائه می دهد.

بسته بندی

کمک هوش مصنوعی در Chrome DevTools یک رویکرد کارآمد برای کارهای مختلف توسعه ارائه می کند، که راحتی و اتوماسیون را برای درک خطاها، مشکلات اشکال زدایی و بهینه سازی عملکرد صفحه ارائه می دهد.

این یک افزونه بسیار مفید برای توسعه دهندگان وب مبتدی است که بدون نیاز به جابجایی مداوم بین جستجوی Google، Stack Overflow و مرورگر، پاسخ های فوری به مشکلات رایج ارائه می دهد. توسعه دهندگان باتجربه ممکن است ویژگی های فعلی را کمتر ضروری بدانند، زیرا احتمالاً از قبل دارای مهارت های اشکال زدایی و بهینه سازی قوی هستند. با این حال، کمک هوش مصنوعی همچنان می تواند ابزار مفیدی باشد.

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