آموزش تسلط بر دوره ابزار توسعه گوگل کروم

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

مقدمه Introducción

• معرفی دوره Introduction to the course

• Chrome DevTools: تصویر بزرگ Chrome DevTools: The big picture

• باز کردن Chrome DevTools Opening Chrome DevTools

• نصب و باز کردن Chrome DevTools Installing and opening Chrome DevTools

• دستورات و میانبرها Commands and shortcuts

• بازی با پالت فرمان Playing with the Command Palette

دستگاه ها را با حالت دستگاه شبیه سازی کنید Simulate devices with Device Mode

• شبیه سازی دستگاه های تلفن همراه با حالت دستگاه Simulate mobile devices with Device Mode

• شبیه سازی دستگاه های تلفن همراه Simulating mobile devices

• شبکه و CPU را دریچه گاز بگیرید Throttle the network and CPU

• خفه کردن شبکه و CPU Throttling the network and CPU

عناصر Elements

• مشاهده عناصر در DOM Viewing elements in the DOM

• مشاهده عناصر در DOM Viewing elements in the DOM

• در حال ویرایش DOM Editing the DOM

• در حال ویرایش DOM Editing the DOM

• دسترسی به گره ها در کنسول Acceding nodes in the Console

• دسترسی به گره ها در کنسول Acceding nodes in the Console

• مشخصات اشیاء DOM را مشاهده کنید View the properties of DOM objects

• مشخصات اشیاء DOM را مشاهده کنید View the properties of DOM objects

• CSS را مشاهده و تغییر دهید View and change CSS

• CSS را مشاهده و تغییر دهید View and change CSS

• شبکه CSS را بررسی کنید Inspect CSS grid

• شبکه CSS را بررسی کنید Inspect CSS grid

• طرح بندی های CSS Flexbox را بررسی و اشکال زدایی کنید Inspect and Debug CSS Flexbox Layouts

• طرح بندی های CSS Flexbox را بررسی و اشکال زدایی کنید Inspect and Debug CSS Flexbox Layouts

کنسول Console

• پیام‌ها را در کنسول ثبت کنید Log messages in Console

• پیام‌ها را در کنسول ثبت کنید Log messages in Console

• جاوا اسکریپت را در کنسول اجرا کنید Run JavaScript in the Console

• جاوا اسکریپت را در کنسول اجرا کنید Run JavaScript in the Console

• مقادیر جاوا اسکریپت را در زمان واقعی با عبارات زنده تماشا کنید Watch JavaScript values in real time with live expressions

• مقادیر جاوا اسکریپت را در زمان واقعی با عبارات زنده تماشا کنید Watch JavaScript values in real time with live expressions

• قالب و سبک پیام ها را در کنسول Format and style messages in the Console

• قالب و سبک پیام ها را در کنسول Format and style messages in the Console

منابع Sources

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

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

• کد خود را با نقاط شکست مکث کنید Pause your code with breakpoints

• کد خود را با نقاط شکست مکث کنید Pause your code with breakpoints

• قطعات جاوا اسکریپت را اجرا کنید Run Snippets of JavaScripts

• قطعات جاوا اسکریپت را اجرا کنید Run Snippets of JavaScripts

• فایل ها را با Workspaces ویرایش و ذخیره کنید Edit and save files with Workspaces

• فایل ها را با Workspaces ویرایش و ذخیره کنید Edit and save files with Workspaces

شبکه Network

• فعالیت شبکه را بررسی کنید Inspect network activity

• فعالیت شبکه را بررسی کنید Inspect network activity

• مشاهده ویژگی های شبکه با جستجوی یک فایل Viewing network properties by searching for a file

• مشاهده ویژگی های شبکه با جستجوی یک فایل Viewing network properties by searching for a file

کارایی Performance

• عملکرد زمان اجرا را تجزیه و تحلیل کنید Analyze runtime performance

• عملکرد زمان اجرا را تجزیه و تحلیل کنید Analyze runtime performance

• یافتن تنگناها Finding bottlenecks

• یافتن تنگناها Finding bottlenecks

حافظه Memory

• با استفاده از Chrome Task Manager Using the Chrome Task Manager

• با استفاده از Chrome Task Manager Using the Chrome Task Manager

• با Heap Snapshots، نشت حافظه درخت DOM جدا شده را کشف کنید Discover detached DOM tree memory leaks with Heap Snapshots

• با Heap Snapshots، نشت حافظه درخت DOM جدا شده را کشف کنید Discover detached DOM tree memory leaks with Heap Snapshots

• نشت حافظه پشته JS را با Timelines تخصیص شناسایی کنید Identify JS heap memory leaks with Allocation Timelines

• نشت حافظه پشته JS را با Timelines تخصیص شناسایی کنید Identify JS heap memory leaks with Allocation Timelines

• تخصیص حافظه بر اساس تابع را بررسی کنید Investigate memory allocation by function

• تخصیص حافظه بر اساس تابع را بررسی کنید Investigate memory allocation by function

کاربرد Application

• اشکال زدایی برنامه های وب پیشرفته Debug Progressive Web Apps

• اشکال زدایی برنامه های وب پیشرفته Debug Progressive Web Apps

• ذخیره سازی محلی را مشاهده و ویرایش کنید View and edit local storage

• ذخیره سازی محلی را مشاهده و ویرایش کنید View and edit local storage

• مشاهده و ویرایش فضای ذخیره‌سازی جلسه View and edit session storage

• مشاهده و ویرایش فضای ذخیره‌سازی جلسه View and edit session storage

• مشاهده و تغییر داده های IndexedDB View and change IndexedDB data

• مشاهده و تغییر داده های IndexedDB View and change IndexedDB data

