JavaScript Debugging

JavaScript பிழைத்திருத்தத்தைக் கற்றுக்கொள்ளுங்கள்

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

பிழைகள் (நடக்கும்) நிகழும், ஒவ்வொரு முறையும் நீங்கள் சில புதிய கணினி குறியீட்டை எழுதும்போது.

🐛 ஆர்வமான உண்மை:

பிழைத்திருத்தம் என்பது கணினி நிரல்களில் பிழைகளை (பிழைகள்) சோதித்தல், கண்டறிதல் மற்றும் குறைப்பதற்கான செயல்முறையாகும். முதல் அறியப்பட்ட கணினி பிழை ஒரு உண்மையான பூச்சி (ஒரு பூச்சி) மின்னணுவியலில் சிக்கியிருந்தது.

குறியீடு பிழைத்திருத்தம்

நிரலாக்க குறியீட்டில் தொடரியல் பிழைகள் அல்லது தருக்க பிழைகள் இருக்கலாம்.

இந்த பிழைகளில் பல கண்டறிய கடினமானவை.

பெரும்பாலும், நிரலாக்க குறியீட்டில் பிழைகள் இருக்கும்போது, எதுவும் நடக்காது. பிழைச் செய்திகள் இல்லை, மேலும் பிழைகளைத் தேட எங்கு போக வேண்டும் என்பதற்கான அறிகுறிகளும் கிடைக்காது.

🔍 வரையறை:

நிரலாக்க குறியீட்டில் பிழைகளைத் தேடுவது (மற்றும் சரிசெய்வது) குறியீடு பிழைத்திருத்தம் என்று அழைக்கப்படுகிறது.

JavaScript பிழைத்திருத்திகள்

பிழைத்திருத்தம் எளிதானது அல்ல. ஆனால் அதிர்ஷ்டவசமாக, அனைத்து நவீன உலாவிகளிலும் உள்ளமைக்கப்பட்ட JavaScript பிழைத்திருத்தி உள்ளது.

உள்ளமைக்கப்பட்ட பிழைத்திருத்திகளை இயக்கலாம் மற்றும் அணைக்கலாம், பிழைகள் பயனருக்கு தெரிவிக்கப்படும்.

பிரேக்பாயிண்டுகள்

குறியீட்டு செயல்பாடு நிறுத்தப்படக்கூடிய இடங்கள்

மாறிகள் ஆய்வு

குறியீடு செயல்படும் போது மாறிகளைச் சரிபார்க்கவும்

செயல்பாடு மீண்டும் தொடங்குதல்

மதிப்புகளை ஆய்வு செய்த பிறகு குறியீட்டைத் தொடரவும்

🎮 சரியான வழி:

பொதுவாக (இல்லையெனில் இந்தப் பக்கத்தின் கீழே உள்ள படிகளைப் பின்பற்றவும்), உங்கள் உலாவியில் F12 விசையுடன் பிழைத்திருத்தத்தை செயல்படுத்துகிறீர்கள், மேலும் பிழைத்திருத்தி மெனுவில் "Console" ஐத் தேர்ந்தெடுக்கவும்.

console.log() முறை

உங்கள் உலாவி பிழைத்திருத்தத்தை ஆதரித்தால், பிழைத்திருத்தி சாளரத்தில் JavaScript மதிப்புகளைக் காண்பிக்க console.log() ஐப் பயன்படுத்தலாம்:

எடுத்துக்காட்டு

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

📝 உதவிக்குறிப்பு:

console.log() முறை பற்றி மேலும் அறிய எங்கள் JavaScript Console குறிப்பைப் படியுங்கள்.

பிரேக்பாயிண்டுகளை அமைத்தல்

பிழைத்திருத்தி சாளரத்தில், JavaScript குறியீட்டில் பிரேக்பாயிண்டுகளை அமைக்கலாம்.

ஒவ்வொரு பிரேக்பாயிண்டிலும், JavaScript செயல்படுத்துவதை நிறுத்தி, JavaScript மதிப்புகளை ஆய்வு செய்ய உங்களை அனுமதிக்கும்.

மதிப்புகளை ஆய்வு செய்த பிறகு, நீங்கள் குறியீட்டின் செயல்பாட்டை மீண்டும் தொடங்கலாம் (பொதுவாக ஒரு ப்ளே பொத்தானுடன்).

பிரேக்பாயிண்டுகள்

குறியீடு இயங்கும் இடத்தைக் கட்டுப்படுத்துகின்றன

மாறி ஆய்வு

நிறுத்தும் புள்ளியில் மதிப்புகளைச் சரிபார்க்க உதவுகின்றன

படிப்படியாக செயல்படுத்துதல்

