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

Devtools Pro: Beginner to Expert w/ Chrome Developer Tools

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: راهنمای کامل 2017 برای ساختن برنامه های وب زیبا، سریع و بدون اشکال با ابزارهای توسعه دهنده گوگل کروم اصلاح صفحات وب زنده و آزمایش ایده های جدید به سرعت ساخت و آزمایش اسکریپت ها به صورت زنده بدون نیاز به تجدید مرورگر تشخیص و رفع مشکلات کد موجود بهینه سازی بارگیری، حافظه و مسائل مربوط به عملکرد پیش نیازها: دانش اولیه HTML، CSS و/یا جاوا اسکریپت را دارید

آیا می‌خواهید یک توسعه‌دهنده وب متخصص شوید؟

من با هزاران پلتفرم مختلف از رایانه شخصی گرفته تا پلی استیشن کار کرده‌ام، و هیچ چیز به اندازه قدرت Google Chrome Developer Tools نیست. بیایید از آن استفاده کنیم.

این دوره راهنمای جامع DevTools است. ما با مثال‌های سبک ساده شروع می‌کنیم و از ابزارهایی مانند colorpicker و box shadow editor برای طراحی صفحات خود استفاده می‌کنیم. اما ما به سرعت به سمت موضوعات پیشرفته مانند استفاده از پنل حسابرسی برای درک عملکرد کند صفحه و پانل حافظه برای درک اینکه چرا برنامه ما ممکن است حافظه را نشت کند، حرکت می کنیم.

شاهدات:

  • من چیزهای زیادی را یاد گرفتم که در مورد آنها نمی دانستم اگرچه سال هاست از Devtools استفاده می کنم. -برنارد نیست
  • اولین دوره Udemy من، اما از آن کاملاً لذت بردم. من تجربه قبلی با ابزارهای توسعه دهنده کروم دارم، اما هنوز نکاتی وجود دارد که از این دوره همراه خود خواهم داشت - Stephen Wong
  • مدرس واضح و مختصر است و دوره پر از اطلاعات است. حتی برخی از قطعات ارزشمند برای توسعه دهندگان با تجربه وجود دارد! - تام فیچ

در اینجا نمونه ای از آنچه می توانید پس از شرکت در این کلاس به دست آورید آورده شده است:

  • با ویرایشگرهای داخلی مانند پانل انیمیشن ها و ویرایشگر انتقال، استایل پیشرفته اضافه کنید.
  • با استفاده از شش تکنیک مختلف نقطه شکست، می‌توانید هر کد جاوا اسکریپت را بفهمید و اشکال‌زدایی کنید.
  • تماس های شبکه را تجزیه و تحلیل کنید و حتی سیستم رزرو شام را در Yelp هک کنید.
  • سرعت بارگذاری صفحه خود را  با حسابرسی و Lighthouse  افزایش دهید تا سایت شما به طرز شگفت انگیزی سریع شود.
  • نمایه و رفع مشکلات رندر، CPU و حافظه.

هر دقیقه از این دوره اطلاعات ارزشمندی را ارائه می دهد و حداقل تکرار و تایپ وجود دارد. این دوره در سال 2017 با نسخه پیش‌نشر Chrome ساخته شد و حتی استفاده از ویژگی‌های آزمایشی مانند Workspace 2.0 را نشان می‌دهد.

برای مبتدیان، من آهسته شروع می‌کنم، اما به سرعت به سمت استفاده پیشرفته کار می‌کنم، و برای متخصصان، مطمئن شده‌ام که از تکنیک‌های اصلی برای بهبود صفحات وب شما که در هیچ جای دیگری یافت نمی‌شوند استفاده می‌کنم.


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

گشت و گذار در ابزارهای توسعه دهنده A Tour of the Developer Tools

  • مقدمه و برنامه درسی Introduction and Syllabus

گشت و گذار در ابزارهای توسعه دهنده A Tour of the Developer Tools

  • مقدمه و برنامه درسی Introduction and Syllabus

  • سه روش برای باز کردن Chrome Developer Tools Three ways to open Chrome Developer Tools

  • سه روش برای باز کردن Chrome Developer Tools Three ways to open Chrome Developer Tools

  • دستورات کنسول و بیانیه های چند خطی Console Commands and Multiline Statements

  • دستورات کنسول و بیانیه های چند خطی Console Commands and Multiline Statements

  • منابع، شبکه و سایر پنل ها Sources, Network, and Other Panels

  • منابع، شبکه و سایر پنل ها Sources, Network, and Other Panels

  • بازرسی و استایل یک صفحه زنده Inspect and Style a Page Live

  • بازرسی و استایل یک صفحه زنده Inspect and Style a Page Live

  • چگونه تغییرات خود را مشاهده کنید How to View Your Changes

  • چگونه تغییرات خود را مشاهده کنید How to View Your Changes

راه اندازی یک سرور محلی Setting Up a Local Server

  • راه اندازی ویندوز سرور Windows Server Setup

راه اندازی یک سرور محلی Setting Up a Local Server

  • سرور ساده پایتون استاتیک Static Python SimpleServer

  • سرور ساده پایتون استاتیک Static Python SimpleServer

  • راه اندازی ویندوز سرور Windows Server Setup

قطعات و روش های جایگزین برای درک تغییرات شما Snippets & Alternate Ways to Understand Your Changes

  • اعمال تغییرات Applying Changes

قطعات و روش های جایگزین برای درک تغییرات شما Snippets & Alternate Ways to Understand Your Changes

  • معرفی Snippets Introducing Snippets

  • معرفی Snippets Introducing Snippets

  • اعمال تغییرات Applying Changes

  • تاریخچه CSS CSS History

  • تاریخچه CSS CSS History

  • ویژگی‌ها و فضاهای کاری آزمایشی Chrome Experimental Chrome Features & Workspaces

  • ویژگی‌ها و فضاهای کاری آزمایشی Chrome Experimental Chrome Features & Workspaces

