برای استفاده از دیباگر نیازی نیست در کدهای صفحه هیچ تغییری بدین.
کافیه F12 رو در مرورگر بزنین تا محیط developer باز بشه:
چندین بخش داره مثل inspect - console - debugger و ...
در inspect موس رو روی هر بخش کد html ببرین اون رو در خود صفحه هایلایت میکنه
در console میتونین هر کدی رو بنویسین و نتیجه اش رو درجا ببینین (میتونه بیشتر از یک خط هم باشه مثل یک تابع کامل)
در debugger اول از pane دست چپ بخشی از کد که قرار دیباگ کنین نتخاب میکنین تا در pane راست اون رو نشون بده ؛ حالا روی هر خط کد که کلیک کنین روش breakpoint میذاره که در زمان اجرا روی این خط متوقف میشه و میتونین چیزای مختلف رو مقدارش رو کنترل کنین.
این بصورت خیلی ساده بود چون یک ابزار واقعا پیچیده است و تسلط کامل بهش پیدا کردن زمانبر هست و لازمه اش هم تسلط به تکنولوژی های html/javascript/css و dom و framework ها و ... است.
باید ویدئو های آموزشی ببینین یا کلاس برین - خارج از حوصله اینجاست - ولی در همین حد ابتدایی هم که گفتم خیلی کمک احوال هست.
پاسخ با نقل قول