دوره آموزشی ابزارهای توسعه دهنده مرورگر کروم
2 ساعت 23 دقیقهمتوسط2020-04-14
مدرسین

Sasha Vodnik
Principal Technical Course Developer at DocuSign
جزئیات دوره
همه مرورگرهای اصلی ابزاری را برای بررسی کد یک صفحه وب یا برنامه و ارزیابی عملکرد آن ارائه می دهند. کروم Developer Tools (DevTools) استاندارد صنعت است. در این دوره، می توانید نحوه کار Chrome DevTools در سناریوهای واقعی آزمایش و رفع اشکال و نحوه افزودن این مجموعه مفید از برنامه های کاربردی را به گردش کار توسعه خود بیابید. هر فصل به ابزاری متفاوت از جمله پانل های کنسول، عناصر، شبکه و برنامه می پردازد. مربی ساشا وودنیک به شما کمک می کند صفحات وب و برنامه ها را در حالت های مختلف دستگاه و شبیه ساز آزمایش کنید، DOM را بررسی کنید، HTML و CSS را بازرسی و اصلاح کنید، فایل های منبع را ویرایش کنید، گلوگاه های موجود در بارهای صفحه را شناسایی کنید، به کوکی ها دسترسی پیدا کرده و آنها را دستکاری کنید. به علاوه، ترفندها و میانبرهای مفیدی را برای سرعت بخشیدن به کارهای معمول رفع اشکال یاد بگیرید.
موضوعات شامل:
- تنظیم محیط آزمایش و رفع اشکال خود
- سفارشی سازی نمایش ابزارهای توسعه دهنده کروم
- شبیه سازی صفحات وب و برنامه ها در دستگاه های مختلف
- تقلید از ارائه
- بازرسی عناصر و سبک ها
- خواندن و نوشتن در کنسول
- باز کردن و ویرایش پرونده ها در پانل منابع
- استفاده از پانل شبکه
- شناسایی کدی که بارگذاری صفحه را کند می کند
- بررسی فضای ذخیره سازی و داده ها با پانل برنامه
موضوعات شامل:
- تنظیم محیط آزمایش و رفع اشکال خود
- سفارشی سازی نمایش ابزارهای توسعه دهنده کروم
- شبیه سازی صفحات وب و برنامه ها در دستگاه های مختلف
- تقلید از ارائه
- بازرسی عناصر و سبک ها
- خواندن و نوشتن در کنسول
- باز کردن و ویرایش پرونده ها در پانل منابع
- استفاده از پانل شبکه
- شناسایی کدی که بارگذاری صفحه را کند می کند
- بررسی فضای ذخیره سازی و داده ها با پانل برنامه
مهارت ها
ChromeWeb Development ToolsGoogleLearningWeb Development
سرفصل ها
مقدمه
- ساده سازی توسعه با Chrome DevTools
- آنچه باید بدانید
- تنظیم محیط خود
معرفی ابزارهای توسعه دهنده
- دسترسی و استفاده از ابزارهای توسعه دهنده
- سفارشی سازی نمایش ابزارهای توسعه دهنده
استفاده از Layout Tools
- یک صفحه را در حالت دستگاه مشاهده کنید
- طراحی واکنشگرا را تست کنید
- شبیه سازی رندر در دستگاههای دیگر
- مدل سرعت اتصال
- چالش - طرحی پاسخگو را نقد کنید
- راه حل - نقد یک طرح پاسخگو
با استفاده از پنل عناصر
- عناصر را بازرسی کنید
- DOM را اصلاح کنید
- سبکها را بررسی کنید
- سبکها را اصلاح کنید
- یک اسکرین شات بگیرید
- چالش - عناصر و سبکها را بررسی و اصلاح کنید
- راه حل - عناصر و سبکها را بازرسی و اصلاح کنید
استفاده از پنل کنسول
- پیامها را در کنسول مشاهده کنید
- اطلاعات را در کنسول بنویسید
- از خط فرمان Console استفاده کنید
- عناصر موجود در کنسول را بررسی کنید
- چالش - کار با کنسول
- راه حل - کار با کنسول
استفاده از پنل Sources
- فایلها را در DevTools باز کنید
- با نقاط شکست کار کنید
- ویرایش فایلها و ذخیره تغییرات
- چالش - ویرایش فایلهای منبع
- راه حل - ویرایش فایلهای منبع
استفاده از پنل شبکه
- هدرهای درخواست و پاسخ HTTP را مشاهده کنید
- مواردی که بارگذاری صفحه را کند میکنند را شناسایی کنید
- اتصالات تلفن همراه را شبیه سازی کنید
- چالش - عملکرد شبکه را بررسی کنید
- راه حل - عملکرد شبکه را بررسی کنید
استفاده از پنل برنامه
- ذخیرهسازی را بررسی کنید
- با کوکیها کار کنید
- چالش - ذخیرهسازی محلی و کوکیها را بررسی کنید
- راه حل - ذخیرهسازی محلی و کوکیها را بررسی کنید
نتیجه
- مراحل بعدی