سعید نصیری
سعید نصیری
خواندن ۳ دقیقه·۳ سال پیش

دیباگ جاوا اسکریپت

دیباگ جاوا اسکریپت
دیباگ جاوا اسکریپت

مقدمه

در برنامه نویسی قطعا شما به باگ های مختلفی بر می خورید که ممکن است خطای نحوی یا منطقی باشد ، در برخی مواقع باگ ها بدون علامت هستند یعنی شما هیچ پیامی را دریافت نمی کنید ، بعضی از این باگ ها بسختی حل می شوند.

به جستجو برای حل مشکلات و باگ ها در برنامه نویسی دیباگینگ می گویند.

در ادامه به ارائه یکسری ابزار و روش می پردازیم که دیباگینگ را در کد های جاوااسکریپت آسان تر می کند.

دیباگ عمومی

همیشه به یاد داشته باشید برای رفع باگ باید علت باگ را پیدا کرد خود باگ فقط ظاهر قضیه هست که برای ما قابل مشاهده هست اما علت باگ معمولا مثل باگ قابل مشاهده نیست.

مرحله بعدی برای حل هر باگی اشکار کردن علت باگ هست که معمولا از log یا print استفاده می شود ،‌ شما هیچوقت نمی توانید چشم بسته ماشینی را تعمیر کنید.

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

console.log()

مهم ترین بخش دیباگ آشکار کردن علت های وابسته به باگ است ،‌ در کد های جاوااسکریپتی مناسب ترین راه استفاده از ()console.log است که قابل استفاده در وب و کدهای نود جی اس هست.

<!DOCTYPE html> <html> <body> <h1>saeidfiy</h1> a = 4; b = 7; c = a + b; //BUG c must be 28 but it's 11 console.log(c); </body> </html>


debugger

در برخی مواقع باگ به وجود آماده منابع زیادی از سیستم را از ما می گیرد و کار دیباگ را برای ما سخت می کند یا اجرای کد جاوااسکریپت زمان زیادی می برد در این گونه موارد در قسمت های حیاتی کد که احتمال می هیم باگ در آن قسمت وجود دارد و در حال اشکار سازی علت ها هستیم می توانیم از debugger استفاده کنیم تا به محض اجرای آن قسمت از کد اجرا متوقف شود.

if (thisThing) { debugger; }

دیباگ در مرورگر

در مرورگر برای دسترسی به ابزار های توسعه دهنده می تون از کلید f12 یا ctrl + shift + i استفاده کرد

محیط کنسول مرورگر
محیط کنسول مرورگر

در ابزار باز شده می توان console.log هایی که در کد نوشته بودید را مشاهده کنید.

console.table()

اگر قصد دیباگ متغیری را دارید که به صورت آبجکت هست برای دیباگ بهتر و تمیز تر می توان از console.table استفاده کرد ،‌ نحوه استفاده شبیه console.log هست با این تفاوت که مقدار ورودی باید آبجکت باشد.

var animals = [ { animal: 'Horse', name: 'Henry', age: 43 }, { animal: 'Dog', name: 'Fred', age: 13 }, { animal: 'Cat', name: 'Frodo', age: 18 } ]; console.table(animals);
console.table()
console.table()

سخن پایانی

شاید به نظرتان بیاید که مطالب گفته شده خیلی ساده هست ، باید بگم قسمت اصلی کار همین چند قسمت ساده هست ،‌ شما می توانید از ابزار های دیباگ مختلف استفاده کنید ولی همان ابزار ها هم همین مراحل را با شکل و رنگ های مختلف به شما نشان می دهند .


اگر سوالاتی دارید یا نیاز به برقراری ارتباط با من دارید، می‌توانید از طریق راه‌های ارتباطی زیر با من در تماس باشید:

GitHub

LinkedIn

می‌توانید من را در این پلتفرم‌ها دنبال کنید و پیام‌ها و سوالات خود را با من در میان بگذارید. من با شما در این پلتفرم‌ها همکاری خواهم کرد و پاسخ‌های لازم را ارائه خواهم داد.

جاوا اسکریپتبرنامه نویسیدیباگباگکد نویسی
شاید از این پست‌ها خوشتان بیاید