பிழைத்திருத்தம் (Debugging)

நிரலாக்கத்தில், குறியீட்டை எழுதும் போது பிழைகள் (errors) ஏற்படலாம். இது தொடரியல் (syntactical) அல்லது தருக்கப் பிழைகள் (logical errors) காரணமாக இருக்கலாம். குறியீடு பிழைத்திருத்தம் (Code debugging) என்பது பிழைகளை அடையாளம் காணுதல், தனிமைப்படுத்துதல் மற்றும் சரிசெய்தல் போன்ற செயல்முறையாகும், இது அதிக நேரம் எடுத்துக்கொள்ளக்கூடியது மற்றும் தந்திரமானதாக இருக்கலாம்.

அதிர்ஷ்டவசமாக, பெரும்பாலான நவீன உலாவிகளில் உள்ளமைக்கப்பட்ட பிழைத்திருத்திகள் (built-in debuggers) உள்ளன. இந்தப் பிழைத்திருத்திகளை இயக்கலாம் மற்றும் அணைக்கலாம், பிழைகள் புகாரளிக்கப்படுவதைக் கட்டாயப்படுத்தலாம். குறியீட்டைச் செயல்படுத்துவதை நிறுத்தவும் மாறிகளை (variables) ஆராயவும் குறியீட்டைச் செயல்படுத்துகையில் பிரேக் பாயிண்டுகளை (breakpoints) அமைப்பதும் சாத்தியமாகும். இதற்கு ஒருவர் பிழைத்திருத்தச் சாளரத்தைத் (debugging window) திறந்து ஜாவாஸ்கிரிப்ட் குறியீட்டில் debugger முக்கிய சொல்லை (keyword) வைக்க வேண்டும். ஒவ்வொரு பிரேக் பாயிண்டிலும் குறியீடு செயலாக்கம் நிறுத்தப்படும், டெவலப்பர்கள் ஜாவாஸ்கிரிப்ட் மதிப்புகளை ஆராயவும், குறியீட்டைச் செயல்படுத்துவதைத் தொடரவும் அனுமதிக்கிறது.

console.log() நுட்பம்

எளிமையான மற்றும் பரவலாகப் பயன்படுத்தப்படும் பிழைத்திருத்த முறைகளில் ஒன்று console.log() செயல்பாட்டைப் (function) பயன்படுத்துவதாகும். இது உங்கள் குறியீட்டின் ஓட்டத்தைக் கண்காணிக்கவும், செயல்படுத்துகையில் குறிப்பிட்ட புள்ளிகளில் மாறிகளின் (variables) மதிப்புகளைச் சரிபார்க்கவும் உதவுகிறது.

function calculateTotal(price, taxRate) {
  const tax = price * taxRate;
  console.log("Tax calculated:", tax); // Output for inspection
  const total = price + tax;
  return total;
}

calculateTotal(100, 0.2);

console.log() ஐ இதற்காகப் பயன்படுத்தவும்:

செயல்பாடு (function) அழைக்கப்படுகிறதா என்று சரிபார்க்க.
மாறிகளின் (variables) மதிப்பை அச்சிட.
கட்டுப்பாட்டு ஓட்டத்தைக் (control flow) கண்காணிக்க (எ.கா., ஒரு நிபந்தனை பூர்த்தி செய்யப்பட்டால்).

மற்ற பயனுள்ள console முறைகள்:

console.error() – பிழைகளைப் பதிவு செய்ய (logging errors).
console.warn() – எச்சரிக்கைகளுக்கு.
console.table() – தரவை அட்டவணை வடிவத்தில் (tabular form) அச்சிட.
console.trace() – ஒரு குறிப்பிட்ட புள்ளியில் ஸ்டாக் ட்ரேஸை (stack trace) அச்சிட.

பிரேக் பாயிண்டுகளைப் பயன்படுத்துதல் (Using Breakpoints)

பிரேக் பாயிண்ட் என்பது உங்கள் குறியீட்டில் உள்ள ஒரு இடமாகும், அங்குச் செயலாக்கம் இடைநிறுத்தப்பட்டு, தற்போதைய நிலையை நீங்கள் ஆராய அனுமதிக்கிறது: மாறி மதிப்புகள் (variable values), கால் ஸ்டாக் (call stack), ஸ்கோப் செயின் (scope chain) போன்றவை. நவீன உலாவிகள் பிழைத்திருத்தத் திறன்களுடன் (debugging capabilities) டெவலப்பர் கருவிகளை (developer tools) வழங்குகின்றன.

