Chrome DevTools مجموعه ای از ابزارهای توسعه دهنده وب است که مستقیماً در مرورگر Google Chrome ساخته شده است. DevTools می تواند به شما در ویرایش سریع صفحات و تشخیص سریع مشکلات کمک کند، که در نهایت به شما کمک می کند وب سایت های بهتر و سریعتر بسازید.
برای نمایش زنده جریان‌های کاری DevTools، از جمله اشکال‌زدایی CSS، نمونه‌سازی اولیه CSS، اشکال‌زدایی جاوا اسکریپت، و تجزیه و تحلیل عملکرد بار، ویدیو را مشاهده کنید.
DevTools را باز کنید
راه های زیادی برای باز کردن DevTools وجود دارد، زیرا کاربران مختلف خواهان دسترسی سریع به بخش های مختلف DevTools UI هستند.
- برای کار با DOM یا CSS، روی یک عنصر در صفحه کلیک راست کرده و Inspect را انتخاب کنید تا به پنل Elements بروید. یا Command + Option + C (Mac) یا Control + Shift + C (Windows، Linux، ChromeOS) را فشار دهید.
- برای دیدن پیام‌های ثبت‌شده یا اجرای جاوا اسکریپت، Command + Option + J (Mac) یا Control + Shift + J (Windows، Linux، ChromeOS) را فشار دهید تا مستقیماً به پانل کنسول بروید.
برای جزئیات بیشتر و گردش کار، به Open Chrome DevTools مراجعه کنید.
شروع کنید
اگر توسعه‌دهنده وب با تجربه‌تری هستید، در اینجا نکات شروع توصیه‌شده برای یادگیری اینکه چگونه DevTools می‌تواند بهره‌وری شما را بهبود بخشد، آمده است:
- DOM را مشاهده و تغییر دهید
- CSS را مشاهده و تغییر دهید
- اشکال زدایی جاوا اسکریپت
- پیام ها را مشاهده کنید و جاوا اسکریپت را در کنسول اجرا کنید
- بهینه سازی سرعت وب سایت
- فعالیت شبکه را بررسی کنید
DevTools را کشف کنید
رابط کاربری DevTools می تواند کمی طاقت فرسا باشد... برگه های زیادی وجود دارد! اما، اگر کمی وقت بگذارید تا با هر برگه آشنا شوید تا بفهمید چه چیزی ممکن است، ممکن است متوجه شوید که DevTools می تواند به طور جدی بهره وری شما را افزایش دهد.
حالت دستگاه
شبیه سازی دستگاه های تلفن همراه
پنل عناصر
DOM و CSS را مشاهده و تغییر دهید.
- با مشاهده و تغییر DOM شروع کنید
- با مشاهده و تغییر CSS شروع کنید
- CSS را ویرایش کنید
- DOM را ویرایش کنید
- CSS های نامعتبر، لغو، غیرفعال و سایر CSS ها را پیدا کنید
- بهبودهای بالقوه CSS را شناسایی کنید
- تم های روشن/تاریک، کنتراست و سایر ویژگی های رسانه CSS را شبیه سازی کنید
- CSS استفاده نشده را پیدا کنید
- انیمیشن ها را بررسی کنید
پنل کنسول
پیام ها را مشاهده کنید و جاوا اسکریپت را از کنسول اجرا کنید.
پنل منابع
جاوا اسکریپت را اشکال زدایی کنید، تغییرات ایجاد شده در DevTools را در بارگذاری مجدد صفحه ادامه دهید، قطعات جاوا اسکریپت را ذخیره و اجرا کنید، و تغییراتی را که در DevTools ایجاد می کنید در منابع محلی ذخیره کنید.
- با اشکال زدایی جاوا اسکریپت شروع کنید
- کد خود را با نقاط شکست مکث کنید
- فایل ها را در یک فضای کاری ویرایش و ذخیره کنید
- قطعات جاوا اسکریپت را اجرا کنید
- مرجع اشکال زدایی جاوا اسکریپت
- محتوای وب و هدرهای پاسخ HTTP را به صورت محلی لغو کنید
پنل شبکه
مشاهده و اشکال زدایی فعالیت شبکه
پنل ضبط
ضبط، پخش مجدد، و اندازه گیری جریان کاربر.
- ضبط، پخش مجدد، و اندازه گیری جریان کاربر
- ضبط کننده را با برنامه های افزودنی سفارشی کنید
- مرجع ویژگی های ضبط
پنل عملکرد
راه هایی برای بهبود عملکرد بارگذاری و زمان اجرا پیدا کنید.
پنل حافظه
مشکلات حافظه را که بر عملکرد صفحه تأثیر می گذارد، پیدا کنید و برطرف کنید، به عنوان مثال، نشت حافظه.
پنل برنامه
همه منابع بارگیری شده را بررسی کنید، از جمله پایگاه داده IndexedDB یا Web SQL، ذخیره‌سازی محلی و جلسه، کوکی‌ها، حافظه پنهان برنامه، تصاویر، فونت‌ها و شیوه نامه‌ها.
- اشکال زدایی برنامه های وب پیشرفته
- ذخیره سازی محلی را مشاهده و ویرایش کنید
- مشاهده، افزودن، ویرایش و حذف کوکی ها
- اطلاعات آزمایشی مبدأ را مشاهده کنید
پنل امنیتی
مشکلات محتوای مختلط، مشکلات گواهی و موارد دیگر را رفع اشکال کنید.
انجمن
گزارش های اشکال و درخواست های ویژگی را در Crbug که ردیاب اشکال تیم مهندسی است، ثبت کنید.
اگر می‌خواهید به ما در مورد یک اشکال یا درخواست ویژگی هشدار دهید، اما زمان زیادی ندارید، می‌توانید یک توییت به @ChromeDevTools ارسال کنید. ما مرتباً از اکانت اعلانات پاسخ و ارسال می کنیم.
برای کمک به استفاده از DevTools، Stack Overflow بهترین کانال است.
برای ثبت اشکالات یا درخواست های ویژگی در اسناد DevTools، یک مشکل GitHub را باز کنید.
DevTools همچنین یک کانال Slack دارد، اما تیم به طور مداوم آن را نظارت نمی کند.