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

اشکال‌زدایی با هوش مصنوعی

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

سرور Chrome DevTools MCP (Model Context Protocol) را به ابزار مورد نظر خود متصل کنید: Gemini CLI، Claude Code، Cline، Copilot و موارد دیگر.

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

نکات مربوط به ابزارهای توسعه‌دهندگان

مجموعه ویدیوهای ماهانه ما را که شما را با سناریوهای رایج اشکال‌زدایی در DevTools به شیوه‌ای سرگرم‌کننده آشنا می‌کند، تماشا کنید.
با پنل عملکرد به‌روزرسانی‌شده آشنا شوید و نحوه اندازه‌گیری عوامل حیاتی هسته وب (LCP، CLS، INP) و دریافت توصیه‌های متناسب با نیازتان از Gemini را بیاموزید.
با DevTools قایق‌رانی کنید و به یک دزد دریایی اشکال‌زدایی تبدیل شوید! تکنیک‌هایی را برای شبیه‌سازی سبک‌های تمرکز، آزمایش فرم‌ها با تکمیل خودکار و حل خطاهای backend با overrideهای شبکه کشف کنید.
قدرت اشکال‌زدایی با کمک هوش مصنوعی را با Chrome DevTools کشف کنید! دریابید که چگونه Console Insights، کمک هوش مصنوعی برای استایل‌بندی، عملکرد، شبکه و منابع می‌تواند گردش کار شما را فوق‌العاده بهبود بخشد.
تکنیک‌های پیشرفته پنل شبکه، از جمله نحوه یافتن گلوگاه‌های عملکرد، اشکال‌زدایی پنجره‌های بازشو، پیکربندی شرایط شبکه، استفاده از میانبرها برای تعیین آغازگرهای درخواست شبکه و موارد دیگر را بررسی کنید.

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

طیف گسترده‌ای از ابزارها برای اندازه‌گیری و بهینه‌سازی جنبه‌های مختلف عملکرد زمان اجرا به شما کمک می‌کنند: پنل عملکرد، Lighthouse و موارد دیگر.
درباره تمام ویژگی‌های پانل عملکرد بیاموزید: نحوه ثبت ردیابی عملکرد، نحوه مشاهده و تجزیه و تحلیل ردیابی و موارد دیگر.
با ویژگی‌های جدید DevTools مانند کالیبراسیون throttling CPU آشنا شوید تا به شما کمک کند تصمیمات اشکال‌زدایی عملکرد خود را بر اساس داده‌های دنیای واقعی قرار دهید.
در مورد بینش عملکرد جدید، قدرت Lighthouse به طور مستقیم در پانل DevTools Performance بیاموزید.

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

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

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

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

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

ابزار بیشتر

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