பிரேக் பாயிண்டுகளை எவ்வாறு அமைப்பது (How to Set Breakpoints)

DevTools இல் Sources பேனலைத் திறக்கவும்.
உங்கள் ஸ்கிரிப்ட் (script) கோப்பிற்குச் செல்லவும்.
செயலாக்கத்தை இடைநிறுத்த விரும்பும் வரி எண்ணைக் (line number) கிளிக் செய்யவும்.

இடைநிறுத்தப்பட்டதும், உங்களால் முடியும்:

ஸ்டெப் ஓவர் (Step over) – அடுத்த வரிக்கு நகர.
ஸ்டெப் இன்டு (Step into) – ஒரு செயல்பாட்டு அழைப்பில் (function call) மூழ்க.
ஸ்டெப் அவுட் (Step out) – தற்போதைய செயல்பாட்டிலிருந்து வெளியேற.
தொடர (Resume) – அடுத்த பிரேக் பாயிண்ட் வரை தொடர்ந்து செயல்படுத்துக. பிரேக் பாயிண்டுகள் இடையூறு இல்லாதவை (non-intrusive) மற்றும் உங்கள் குறியீட்டை மாற்றாமல் சேர்க்கலாம்/அகற்றலாம்.

உலாவி டெவலப்பர் கருவிகள் (Browser Developer Tools)

நவீன உலாவிகளில் சக்திவாய்ந்த டெவலப்பர் கருவிகள் பொருத்தப்பட்டுள்ளன, அவை ஜாவாஸ்கிரிப்டைப் பிழைத்திருத்தவும், HTML மற்றும் CSS ஐச் சரிபார்க்கவும், நெட்வொர்க் கோரிக்கைகளைக் (network requests) கண்காணிக்கவும் உதவுகின்றன. சில அத்தியாவசியக் கருவிகளின் சுருக்கமான கண்ணோட்டம் இங்கே:

Chrome DevTools: Google Chrome இன் டெவலப்பர் கருவிகள் வலைப் பயன்பாடுகளைப் பிழைத்திருத்துவதற்கான பரந்த அளவிலான அம்சங்களை வழங்குகின்றன.

Firefox DevTools: Mozilla Firefox இன் டெவலப்பர் கருவிகள் மற்றொரு சிறந்த விருப்பமாகும், இது ஒத்த திறன்களை வழங்குகிறது.

Microsoft Edge DevTools: Microsoft Edge பயனர்களுக்கு, உள்ளமைக்கப்பட்ட டெவலப்பர் கருவிகள் அத்தியாவசியப் பிழைத்திருத்த அம்சங்களை வழங்குகின்றன.

Safari Web Inspector: Safari இன் Web Inspector என்பது வலைப் பயன்பாடுகளைப் பிழைத்திருத்துவதற்கான மற்றும் சுயவிவரப்படுத்துவதற்கான (profiling) வலுவான கருவியாகும்.

உலாவி தேவ் கருவிகள் (Browser Dev Tools)

உலாவிகள் டெவலப்பர் கருவிகளின் தொகுப்பை வழங்குகின்றன, அவை HTML, CSS மற்றும் ஜாவாஸ்கிரிப்டைச் சரிபார்க்க உங்களை அனுமதிக்கின்றன. இணையப் பக்கத்தில் வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுப்பதன் மூலமாகவோ அல்லது F12 அல்லது Ctrl+Shift+I/ Cmd + Option + I (Mac) ஐ அழுத்துவதன் மூலமாகவோ அவற்றை அணுகலாம்.

டெவலப்பர் கருவிகளில் உள்ள முக்கிய பேனல்கள் (Key Panels in Developer Tools)

Console: பதிவுகள் (logs), பிழைகள் (errors) ஆகியவற்றைக் காட்டுகிறது மற்றும் நிகழ்நேரத்தில் JS ஐச் செயல்படுத்த அனுமதிக்கிறது.
Elements / Inspector: HTML மற்றும் CSS ஐ உலாவவும் (browse) திருத்தவும் உங்களை அனுமதிக்கிறது.
Sources: பிரேக் பாயிண்டுகளைப் பயன்படுத்தி நீங்கள் ஜாவாஸ்கிரிப்டைப் பிழைத்திருத்தும் இடம்.
Network: வள ஏற்றுதல் (resource loading), நேரம் மற்றும் கோரிக்கை/பதில் (request/response) தரவைப் பார்க்கலாம்.
Performance / Memory: நினைவகக் கசிவுகள் (memory leaks) அல்லது இடையூறுகளை (bottlenecks) அடையாளம் காணவும் சுயவிவரப்படுத்துவதற்கும் (profiling) பயனுள்ளதாக இருக்கும்.

