آموزش ابزارهای توسعه دهنده وب کروم

سرفصل ها و درس ها

معرفی Introduction

• ساده سازی توسعه با ابزارهای توسعه دهنده کروم Streamlining development with Chrome DevTools

• تنظیم محیط خود Setting up your environment

• آنچه شما باید بدانید What you should know

1. معرفی ابزارهای توسعه دهنده 1. Developer Tools Introduction

• سفارشی کردن نمایش ابزارهای توسعه دهنده Customizing the display of the developer tools

• دسترسی و استفاده از ابزارهای توسعه دهنده Accessing and using the developer tools

2. استفاده از Layout Tools 2. Using Layout Tools

• طراحی واکنشگرا را تست کنید Test a responsive design

• مدل سرعت اتصال Model connection speeds

• چالش: طرحی پاسخگو را نقد کنید Challenge: Critique a responsive design

• شبیه سازی رندر در دستگاه های دیگر Emulate rendering on other devices

• یک صفحه را در حالت دستگاه مشاهده کنید View a page in Device Mode

• راه حل: یک طراحی واکنشگرا را نقد کنید Solution: Critique a responsive design

3. با استفاده از پنل عناصر 3. Using the Elements Panel

• عناصر را بررسی کنید Inspect elements

• بررسی سبک ها Inspect styles

• اسکرین شات بگیرید Capture a screenshot

• DOM را اصلاح کنید Modify the DOM

• چالش: عناصر و سبک ها را بررسی و اصلاح کنید Challenge: Inspect and modify elements and styles

• راه حل: عناصر و سبک ها را بررسی و اصلاح کنید Solution: Inspect and modify elements and styles

• اصلاح سبک ها Modify styles

4. استفاده از پنل کنسول 4. Using the Console Panel

• از خط فرمان Console استفاده کنید Use the Console command line

• اطلاعات را در کنسول بنویسید Write information to the Console

• عناصر موجود در کنسول را بررسی کنید Examine elements in the Console

• چالش: با کنسول کار کنید Challenge: Work with the Console

• مشاهده پیام ها در کنسول View messages in the Console

• راه حل: با کنسول کار کنید Solution: Work with the Console

5. استفاده از پنل Sources 5. Using the Sources Panel

• با نقاط شکست کار کنید Work with breakpoints

• باز کردن فایل ها در DevTools Open files in DevTools

• ویرایش فایل ها و ذخیره تغییرات Edit files and save changes

• راه حل: فایل های منبع را ویرایش کنید Solution: Edit source files

• چالش: فایل های منبع را ویرایش کنید Challenge: Edit source files

6. استفاده از پنل شبکه 6. Using the Network Panel

• مواردی را که بارگذاری صفحه را کند می کنند شناسایی کنید Identify items that slow page loading

• چالش: عملکرد شبکه را بررسی کنید Challenge: Examine network performance

• راه حل: عملکرد شبکه را بررسی کنید Solution: Examine network performance

• هدرهای درخواست و پاسخ HTTP را مشاهده کنید View HTTP request and response headers

• اتصالات تلفن همراه را شبیه سازی کنید Emulate mobile connections

7. استفاده از پنل برنامه 7. Using the Application Panel

• ذخیره سازی را بررسی کنید Examine storage

• با کوکی ها کار کنید Work with cookies

• چالش: ذخیره سازی محلی و کوکی ها را بررسی کنید Challenge: Examine local storage and cookies

• راه حل: ذخیره سازی محلی و کوکی ها را بررسی کنید Solution: Examine local storage and cookies

نتیجه Conclusion

• مراحل بعدی Next steps