آموزش اشکال زدایی سایت ها با کروم DevTools

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

آشنایی با قابلیت های Chrome DevTools Understanding the Capabilities of Chrome DevTools

• اهمیت اشکال زدایی در مرورگر The Importance of Debugging in the Browser

• بررسی اجمالی پروژه آزمایشی و سناریوهای اشکال زدایی Demo Project Overview and Debugging Scenarios

• کاوش آنچه در ابزارهای توسعه دهنده کروم ممکن است Exploring What's Possible in Chrome DevTools

بررسی و ویرایش صفحات وب Examining and Editing Web Pages

• درک تفاوت بین HTML و DOM Understanding the Difference between HTML and the DOM

• استفاده از پنل عناصر برای یافتن و اصلاح موارد در DOM Using the Elements Panel to Find and Modify Items in the DOM

• عیب یابی و اصلاح سبک های CSS Troubleshooting and Modifying CSS Styles

• ذخیره تغییرات در فایل ها با فضاهای کاری Saving Changes to Files with Workspaces

استفاده از حالت دستگاه برای شبیه سازی چندین دستگاه Using Device Mode to Simulate Multiple Devices

• شبیه سازی درگاه های دید چند دستگاه Simulating Multiple Device Viewports

• عملکرد گلوگاه Throttling Performance

• شبیه سازی سنسورهای موقعیت جغرافیایی و جهت گیری Emulating Geolocation and Orientation Sensors

با استفاده از کنسول Using the Console

• درک، پیمایش، و ایجاد پیام های گزارش Understanding, Navigating, and Creating Log Messages

• اشکال زدایی با API کنسول Debugging with the Console API

• اجرای جاوا اسکریپت و استفاده از Utilities API Running JavaScript and Using the Utilities API

• ایجاد و نظارت بر عبارات زنده Creating and Monitoring Live Expressions

اشکال زدایی جاوا اسکریپت Debugging JavaScript

• درک و استفاده از پنل منابع Understanding and Using the Sources Panel

• ایجاد نقاط شکست و گام برداشتن از طریق کد Creating Breakpoints and Stepping Through Code

• استفاده از نقشه های منبع برای اشکال زدایی کدهای از پیش پردازش شده Using Source Maps to Debug Preprocessed Code

• ایجاد و استفاده از اسنیپت ها Creating and Using Snippets

مشاهده ارتباطات شبکه و داده های محلی Viewing Network Communication and Local Data

• استفاده از پنل شبکه برای بررسی ارتباطات سرور Using the Network Panel to Inspect Server Communication

• مشاهده و ویرایش Local Storage Viewing and Editing Local Storage

• بازرسی و حذف کوکی ها Inspecting and Deleting Cookies

• مشاهده کش ها و پایگاه های داده Viewing Caches and Databases

بهینه سازی عملکرد وب سایت Optimizing Website Performance

• ایجاد گزارش فانوس دریایی Generating a Lighthouse Report

• با استفاده از پنل عملکرد Using the Performance Panel

• آزمایش با ویژگی های پیش نمایش Experimenting with Preview Features

• جمع بندی دوره Course Wrap-up