• مشاهده، ویرایش و حذف کوکی ها View, edit, and delete cookies

• مشاهده، ویرایش و حذف کوکی ها View, edit, and delete cookies

• مشاهده داده های کش View Cache data

• مشاهده داده های کش View Cache data

• اشکال زدایی خدمات پس زمینه Debug background services

• اشکال زدایی خدمات پس زمینه Debug background services

فانوس دریایی و موضوعات مهم دیگر Lighthouse and other important topics

• فانوس دریایی - حسابرسی یک سایت Lighthouse - Audit a site

• فانوس دریایی - حسابرسی یک سایت Lighthouse - Audit a site

• فانوس دریایی - بهبود یک سایت از ممیزی Lighthouse - Improving a site from the audit

• فانوس دریایی - بهبود یک سایت از ممیزی Lighthouse - Improving a site from the audit

• افکت های انیمیشن CSS را بررسی و اصلاح کنید Inspect and modify CSS animation effects

• افکت های انیمیشن CSS را بررسی و اصلاح کنید Inspect and modify CSS animation effects

• تغییرات HTML، CSS و جاوا اسکریپت خود را ردیابی کنید Track your HTML, CSS, and JavaScript changes

• تغییرات HTML، CSS و جاوا اسکریپت خود را ردیابی کنید Track your HTML, CSS, and JavaScript changes

• جاوا اسکریپت و CSS استفاده نشده را پیدا کنید Find unused JavaScript and CSS

• جاوا اسکریپت و CSS استفاده نشده را پیدا کنید Find unused JavaScript and CSS

• بهبودهای بالقوه CSS را شناسایی کنید Identify potential CSS improvements

• بهبودهای بالقوه CSS را شناسایی کنید Identify potential CSS improvements

• مسائل - مشکلات را پیدا و برطرف کنید Issues - Find and fix problems

• مسائل - مشکلات را پیدا و برطرف کنید Issues - Find and fix problems

• رسانه - اطلاعات پخش کننده رسانه را مشاهده و اشکال زدایی کنید Media - View and debug media players information

• رسانه - اطلاعات پخش کننده رسانه را مشاهده و اشکال زدایی کنید Media - View and debug media players information

• بازرس حافظه - ArrayBuffer جاوا اسکریپت را بررسی کنید Memory Inspector - Inspect JavaScript ArrayBuffer

• بازرس حافظه - ArrayBuffer جاوا اسکریپت را بررسی کنید Memory Inspector - Inspect JavaScript ArrayBuffer

• شرایط شبکه - رشته عامل کاربر را لغو کنید Network conditions - Override the user agent string

• شرایط شبکه - رشته عامل کاربر را لغو کنید Network conditions - Override the user agent string

• امنیت - مسائل امنیتی را درک کنید Security - Understand security issues

• امنیت - مسائل امنیتی را درک کنید Security - Understand security issues

• جستجو - متن را در تمام منابع بارگذاری شده پیدا کنید Search - Find text across all loaded resources

• جستجو - متن را در تمام منابع بارگذاری شده پیدا کنید Search - Find text across all loaded resources

• WebAuthn - احراز هویت را شبیه سازی کنید WebAuthn - Emulate authenticators

• WebAuthn - احراز هویت را شبیه سازی کنید WebAuthn - Emulate authenticators

ضبط کننده Recorder

• ضبط، پخش مجدد و اندازه گیری جریان کاربر Record, replay, and measure user flows

• ضبط، پخش مجدد و اندازه گیری جریان کاربر Record, replay, and measure user flows

تفسیر Rendering

• مشکلات مربوط به عملکرد رندر را کشف کنید Discover issues with rendering performance

• مشکلات مربوط به عملکرد رندر را کشف کنید Discover issues with rendering performance

• شبیه سازی ویژگی های رسانه CSS Emulate CSS media features

• شبیه سازی ویژگی های رسانه CSS Emulate CSS media features

• جلوه‌های دیگر را اعمال کنید - تم تاریک خودکار را فعال کنید، فوکوس را شبیه‌سازی کنید و موارد دیگر Apply other effects - enable automatic dark theme, emulate focus, and more

• جلوه‌های دیگر را اعمال کنید - تم تاریک خودکار را فعال کنید، فوکوس را شبیه‌سازی کنید و موارد دیگر Apply other effects - enable automatic dark theme, emulate focus, and more

حسگرها Sensors

• نادیده گرفتن موقعیت جغرافیایی Override geolocation

• نادیده گرفتن موقعیت جغرافیایی Override geolocation

• جهت گیری دستگاه را شبیه سازی کنید Simulate device orientation

• جهت گیری دستگاه را شبیه سازی کنید Simulate device orientation

اشکال زدایی از راه دور Remote debugging

• اشکال زدایی از راه دور دستگاه های اندرویدی Remote debug Android devices

• اشکال زدایی از راه دور دستگاه های اندرویدی Remote debug Android devices

• دسترسی به سرورهای محلی Access local servers

• دسترسی به سرورهای محلی Access local servers

قابلیت دسترسی Accesbility

• قابلیت دسترسی یک صفحه را بررسی کنید Audit a page’s accessibility

• قابلیت دسترسی یک صفحه را بررسی کنید Audit a page’s accessibility

• وب سایت خود را خواناتر کنید Make your website more readable

• وب سایت خود را خواناتر کنید Make your website more readable

• فوکوس عنصر را دنبال کنید Track element focus

• فوکوس عنصر را دنبال کنید Track element focus

تنظیمات و سفارشی سازی Settings and customization

• تنظیم گزینه ها و سفارشی سازی DevTools Setting options and customizing DevTools

• تنظیم گزینه ها و سفارشی سازی DevTools Setting options and customizing DevTools