آموزش استفاده از ابزارهای کمک برنامه نویسی در مرورگر Chrome

در این دوره آموزشی قدم به قدم با ابزارهای برنامه نویسی وب موجود در مرورگر کروم آشنا شده و همراه با مدرس دوره در پروژه های واقعی از آن ها استفاده خواهید کرد. 

عنوان اصلی : Learning Chrome Web Developer Tools

سرفصل ها :

معرفی
ساده کردن توسعه با Chrome DevTools
آنچه شما باید بدانید
تنظیم محیط خود
1. معرفی ابزارهای توسعه دهنده
دسترسی و استفاده از ابزارهای توسعه دهنده
سفارشی کردن نمایش ابزارهای توسعه دهنده
2. استفاده از Layout Tools
یک صفحه را در حالت دستگاه مشاهده کنید
طراحی ریسپانسیو را تست کنید
شبیه سازی رندر در دستگاه های دیگر
مدل سرعت اتصال
چالش: طرحی پاسخگو را نقد کنید
راه حل: یک طراحی واکنشگرا را نقد کنید
3. استفاده از پنل عناصر
عناصر را بررسی کنید
DOM را اصلاح کنید
بررسی سبک ها
اصلاح سبک ها
اسکرین شات بگیرید
چالش: عناصر و سبک ها را بررسی و اصلاح کنید
راه حل: عناصر و سبک ها را بررسی و اصلاح کنید
4. استفاده از پنل کنسول
مشاهده پیام ها در کنسول
اطلاعات را در کنسول بنویسید
از خط فرمان Console استفاده کنید
عناصر موجود در کنسول را بررسی کنید
چالش: کار با کنسول
راه حل: با کنسول کار کنید
5. استفاده از پنل Sources
فایل ها را در DevTools باز کنید
با نقاط شکست کار کنید
ویرایش فایل ها و ذخیره تغییرات
چالش: فایل های منبع را ویرایش کنید
راه حل: فایل های منبع را ویرایش کنید
6. استفاده از پنل شبکه
هدرهای درخواست و پاسخ HTTP را مشاهده کنید
مواردی را که بارگذاری صفحه را کند می کنند شناسایی کنید
اتصالات تلفن همراه را شبیه سازی کنید
چالش: عملکرد شبکه را بررسی کنید
راه حل: عملکرد شبکه را بررسی کنید
7. استفاده از پنل برنامه
ذخیره سازی را بررسی کنید
با کوکی ها کار کنید
چالش: ذخیره سازی محلی و کوکی ها را بررسی کنید
راه حل: ذخیره سازی محلی و کوکی ها را بررسی کنید
نتیجه
مراحل بعدی