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

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

مقدمه Introduction

• توسعه سریع با Chrome DevTools Streamlining development with Chrome DevTools

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

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

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

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

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

2. با استفاده از ابزارهای چیدمان 2. Using Layout Tools

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

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

• رندر کردن در دستگاه های دیگر Emulate rendering on other devices

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

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

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

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

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

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

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

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

• گرفتن یک تصویر از صفحه Capture a screenshot

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

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

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

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

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

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

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

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

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

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

• پرونده ها را در DevTools باز کنید Open files in DevTools

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

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

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

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

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

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

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

• اتصال تلفن همراه را تقلید کنید Emulate mobile connections

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

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

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