فلش‌کارت‌های آموزشی تسلط بر ابزارهای توسعه‌دهنده مرورگر (Chrome DevTools) برای بهینه‌سازی و عیب‌یابی وب‌سایت‌ها

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره تسلط بر ابزارهای توسعه‌دهنده مرورگر (Chrome DevTools) برای بهینه‌سازی و عیب‌یابی وب‌سایت‌ها

موضوع کلی: علوم رایانه و فناوری اطلاعات

موضوع میانی: توسعه و مهندسی وب‌سایت

📋 سرفصل‌های دوره

• 1. آشنایی با محیط و ساختار کلی Chrome DevTools
• 2. نحوه باز کردن و شخصی‌سازی پنل‌های ابزارهای توسعه‌دهنده
• 3. بررسی و تحلیل ساختار HTML در پنل Elements
• 4. تغییرات زنده و ویرایش گره‌های DOM در محیط مرورگر
• 5. مدیریت و ویرایش ویژگی‌های CSS در پنل Styles
• 6. استفاده از Computed برای بررسی مدل جعبه‌ای و ابعاد عناصر
• 7. عیب‌یابی استایل‌های اعمال شده و اولویت‌بندی قوانین CSS
• 8. کار با پنل Console برای اجرای کدهای جاوااسکریپت و لاگ‌گیری
• 9. مدیریت خطاهای زمان اجرا در کنسول و تحلیل Stack Trace
• 10. استفاده از ابزارهای Breakpoint برای متوقف کردن اجرای کد
• 11. بررسی وضعیت متغیرها و محیط اجرا در پنل Sources
• 12. استفاده از Step Over و Step Into برای تحلیل خط به خط کد
• 13. مشاهده و تحلیل درخواست‌های شبکه در پنل Network
• 14. بررسی کدهای وضعیت HTTP و زمان بارگذاری منابع
• 15. فیلتر کردن انواع فایل‌ها در تب Network برای بهینه‌سازی بارگذاری
• 16. تحلیل زمان‌بندی بارگذاری منابع با استفاده از Waterfall
• 17. شناسایی گلوگاه‌های عملکردی در تب Performance
• 18. ثبت و تحلیل پروفایل اجرای جاوااسکریپت و رندرینگ صفحات
• 19. بررسی حافظه مصرفی و شناسایی نشت حافظه (Memory Leaks)
• 20. کار با پنل Application برای مدیریت LocalStorage و SessionStorage
• 21. مشاهده و ویرایش کوکی‌های وب‌سایت در محیط توسعه
• 22. بررسی وضعیت کش و IndexedDB در پنل Application
• 23. استفاده از ابزار Device Mode برای طراحی واکنش‌گرا (Responsive)
• 24. شبیه‌سازی ابعاد نمایشگرهای مختلف و تراکم پیکسلی
• 25. بررسی عملکرد وب‌سایت در شرایط مختلف شبکه (Throttling)
• 26. استفاده از ابزار Lighthouse برای ارزیابی عملکرد و دسترس‌پذیری
• 27. تحلیل گزارش‌های Lighthouse و رفع خطاهای پیشنهادی
• 28. بررسی امنیت و گواهینامه‌های SSL در پنل Security
• 29. ردیابی رویدادهای مربوط به DOM در تب Event Listeners
• 30. استفاده از Coverage برای شناسایی کدهای بلااستفاده CSS و JS
• 31. ویرایش و ذخیره‌سازی تغییرات در پنل Sources با استفاده از Local Overrides
• 32. کار با پنل Rendering برای مشاهده لایه‌ها و خطاهای چیدمان
• 33. تجسم تعاملات کاربر با استفاده از ابزار ضبط و پخش (Recorder)
• 34. بررسی دسترسی‌پذیری (Accessibility) عناصر صفحه در پنل Elements
• 35. استفاده از ابزارهای پیشرفته برای دیباگ کردن انیمیشن‌های CSS
• 36. تحلیل تصاویر و بهینه‌سازی آن‌ها با استفاده از اطلاعات پنل Network
• 37. کار با کنسول برای تست سریع توابع جاوااسکریپت
• 38. روش‌های عیب‌یابی فرم‌های وب و اعتبارسنجی داده‌ها
• 39. مانیتورینگ تغییرات DOM در زمان اجرا با استفاده از Breakpoints
• 40. بهینه‌سازی نرخ فریم و تحلیل رندرینگ در مرورگر
• 41. نکات امنیتی در استفاده از ابزارهای توسعه‌دهنده برای عیب‌یابی وب‌سایت‌های حساس
• 42. تکنیک‌های حرفه‌ای برای افزایش سرعت بارگذاری صفحات وب
• 43. استفاده از پنل Sources برای دیباگ کردن کدهای سنگین جاوااسکریپت
• 44. نحوه خواندن گزارش‌های خطای کنسول و رفع ریشه‌ای مشکلات
• 45. اصول حرفه‌ای دیباگ کردن برنامه‌های وب مدرن
• 46. تست و بررسی سازگاری وب‌سایت با استانداردهای وب ایران
• 47. خلاصه و جمع‌بندی مسیر بهینه‌سازی وب‌سایت با DevTools