دوره آموزشی ابزارهای توسعه دهنده مرورگر کروم
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
سرفصل ها
0. مقدمه
- 01 - ساده سازی توسعه با Chrome DevTools
- 02 - آنچه باید بدانید
- 03 - تنظیم محیط خود
1. معرفی ابزارهای توسعه دهنده
- 04 - دسترسی و استفاده از ابزارهای توسعه دهنده
- 05 - سفارشی سازی نمایش ابزارهای توسعه دهنده
2. استفاده از Layout Tools
- 06 - یک صفحه را در حالت دستگاه مشاهده کنید
- 07 - طراحی واکنشگرا را تست کنید
- 08 - شبیه سازی رندر در دستگاههای دیگر
- 09 - مدل سرعت اتصال
- 10 - چالش - طرحی پاسخگو را نقد کنید
- 11 - راه حل - نقد یک طرح پاسخگو
3. با استفاده از پنل عناصر
- 12 - عناصر را بازرسی کنید
- 13 - DOM را اصلاح کنید
- 14 - سبکها را بررسی کنید
- 15 - سبکها را اصلاح کنید
- 16 - یک اسکرین شات بگیرید
- 17 - چالش - عناصر و سبکها را بررسی و اصلاح کنید
- 18 - راه حل - عناصر و سبکها را بازرسی و اصلاح کنید
4. استفاده از پنل کنسول
- 19 - پیامها را در کنسول مشاهده کنید
- 20 - اطلاعات را در کنسول بنویسید
- 21 - از خط فرمان Console استفاده کنید
- 22 - عناصر موجود در کنسول را بررسی کنید
- 23 - چالش - کار با کنسول
- 24 - راه حل - کار با کنسول
5. استفاده از پنل Sources
- 25 - فایلها را در DevTools باز کنید
- 26 - با نقاط شکست کار کنید
- 27 - ویرایش فایلها و ذخیره تغییرات
- 28 - چالش - ویرایش فایلهای منبع
- 29 - راه حل - ویرایش فایلهای منبع
6. استفاده از پنل شبکه
- 30 - هدرهای درخواست و پاسخ HTTP را مشاهده کنید
- 31 - مواردی که بارگذاری صفحه را کند میکنند را شناسایی کنید
- 32 - اتصالات تلفن همراه را شبیه سازی کنید
- 33 - چالش - عملکرد شبکه را بررسی کنید
- 34 - راه حل - عملکرد شبکه را بررسی کنید
7. استفاده از پنل برنامه
- 35 - ذخیرهسازی را بررسی کنید
- 36 - با کوکیها کار کنید
- 37 - چالش - ذخیرهسازی محلی و کوکیها را بررسی کنید
- 38 - راه حل - ذخیرهسازی محلی و کوکیها را بررسی کنید
نتیجه
- 39 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی سئوی پیشرفته: ایجاد یک وب سایت دوستدار سئو
- دوره آموزشی یادگیری اشکال زدایی جاوا اسکریپت
- دوره آموزشی React: ساختن برنامه های وب پیشرفته (PWA)
- دوره آموزشی یادگیری Node.js
- دوره آموزشی ایجنتهای هوش مصنوعی در مرورگر: افزایش بهرهوری با Gemini در Chrome
- دوره آموزشی CSS: سبک بازسازی مجدد
- دوره آموزشی Google Workspace Administration: مدیریت و گزارش (2021)
- دوره آموزشی مدیریت و گزارشدهی در مدیریت Google Workspace
مسیرهای مرتبط
- مسیر آموزشی توسعه وب را با Vue.js کاوش کنید
- مسیر آموزشی تبدیل شدن به یک توسعه دهنده Back-End وب
- مسیر آموزشی تقویت مهارت های زبان برنامه نویسی React
- مسیر آموزشی تبدیل شدن به یک توسعه دهنده Full-Stack وب
- مسیر آموزشی کاوش شغلی در توسعه وب فرانت اند
- مسیر آموزشی توسعه برنامه را با پشته MERN کاوش کنید
- مسیر آموزشی تبدیل شدن به استاد جاوا اسکریپت
- مسیر آموزشی تبدیل شدن به یک توسعه دهنده React