திருத்து - Debug

JavaScript (JS) கோப்புகளைத் திருத்துவதற்கும் (Debug), அதேபோல் HTML மற்றும் CSS கோப்புகளைச் சரிபார்ப்பதற்கும் பல எளிய வழிகள் உள்ளன.

1. JavaScript Debugging: வழிகள் (Ways)

• Browser Developer Tools (F12): இதுவே முதன்மையான வழி. Chrome அல்லது Edge பிரவுசரில் F12 அழுத்தி Sources Tab-க்குச் சென்றால் உங்கள் JS கோப்பைக் காணலாம்.

• Breakpoints: Sources Tab-ல் கோட்டின் எண்ணைக் (Line Number) கிளிக் செய்தால் Breakpoint அமையும். கோடு அங்கே வந்து நின்றுவிடும், அப்போது வேரியபிள்களில் என்ன மதிப்பு இருக்கிறது என்று ஒவ்வொன்றாகச் சரிபார்க்கலாம்.

• Console Logging: உங்கள் கோடில் console.log(variableName); என்று சேர்ப்பதன் மூலம், அந்த வேரியபிளின் மதிப்பை Console Tab-ல் உடனுக்குடன் பார்க்கலாம்.

• Debugger Keyword: உங்கள் கோடில் debugger; என்று டைப் செய்தால், பிரவுசர் அந்த இடத்தில் தானாகவே எக்ஸிகியூஷனை நிறுத்திவிடும்.

• VS Code Debugger: Visual Studio Code எடிட்டரிலேயே 'Run and Debug' வசதியைப் பயன்படுத்தி பிரவுசரை இணைத்து டிபக் செய்யலாம்.

2. CSS மற்றும் HTML-ஐ Debug செய்ய முடியுமா?

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

HTML Debugging:

• Elements Tab: பிரவுசரில் F12 அழுத்தி Elements Tab-க்குச் சென்றால், உங்கள் HTML ஸ்ட்ரக்சரைப் பார்க்கலாம்.

• ஏதேனும் டேக் மூடப்படாமல் இருந்தாலோ அல்லது தவறாக இருந்தாலோ இங்கே கண்டறியலாம்.
• நேரடியாக அங்கேயே டெக்ஸ்ட்டை மாற்றிப் பார்த்து (Edit as HTML) சோதனை செய்யலாம்.

CSS Debugging:

• Styles Pane: ஒரு எலிமெண்ட்டைத் தேர்வு செய்தால், அதற்கு என்னென்ன CSS விதிகள் பயன்படுத்தப்பட்டுள்ளன என்று வலது பக்கம் தெரியும்.

• தேவையற்ற ஸ்டைல்களை அணைத்து (Disable) பார்க்கலாம் அல்லது புதிய ஸ்டைல்களை உடனுக்குடன் சேர்த்து (Live Edit) அவுட்புட்டைச் சரிபார்க்கலாம்.

• Computed Tab: ஒரு எலிமெண்ட்டின் இறுதி விளிம்பு (Border), பேடிங் (Padding) போன்றவை எவ்வளவு பிக்சல்களில் உள்ளன என்பதை இங்கே பார்க்கலாம்.

3. பொதுவான சிக்கல்கள் (Common Problems)

• Syntax Errors: } அல்லது ; போன்றவற்றை விடுவித்தால் JS இயங்காது.
• Specificity Issues (CSS): நீங்கள் ஒரு ஸ்டைல் கொடுத்தும் அது மாறவில்லை என்றால், வேறு ஒரு ஸ்டைல் அதை ஓவர்ரைட் (Overwrite) செய்கிறது என்று அர்த்தம்.
• Caching: நீங்கள் மாற்றிய கோடு பிரவுசரில் தெரியவில்லை என்றால் Ctrl + Shift + R கொடுத்து ஹார்ட் ரீலோட் (Hard Reload) செய்யவும்.