ஒரு வரியை ஒரு வரியாக குறியீட்டைச் செயல்படுத்த அனுமதிக்கின்றன

debugger முக்கிய சொல்

debugger முக்கிய சொல் JavaScript இன் செயல்பாட்டை நிறுத்துகிறது, மேலும் (கிடைக்குமானால்) பிழைத்திருத்த செயல்பாட்டை அழைக்கிறது.

இது பிழைத்திருத்தியில் பிரேக்பாயிண்டை அமைப்பதற்கு சமமான செயல்பாட்டைக் கொண்டுள்ளது.

பிழைத்திருத்தம் எதுவும் கிடைக்கவில்லை என்றால், debugger அறிக்கைக்கு எந்த விளைவும் இல்லை.

பிழைத்திருத்தி இயக்கப்பட்ட நிலையில், இந்த குறியீடு மூன்றாவது வரியை செயல்படுத்துவதற்கு முன் செயல்படுத்துவதை நிறுத்தும்.

எடுத்துக்காட்டு

let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

⚡ நடைமுறை பயன்பாடு:

debugger முக்கியச் சொல் வளர்ச்சியின் போது குறியீட்டில் தற்காலிகமாக பிரேக்பாயிண்டுகளைச் செருக பயனுள்ளதாக இருக்கும், ஆனால் உற்பத்தி குறியீட்டில் அகற்றப்பட வேண்டும்.

முக்கிய உலாவிகளின் பிழைத்திருத்த கருவிகள்

பொதுவாக, உங்கள் உலாவியில் F12 உடன் பிழைத்திருத்தத்தை செயல்படுத்துகிறீர்கள், மேலும் பிழைத்திருத்தி மெனுவில் "Console" ஐத் தேர்ந்தெடுக்கவும்.

இல்லையெனில் இந்தப் படிகளைப் பின்பற்றவும்:

உலாவி படிகள்
Chrome
  1. உலாவியைத் திறக்கவும்
  2. மெனுவில் இருந்து, "More tools" ஐத் தேர்ந்தெடுக்கவும்
  3. கருவிகளிலிருந்து, "Developer tools" ஐத் தேர்ந்தெடுக்கவும்
  4. இறுதியாக, Console ஐத் தேர்ந்தெடுக்கவும்
Firefox
  1. உலாவியைத் திறக்கவும்
  2. மெனுவில் இருந்து, "Web Developer" ஐத் தேர்ந்தெடுக்கவும்
  3. இறுதியாக, "Web Console" ஐத் தேர்ந்தெடுக்கவும்
Edge
  1. உலாவியைத் திறக்கவும்
  2. மெனுவில் இருந்து, "Developer Tools" ஐத் தேர்ந்தெடுக்கவும்
  3. இறுதியாக, "Console" ஐத் தேர்ந்தெடுக்கவும்
Opera
  1. உலாவியைத் திறக்கவும்
  2. மெனுவில் இருந்து, "Developer" ஐத் தேர்ந்தெடுக்கவும்
  3. "Developer" இலிருந்து, "Developer tools" ஐத் தேர்ந்தெடுக்கவும்
  4. இறுதியாக, "Console" ஐத் தேர்ந்தெடுக்கவும்
Safari
  1. Safari, Preferences, Advanced க்குச் செல்லவும்
  2. "Enable Show Develop menu in menu bar" ஐச் சரிபார்க்கவும்
  3. மெனுவில் புதிய விருப்பம் "Develop" தோன்றும் போது: "Show Error Console" ஐத் தேர்ந்தெடுக்கவும்

மேலும் காண்க

JavaScript Errors

JavaScript பிழைகள் பற்றி அறிக

JavaScript Silent Errors

அமைதியான பிழைகளைப் புரிந்துகொள்ளுங்கள்

JavaScript Error Statements

பிழை அறிக்கைகளைக் கையாளுதல்

JavaScript Error Object

பிழைப் பொருளைப் பயன்படுத்துதல்

பயிற்சி

❓ பிழைத்திருத்தி சாளரத்தில் தகவல்களைக் காண்பிக்க பொதுவான முறை எது?

debug.log()
✗ தவறு! JavaScript இல் debug.log() என்ற முறை இல்லை
console.log()
✓ சரி! console.log() என்பது பிழைத்திருத்தம் மற்றும் பதிவிறக்கத்திற்காக பிழைத்திருத்தி கன்சோலில் மதிப்புகளைக் காண்பிக்கப் பயன்படும் நிலையான JavaScript முறையாகும்
document.log()
✗ தவறு! document பொருளில் log() முறை இல்லை. பிழைத்திருத்த சாளரத்திற்கு பதிலாக இது HTML ஆவணத்தில் தகவலைக் காண்பிக்கப் பயன்படுகிறது