பிரேக் பாயிண்டுகளை நிரல் ரீதியாக (programmatically) உருவாக்க நாம் குறியீட்டில் பிழைத்திருத்தி அறிக்கையைச் (debugger statement) செருகலாம். குறியீடு பிழைத்திருத்தியைச் சந்திக்கும் போது, அது செயல்படுத்துவதை இடைநிறுத்தி உலாவியின் டெவலப்பர் கருவிகளைத் திறக்கும்.

வாட்ச் எக்ஸ்பிரஷன்ஸ் மற்றும் ஸ்கோப் (Watch Expressions and Scope)

DevTools இல், நீங்கள் மாறிகள் அல்லது கோவைகளைப் (expressions) பார்க்கலாம் (watch). சிக்கலான தர்க்கத்தைப் (complex logic) பிழைத்திருத்தும்போது அல்லது காலப்போக்கில் ஒரு மாறியைக் கண்காணிக்கும் போது இது உதவியாக இருக்கும்.

user.name அல்லது cart.length போன்ற கோவைகளைக் கண்காணிக்க Watch பேனலைப் பயன்படுத்தவும்.
கிடைக்கக்கூடிய மாறிகளைச் (variables) சரிபார்க்க Local, Closure மற்றும் Global ஸ்கோப்களைப் (scopes) பார்க்கவும்.

ஸ்டாக் ட்ரேஸ் மற்றும் கால் ஸ்டாக் (Stack Trace and Call Stack)

ஒரு பிரேக் பாயிண்டில் (அல்லது பிழைக்குப் பிறகு) இடைநிறுத்தப்படும் போது, நீங்கள் Call Stack பேனலைச் சரிபார்க்கலாம்:

இது தற்போதைய புள்ளிக்கு வழிவகுத்த செயல்பாட்டு அழைப்புகளின் (function calls) வரிசையைக் காட்டுகிறது.
ஒரு ஃபிரேமைக் (frame) கிளிக் செய்வதன் மூலம் அந்தச் சூழலில் (context) உள்ள மாறிகளைச் சரிபார்க்கலாம். தவறான செயல்பாட்டு ஓட்டங்களால் (function flows) ஏற்படும் எதிர்பாராத நடத்தைகளைச் சரிசெய்வதற்குக் கால் ஸ்டாக்கைப் புரிந்துகொள்வது இன்றியமையாதது.

பொதுவான பிழைத்திருத்த உத்திகள் (Common Debugging Strategies)

பிரச்சனையை எளிமையாக்குங்கள் (Simplify the problem): சாத்தியமான மிகச்சிறிய உதாரணத்தைத் தனிமைப்படுத்த முயற்சிக்கவும்.
வலியுறுத்தல்களைப் பயன்படுத்தவும் (Use assertions): உங்கள் குறியீட்டில் உள்ள அனுமானங்களை (assumptions) கைமுறையாகச் சரிபார்க்கவும்.
ரப்பர் டக் பிழைத்திருத்தம் (Rubber duck debugging): மறைந்திருக்கும் சிக்கல்களைக் கண்டறிய உங்கள் குறியீட்டை ஒருவருக்கு (அல்லது எதற்கும்!) விளக்குங்கள்.
பிழைச் செய்திகளைத் தேடுங்கள் (Search for error messages): ஜாவாஸ்கிரிப்ட் பிழைகளில் அடிக்கடி பயனுள்ள தகவல்கள் இருக்கும்.
உலாவி பொருந்தக்கூடிய தன்மையைச் சரிபார்க்கவும் (Check browser compatibility): எல்லா உலாவிகளும் ஒரே மாதிரி செயல்படாது.
லிண்டர்களைப் பயன்படுத்தவும் (Use linters): உங்கள் குறியீட்டை இயக்குவதற்கு முன்பு ESLint போன்ற கருவிகள் பல பொதுவான பிழைகளைப் பிடிக்கும்.

பிழைத்திருத்தம்