ویرایشگرهای سبک رابط کاربری گرافیکی GUI Style Editors

ویرایشگرهای سبک رابط کاربری گرافیکی GUI Style Editors

  • ویرایشگرهای سبک های مختلف The Various Style Editors

  • ویرایشگرهای سبک های مختلف The Various Style Editors

  • ویرایشگر انیمیشن ها Animations Editor

  • ویرایشگر انیمیشن ها Animations Editor

اشکال زدایی اولیه جاوا اسکریپت Basic Javascript Debugging

  • میانبرهای صفحه کلید برای اشکال زدایی Keyboard Shortcuts for Debugging

اشکال زدایی اولیه جاوا اسکریپت Basic Javascript Debugging

  • استفاده از دیباگر در پنل Sources Using the Debugger in the Sources Panel

  • استفاده از دیباگر در پنل Sources Using the Debugger in the Sources Panel

  • میانبرهای صفحه کلید برای اشکال زدایی Keyboard Shortcuts for Debugging

  • پشته تماس The Call Stack

  • پشته تماس The Call Stack

برگه ناوبری و برنامه ها Navigating & Applications Tab

  • کوکی‌ها و ذخیره‌سازی محلی با برگه برنامه Cookies and Local Storage with the Application Tab

برگه ناوبری و برنامه ها Navigating & Applications Tab

  • پیدا کردن چیزها Finding Stuff

  • پیدا کردن چیزها Finding Stuff

  • کوکی‌ها و ذخیره‌سازی محلی با برگه برنامه Cookies and Local Storage with the Application Tab

API و میانبرهای کنسول Console API & Shortcuts

  • نمایه کنسول و میانبرهای دلاری Console Profile & Dollar Shortcuts

  • استایل کنسول Console Styling

API و میانبرهای کنسول Console API & Shortcuts

  • کنسول Multiline and Asserts Console Multiline and Asserts

  • کنسول Multiline and Asserts Console Multiline and Asserts

  • توابع متفرقه کنسول Miscellaneous Console Functions

  • توابع متفرقه کنسول Miscellaneous Console Functions

  • نمایه کنسول و میانبرهای دلاری Console Profile & Dollar Shortcuts

  • استایل کنسول Console Styling

نقاط شکست Breakpoints

  • انواع نقاط شکست Types of Breakpoints

  • خط نقاط شکست کد Line of Code Breakpoints

  • DOM و نقاط شکست شبکه DOM and Network Breakpoints

  • نقاط شکست رویداد و استثنا Event and Exception Breakpoints

نقاط شکست Breakpoints

  • انواع نقاط شکست Types of Breakpoints

  • خط نقاط شکست کد Line of Code Breakpoints

  • نقاط شکست مشروط Conditional Breakpoints

  • نقاط شکست مشروط Conditional Breakpoints

  • DOM و نقاط شکست شبکه DOM and Network Breakpoints

  • نقاط شکست رویداد و استثنا Event and Exception Breakpoints

شبکه، سرعت صفحه و امنیت Network, Page Speed and Security

  • پنل شبکه The Network Panel

  • هک رزرو در Yelp Hacking Reservations on Yelp

  • بهبود سرعت بارگذاری صفحه با Audits & Lighthouse Improve page load speed with Audits & Lighthouse

شبکه، سرعت صفحه و امنیت Network, Page Speed and Security

  • دانلود از Codepen.io Downloading From Codepen.io

  • دانلود از Codepen.io Downloading From Codepen.io

  • پنل شبکه The Network Panel

  • هک رزرو در Yelp Hacking Reservations on Yelp

  • بهبود سرعت بارگذاری صفحه با Audits & Lighthouse Improve page load speed with Audits & Lighthouse

  • امنیت و HTTPS با NGrok Security and HTTPS with NGrok

  • امنیت و HTTPS با NGrok Security and HTTPS with NGrok

نظارت بر عملکرد سمت مشتری Client Side Performance Monitoring

  • معرفی یک مثال عملکرد مشتری Introducing a Client Performance Example

  • Task Manager، FPS meter و Tab Rendering Task Manager, FPS meter, and Rendering Tab

  • برگه عملکرد/جدول زمانی Performance / Timeline Tab

  • تشخیص نشت حافظه Detecting Memory Leaks

نظارت بر عملکرد سمت مشتری Client Side Performance Monitoring

  • معرفی یک مثال عملکرد مشتری Introducing a Client Performance Example

  • Task Manager، FPS meter و Tab Rendering Task Manager, FPS meter, and Rendering Tab

  • برگه عملکرد/جدول زمانی Performance / Timeline Tab

  • تشخیص نشت حافظه Detecting Memory Leaks

سایر مرورگرها و برخی سوالات متداول Other Browsers and Some FAQ's

  • تشکر و سوالات متداول A Thank You and Common Questions

سایر مرورگرها و برخی سوالات متداول Other Browsers and Some FAQ's

  • سایر مرورگرها، VM و BrowserStack Other Browsers, VM's and BrowserStack

  • سایر مرورگرها، VM و BrowserStack Other Browsers, VM's and BrowserStack

  • تشکر و سوالات متداول A Thank You and Common Questions

نمایش نظرات

آموزش Devtools Pro: مبتدی تا خبره با ابزارهای توسعه دهنده کروم
جزییات دوره
2.5 hours
39
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
8,099
4.3 از 5
دارد
دارد
دارد
Rocco Balsamo
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Rocco Balsamo Rocco Balsamo

بنیانگذار در SIMMER.io