ഒരു സീനിയർ ഡെവലപ്പറെപ്പോലെ ജാവസ്ക്രിപ്റ്റ് (JavaScript) എങ്ങനെ ഡിബഗ് ചെയ്യാം

എല്ലാ കാര്യങ്ങൾക്കും console.log ഉപയോഗിക്കുന്നത് നിർത്തുക. നിങ്ങൾ ഓരോ ആഴ്ചയും മണിക്കൂറുകൾ പാഴാക്കുകയാണ്.

പ്രൊഡക്ഷൻ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നതിനായി ഞാൻ 8 വർഷം ചെലവഴിച്ചു. ഈ വർക്ക്ഫ്ലോ ഡിബഗ്ഗിംഗ് സമയം 60% കുറയ്ക്കുന്നു.

Tool	Use Case	Time Saved
Chrome DevTools Sources	Step-through debugging	40%
Conditional Breakpoints	ലൂപ്പുകളിലെ ബഗ്ഗുകൾ കണ്ടെത്തുക	25%
Performance Panel	റെൻഡറിംഗ് തടസ്സങ്ങൾ കണ്ടെത്തുക	35%
Network Panel	API ടൈമിംഗ് പ്രശ്നങ്ങൾ	30%
Console.assert	ലോജിക് പിശകുകൾ നേരത്തെ കണ്ടെത്തുക	15%

എല്ലായിടത്തും ലോഗുകൾ (logs) വിതറുന്നത് നിർത്തുക. പകരം ഈ രീതികൾ ഉപയോഗിക്കുക.

1. Conditional Breakpoints ഉപയോഗിക്കുക

DevTools Sources തുറക്കുക. ഒരു ബ്രേക്ക്പോയിന്റ് (breakpoint) സെറ്റ് ചെയ്യാൻ ഒരു ലൈൻ നമ്പറിൽ ക്ലിക്ക് ചെയ്യുക. അതിൽ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് 'Edit breakpoint' എന്നത് തിരഞ്ഞെടുക്കുക. ഒരു കണ്ടീഷൻ (condition) ചേർക്കുക. നിങ്ങളുടെ കണ്ടീഷൻ ശരിയാകുമ്പോൾ മാത്രമേ ഡിബഗ്ഗർ നിൽക്കുകയുള്ളൂ. വലിയ ലൂപ്പുകളിൽ (loops) ഇത് മണിക്കൂറുകൾ ലാഭിക്കാൻ സഹായിക്കും.

2. Call Stack പരിശോധിക്കുക

ഡിബഗ്ഗർ നിർത്തിനിൽക്കുമ്പോൾ, Call Stack പാനൽ ശ്രദ്ധിക്കുക. ബഗ്ഗിലേക്ക് നയിച്ച പാത്ത് (path) ഇത് കാണിച്ചുതരുന്നു. ഒരു ഫ്രെയിമിൽ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് അത് സേവ് ചെയ്യാൻ 'Copy stack trace' തിരഞ്ഞെടുക്കുക.

3. Log Points ഉപയോഗിക്കുക

കോഡ് നിർത്താതെ തന്നെ ഔട്ട്‌പുട്ട് വേണമെന്നുണ്ടെങ്കിൽ Log points ഉപയോഗിക്കുക. ഒരു ലൈൻ നമ്പറിൽ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് 'Add log point' തിരഞ്ഞെടുക്കുക. ഇത് നിങ്ങളുടെ സോഴ്സ് കോഡിൽ മാറ്റം വരുത്തുന്നില്ല. DevTools ക്ലോസ് ചെയ്യുമ്പോൾ ഇത് അപ്രത്യക്ഷമാകും.

4. Performance Panel ഉപയോഗിച്ച് സ്ലോ ആപ്പുകൾ പരിഹരിക്കുക

Performance ടാബ് തുറക്കുക. 'Record' ക്ലിക്ക് ചെയ്യുക. 5 സെക്കൻഡ് പേജ് ഉപയോഗിക്കുക. റെക്കോർഡിംഗ് നിർത്തുക. Main thread-ൽ 50ms-ൽ കൂടുതൽ സമയമെടുക്കുന്ന ലോങ്ങ് ടാസ്ക്കുകൾ (long tasks) ഉണ്ടോ എന്ന് പരിശോധിക്കുക. ഇത് ലേഔട്ട് (layout), പെയിന്റിംഗ് (painting) പ്രശ്നങ്ങൾ കണ്ടെത്താൻ സഹായിക്കും.

5. Network Panel പരിശോധിക്കുക

Waterfall വ്യൂ പരിശോധിക്കുക. ചുവപ്പോ പർപ്പിളോ നിറത്തിലുള്ള ബാറുകൾ എന്നാൽ റിക്വസ്റ്റുകൾ ബ്ലോക്ക് ചെയ്യപ്പെട്ടു എന്നാണ് അർത്ഥം. വലിയ വിടവുകൾ (gaps) ഉണ്ടെങ്കിൽ ജാവസ്ക്രിപ്റ്റ് മെയിൻ ത്രെഡിനെ (main thread) ബ്ലോക്ക് ചെയ്യുന്നു എന്നാണ് അർത്ഥം. ഒരു റിക്വസ്റ്റിൽ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് നിങ്ങളുടെ ടെർമിനലിൽ API പ്രശ്നങ്ങൾ പരിശോധിക്കാൻ 'Copy as cURL' തിരഞ്ഞെടുക്കുക.

നിങ്ങളുടെ ഡിബഗ്ഗിംഗ് ചെക്ക്‌ലിസ്റ്റ്:

• ഒരു conditional breakpoint സെറ്റ് ചെയ്യുക
• എക്സിക്യൂഷൻ പാത്ത് (execution path) അറിയാൻ Call Stack പരിശോധിക്കുക
• ലോക്കൽ വേരിയബിളുകൾക്കായി Scope പാനൽ ഉപയോഗിക്കുക
• വാല്യൂസ് നിരീക്ഷിക്കാൻ ഒരു log point ചേർക്കുക
• ടൈമിംഗ് പ്രശ്നങ്ങൾക്കായി ഒരു Performance പ്രൊഫൈൽ റെക്കോർഡ് ചെയ്യുക
• API പ്രശ്നങ്ങൾക്കായി Network പാനൽ പരിശോധിക്കുക

ഈ വർക്ക്ഫ്ലോ പഠിച്ചെടുക്കാൻ രണ്ട് ആഴ്ചയേ മതിയാകൂ. നിങ്ങളുടെ കരിയറിലെ ഏറ്റവും മികച്ച പ്രൊഡക്റ്റിവിറ്റി അപ്‌ഗ്രേഡ് ആണിത്. നിങ്ങളുടെ ബ്രൗസറിൽ ഈ ടൂളുകൾ ഇതിനകം തന്നെ ഉണ്ട്. അവ ഉപയോഗിക്കുക.

Source: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p