با عرص سلام در این مطلب شما یاد خواهید گرفت که با devtools browser پروژه جاوا اسکریپتی و debug بکنید بدون استفاده از ide یا text editor. و شما پروژه تایپ اسکریپت یا فریم ورک Angular را از این طریق می توانید خطایابی یا debug بکنید
خب من مرحله به مرحله به شما آموزش خواهم داد و لینک پروژه ای که در این آموزش دارم استفاده میکنم و براتون میزارم.
1. ابتدا یک فایل html که دارای فایل js می باشد و باز کنید من یک پروژه ماشین حساب که از گیت هاب دانلود کرده ام را از می کنم
کلیک راست کنید و روی inspect کلیک کنید یا ctrl + shift + i را بزنید
2. وارد tab source شوید
محیط tab source
3. آشنایی با محیط
خب در عکس بالا مشاهده می کنید شما برای debug کردن پروژه با این محیط خیلی سر و کار دارید در عکس پائین ما سه تا ستون داریم: 1. ستون چپ فایل های موجود در پروژه (رنگ آبی) 2. ستون وسط ادیتور متن (رنگ سبز) 3. ستون راست ابزار های debug کردن پروژه (رنگ قرمز)
4. باز کردن فایل برنامه
همینطور که مشاهده می کنید چهار تا پوشه آبی و یک فایل html در عکس بالا با کادر رنگ ابی می باشد که فایل های پروژه ماشین حساب می باشند شما در این قسمت می توانید فایل های پروژه را باز کنید من فایل index.html و باز می کنم.
در صورتی فایل های برنامه شما خیلی زیاد می باشد با ctrl + p (ویندوز) فایل خود را جستجو و باز کنید.
توجه داشته باشید در ستونی که فایل های html باز شده اند شما قادر نیستید تغییری ایجاد و ذخیره کنید. مثلا یک تگ h1 به فایل index.html اضافه یا کم کنید. ترفند دیگری برای اضافه کردن می باشد.
5. برای گذاشتن breakpoint وارد پوشه scripts شده و فایل script.js را باز کنید. با موس روی عدد یا فضای خالی سمت چپ عدد کلیک کنید مانند عکس زیر
من برای کد خط 23، breakpoint گذاشتم (با رنگ ابی مشخص شده)
من برای تابع Change Theme در خط 23 یک breakpoint گذاشتم این تابع زمانی فراخوانی می شود که theme صفحه تغییر بکند از light به dark یا از dark به light.
6. تغییر دادن theme صفحه
خب زمانی که میخوایم theme صفحه و تغییر بدم تابع change theme فراخوانی می شود و بدلیل گذاشتن break point وارد debugger devtools chrome می شود.
بعد وارد محیط debugger در تب source می شویم مانند تصویر زیر
خب به عکس زیر توجه کنید من به عکس زیر میگم ابزار های debugger که به شما کمک می کند تا سریع تر خطا یا باگ برنامه و پیدا کنید و مشابه ادیتور ها یا ide ها می باشد و شاید ابزار های بیشتری و در اختیار شما قرار داده باشد.
به عکس زیر توجه کنید
. خب شماره یک از سمت چپ بهش میگن 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 (توضیحات)