سلام در این آموزش قصد دارم شمارو با دیباگر Devtools مرورگر آشنا بکنم. دیباگر devtools همیشه و همه جا قابل استفاده است و وابسته به هیچ ide نیست فقط باید مرورگر کروم، فایر فاکس یا edge و غیره روی سیستم عامل شما نصب باشد.
2. وارد tab source شوید
3. اشنایی با محیط
خب در عکس بالا مشاهده می کنید شما برای debug کردن پروژه با این محیط خیلی سر و کار دارید در عکس پائین ما سه تا ستون داریم: 1. ستون چپ فایل های موجود در پروژه (رنگ آبی) 2. ستون وسط ادیتور متن (رنگ سبز) 3. ستون راست ابزار های debug کردن پروژه (رنگ قرمز)
4. باز کردن فایل برنامه
همینطور که مشاهده می کنید چهار تا پوشه آبی و یک فایل html در عکس بالا با کادر رنگ ابی می باشد که فایل های پروژه ماشین حساب می باشند شما در این قسمت می توانید فایل های پروژه را باز کنید من فایل index.html و باز می کنم.
در صورتی فایل های برنامه شما خیلی زیاد می باشد با ctrl + p (ویندوز) فایل خود را جستجو و باز کنید.
توجه داشته باشید در ستونی که فایل های html باز شده اند شما قادر نیستید تغییری ایجاد و ذخیره کنید. مثلا یک تگ h1 به فایل index.html اضافه یا کم کنید. ترفند دیگری برای اضافه کردن می باشد.
5. برای گذاشتن breakpoint وارد پوشه scripts شده و فایل script.js را باز کنید. با موس روی عدد یا فضای خالی سمت چپ عدد کلیک کنید مانند عکس زیر
من برای تابع Change Theme در خط 23 یک breakpoint گذاشتم این تابع زمانی فراخوانی می شود که theme صفحه تغییر بکند از light به dark یا از dark به light.
6. تغییر دادن theme صفحه
خب زمانی که میخوایم theme صفحه و تغییر بدم تابع change theme فراخوانی می شود و بدلیل گذاشتن break point وارد debugger devtools chrome شده. در پست بعدی در مورد این بخش بیشتر توضیح خواهم داد.
7. دانلود ماشین حساب
https://github.com/zxcodes/Calculator
نکته: پروژه های build شده framework های جاوا اسکریپت مانند angular قادر هستید از این روش پروژه و دیباگ بکنید
منبع:
