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

کمک هوش مصنوعی و بینش کنسول

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

نکات DevTools

مجموعه ویدیوهای ماهانه ما را که نحوه استفاده از DevTools برای حل مشکلات رایج توسعه وب را توضیح می دهد، کاوش کنید.
یاد بگیرید که چگونه یک ردیابی عملکرد را در DevTools ضبط کنید و آن را برای شناسایی و رفع مشکلات عملکرد تجزیه و تحلیل کنید.
مشکلات LCP را اشکال زدایی کنید و از داده های CrUX استفاده کنید تا ببینید آیا تجربه مشابهی را برای کاربران خود اشکال زدایی می کنید یا خیر
انواع مختلف کش مرورگر و نحوه بازرسی و مدیریت آنها را در ابزار توسعه کروم بررسی کنید!
تلاش برای بازرسی یک عنصر، و "poof" آن رفته است؟ مثل اینکه کد شما در حال بازی مخفی کاری با شماست!

بینش عملکرد را دریافت کنید

طیف گسترده‌ای از ابزارها برای اندازه‌گیری و بهینه‌سازی جنبه‌های مختلف عملکرد زمان اجرا به شما کمک می‌کنند: پنل عملکرد، Lighthouse و موارد دیگر.
درباره تمام ویژگی‌های پانل عملکرد بیاموزید: نحوه ثبت ردیابی عملکرد، نحوه مشاهده و تجزیه و تحلیل ردیابی و موارد دیگر.
پانل عملکرد به توسعه دهندگان کمک می کند تا عملکرد زمان اجرا خود را برای بخش بهتری از 15 سال اندازه گیری و بهینه کنند. بیاموزید که چگونه در حال تکامل است.
ردیابی ها را در جای خود حاشیه نویسی کنید و آنها را مستقیماً در فایل ردیابی برای اشتراک گذاری ساده ذخیره کنید.

اخبار و به روز رسانی

منابع را بررسی و ویرایش کنید

در مورد تمام ویژگی های پانل منابع بیاموزید: نحوه مشاهده و ویرایش فایل ها، اشکال زدایی جاوا اسکریپت، و راه اندازی یک فضای کاری.
شروع به کار
Workspace به شما امکان می دهد تغییراتی را که در DevTools ایجاد می کنید در کد منبع ذخیره شده در رایانه خود ذخیره کنید. نحوه راه اندازی یک فضای کاری در پروژه های خود را بیاموزید.
آموزش را بخوانید

تجزیه و تحلیل فعالیت شبکه

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

ابزار بیشتر

تمام ویژگی ها و قابلیت های دیگر در DevTools را کشف کنید.
نحوه مشاهده و تغییر DOM صفحه را بیاموزید.
نحوه مشاهده و تغییر CSS یک صفحه را بیاموزید.
ردیابی تغییرات به HTML، CSS و جاوا اسکریپت.
پیام ها را ثبت کنید و جاوا اسکریپت را اجرا کنید.
ارزیابی عملکرد وب سایت
مشکلات حافظه را که بر عملکرد صفحه تأثیر می گذارد، از جمله نشت حافظه و موارد دیگر پیدا کنید.
برنامه های وب را بازرسی، اصلاح و اشکال زدایی کنید، حافظه پنهان را آزمایش کنید، فضای ذخیره سازی را مشاهده کنید و موارد دیگر.
انیمیشن ها را بررسی و اصلاح کنید.
ضبط، پخش مجدد، اندازه گیری جریان کاربر، و ویرایش مراحل آنها.
مجموعه‌ای از گزینه‌ها را کشف کنید که بر رندر محتوای وب تأثیر می‌گذارند.
آدرس های ذخیره شده را بررسی و اشکال زدایی کنید.
مشکلات وب سایت خود را پیدا کرده و برطرف کنید.
اطمینان حاصل کنید که یک صفحه به طور کامل توسط HTTPS محافظت می شود.
مشاهده اطلاعات و اشکال زدایی پخش کننده های رسانه در هر برگه مرورگر.
شبیه سازی حسگرهای دستگاه
احراز هویت را شبیه سازی کنید.