در بخش یک آموزش debug کردن پروژه javascript یا typescript با محیط آشنا شدید در این قسمت قصد دارم یک مروری از بخش قبل بکنم و شمارو با ابزار های debugger اشنا بکنم.
خب ابتدا یک breakpoint در تابع changetheme میزارم
زمانی که theme صفحه از حالت light به dark تغییر بکند تابع changeTheme() فراخوانی می شود
بعد وارد محیط debugger در تب source می شویم مانند تصویر زیر
خب به عکس زیر توجه کنید من به عکس زیر میگم ابزار های debugger که به شما کمک می کند تا سریع تر خطا یا باگ برنامه و پیدا کنید و مشابه ادیتور ها یا ide ها می باشد و شاید ابزار های بیشتری و در اختیار شما قرار داده باشد.
به عکس زیر توجه کنید
1. خب شماره یک از سمت چپ بهش میگن pause یا resume
در تصویر بالا pause شده به این معنی می باشد که برنامه در قسمتی که شما breakpoint گذاشتید متوقف شده است یکی از کاربرد های آن این است که برنامه در یک حلقه for یا یک تابع متوقف شده و شما تمایل دارید حلقه ای که ده بار اجرا می شود سریع 9 بار اجرا شود تا حلقه و در دور 9 بصورت خط به خط دیباگ بکنید.
و اگر بصورت خط به خط بخواهید دیباگ بکنید تا 9 بار زمان بر می باشد و در ادامه توضیح خواهم داد که چگونه میتوان خط به خط دیباگ کرد.
یا شما دو تا تابع دارید و دوتا breakpoint گذاشتید و دوست ندارید خط به خط تابع اول و دیباگ بکنید resume می زنید و تابع اول اجرا می شود و به تابع دوم که breakpoint گذاشتید می رسید....
2. ایکن شماره دو step over next function call
وارد تابع مثلا changeTheme شدید قصد دارید خط به خط تابع و دیباگ بکنید و به یاد داشته باشید این قسمت و که : "در این تابع چند تا تابع دیگری هم call یا فراخوانی کردید". زمان کلیک کردن برروی ایکن شماره دو در تصویر بالا کد ها را بصورت خط به خط رد می شوید و از توابع فراخوانی شده در تابع changeTheme بصورت خط به خط می گذرد (داخل تابع فراخوانی شده نمی شود تا کد های داخل تابع و بصورت خط به خط دیباگ بکنیم).
3. ایکن شماره سه step into next function call
خب در ذهن تون فرض کنید در یک کلاس سه تا تابع داریم و در تابع اول یک breakpoint گذاشتیم و داخل تابع اول، تابع سوم هم فراخوانی شده و ما برای تابع سوم breakpoint نگذاشتیم ولی میخوایم وارد این تابع شده و دستورات تابع را بصورت خط به خط دیباگ بکنیم.
وقتی که در داخل تابع اول به تابع سوم رسیدیم برای اینکه کد های داخل تابع سوم و بصورت خط به خط دیباگ بکنیم (وارد دستورات تابع سوم بشویم) ایکن شماره سه را زده تا وارد تابع سوم شده و کد های نوشته شده داخل تابع و دیباگ بکنیم.
در صورت استفاده نکردن از این ایکن از خطی که تابع سوم فراخوانی شده است می گذرد.....
4. آیکن شماره چهار step out of current function
بیاین فرضیات قبلی و ادامه بدیم ان شاء الله وقت بکنم عکس براتون میزارم. خب شما از تابع اول وارد تابع سوم شدید و در تابع سوم 15 خط دستور می باشد شما به دستور 10 که رسیدید دیگر قصد ادامه دادن برای 5 خط بعدی را ندارید و می خواهید به تابع قبلی (تابع شماره یک) بر گردید و ادامه تابع را دیباگ بکنید روی آیکن شماره چهار کلیک می کنید.
5. ایکن شماره پنج step
خط به خط از تمامی دستورات می گذرد در صورتی که تابع دیگری داخل تابع استفاده شده باشد وارد تابع شده مانند توضیحات ایکن شماره سه و آن تابع را هم بصورت خط به خط دیباگ می کند.
6. ایکن شماره شیش deactivate breakpoint
تمامی breakpoint هایی که گذاشتید غیر فعال می شوند و دو مرتبه روی آن ایکن کلیک کنید active می شوند
7. ایکن شماره هفت pause on exception
زمانی که به یک Exception برخورد بکنید خطا را چاپ می کند
ابزار بعدی scope ها می باشند:
شما در scope ها متغیر ها و property های لوکال و مشاهده می کنید و می توانید با کلیک کردن روی مقدار های property و variable آن ها را تغییر بدید
ابزار بعدی callStack ها می باشند:
مثال: من به تابع ()changeTheme رسیدم مانند عکس های اول و میخوام ببینم قبل از رسیدن به تابع changeTheme چه توابع اجرا شدند از ابزار callStack استفاده می کنم و تاریخچه تمامی توابعی که قبل از تابع ()changeTheme اجرا شده اند و میتوانم ببینم و قادر هستید روی تابع های قبل از اجرا شدن تابع changeTheme() کلیک کنید.
ابزار بعدی breakpoints ها می باشند:
شما در این قسمت می توانید breakpoint هایی که گذاشتید و مشاهده کنید. breakpoint هایی که active هستند تیک ابی دارند
ابزار بعدی event listener breakpoint می باشد:
شما همه ی ایونت های موجود را مشاهده می کنید و انواع حالت های مختلف یک event.
مثلا mouse ایونت mouse down, mouse up, click و غیره دارد. من میخوام وقتی که کلیک برروی button شد تابعی که ایونت میخواهد اجرا بکند و پیدا بکنم در دیباگر تیک ایونت کلیک را میزنم. و برنامه را اجرا میکنم و روی button کلیک میکنم.
منبع:
developer google (توضیحات)
