Debugging Basics

Programming လောကမှာ ဘယ်လောက်ပဲ တော်တဲ့ Developer ဖြစ်ပါစေ Error (Bug) ဆိုတာ လုံးဝ ရှောင်လွှဲလို့ မရပါဘူး။ အဓိက အရေးကြီးဆုံးက အဲ့ဒီ Error တက်လာတဲ့အခါ ပြာယာမခတ်ဘဲ ဘယ်လို အေးအေးဆေးဆေး ရှာဖွေ ဖြေရှင်းမလဲ (Debug လုပ်မလဲ) ဆိုတဲ့ စွမ်းရည် (Skill) ပါပဲ။

၁။ Console Errors များကို ဖတ်ရှုခြင်း

မိမိ ရေးသားထားတဲ့ Code က မျှော်လင့်ထားသလို အလုပ်မလုပ်တော့ဘူး ဆိုရင် ပထမဆုံး အနေနဲ့ Browser ရဲ့ Developer Tools (F12) ကို ဖွင့်ပြီး Console Tab ကို ဝင်ကြည့်ပါ။ အနီရောင် စာတန်းတွေနဲ့ ဘာ Error တက်နေသလဲ ဆိုတာကို အတိအကျ ပြပေးထားပါလိမ့်မယ်။

• ReferenceError: မကြေညာထားတဲ့ (သို့မဟုတ်) မရှိတော့တဲ့ Variable တစ်ခုခုကို သွားပြီး ခေါ်သုံးမိတဲ့ အခါမျိုးမှာ တက်လေ့ရှိပါတယ်။ (များသောအားဖြင့် နာမည် စာလုံးပေါင်း မှားနေတာမျိုး ဖြစ်နိုင်ပါတယ်)
• SyntaxError: JavaScript ရဲ့ ရေးပုံရေးနည်း စည်းမျဉ်း (Syntax) မှားယွင်းနေတဲ့ အခါမျိုးမှာ တက်ပါတယ်။ (ဥပမာ - ကွင်းပိတ်ဖို့ မေ့ကျန်ခဲ့တာ၊ Comma (,) သို့မဟုတ် Semicolon (;) ကျန်ခဲ့တာ)
• TypeError: သက်ဆိုင်ရာ Data Type နဲ့ မဆိုင်တဲ့ အလုပ်ကို သွားလုပ်ခိုင်းမိတဲ့ အခါမျိုးမှာ တက်ပါတယ်။ (ဥပမာ - null သို့မဟုတ် undefined ဖြစ်နေတဲ့ အရာကို Function လိုမျိုး () ခံပြီး သွားခေါ်မိတာမျိုး)

Error Message စာကြောင်းရဲ့ ညာဘက်ဆုံးမှာ Line Number (Code ၏ လိုင်းနံပါတ်) ပါဝင်ပါတယ်။ အဲ့ဒီ လိုင်းနံပါတ်ကို နှိပ်လိုက်ရင် ကိုယ့်ရဲ့ Code ထဲက ဘယ်နေရာမှာ မှားနေသလဲ ဆိုတာကို အလွယ်တကူ သွားရောက် စစ်ဆေးနိုင်ပါတယ်။

၂။ console.log() အသုံးပြု၍ ထောက်လှမ်းခြင်း

ဒါကတော့ Web Developer တိုင်းရဲ့ အကောင်းဆုံး သူငယ်ချင်းပါပဲ။ ကိုယ့်ရဲ့ Code က အခုလက်ရှိ ဘယ်နေရာ အထိ ရောက်နေပြီလဲ? Function တစ်ခုထဲကို Data တွေ အမှန်တကယ် ဝင်လာရဲ့လား? Variable တွေထဲမှာ ဘာတန်ဖိုး (Value) တွေ လက်ရှိ ဝင်နေသလဲ? ဆိုတာတွေကို သိချင်ရင် လိုအပ်တဲ့ ကြားနေရာတွေမှာ console.log ခံပြီး အဖြေ ထုတ်ကြည့်ခြင်းဖြင့် ပြဿနာရဲ့ ဇာစ်မြစ်ကို အလွယ်တကူ ခြေရာခံနိုင်ပါတယ်။

function add(a, b) {
    // ဝင်လာမည့် Parameter များ မှန်ကန်မှု ရှိမရှိ အရင်ဆုံး ထုတ်ကြည့်ခြင်း
    console.log("Input parameters:", a, b);

    let result = a + b;
    console.log("Calculation result:", result); // တွက်ချက်မှု မှန်မမှန် ထပ်မံ ထုတ်ကြည့်ခြင်း

    return result;
}

၃။ Don’t Panic 😱 (မထိတ်လန့်ပါနှင့်)

Error တက်လာတာဟာ တကယ်တော့ ကောင်းတဲ့အရာပါ။ ဘာကြောင့် အလုပ်မလုပ်တာလဲ ဆိုတာကို လမ်းစပြပေးနေတာ ဖြစ်လို့ပါ။ Error Message ကို သေချာ ဂရုတစိုက် ဖတ်ရှုပါ။ အကယ်၍ Error Message ကို ဖတ်ပြီး ဘယ်လိုပြင်ရမလဲ နားမလည်ဘူး ဆိုရင်တောင်၊ အဲ့ဒီ Error စာသား အတိအကျကို Copy ကူးပြီး Google မှာ ရှာဖွေကြည့်ပါ။ (StackOverflow လို Website တွေမှာ သင့်လိုမျိုး အလားတူ ပြဿနာ ကြုံဖူးတဲ့သူတွေ မေးထားတာ / ဖြေထားတာတွေကို သေချာပေါက် တွေ့ရပါလိမ့်မယ်)