കോഡിൽ ഒരുപാട് തെറ്റുകൾ വരാൻ സാധ്യതയുണ്ട്. നിങ്ങൾ മിക്കവാറും തെറ്റുകൾ വരുത്തുകയും ചെയ്യും... ഓ, ഞാൻ എന്തിനെക്കുറിച്ചാണ് സംസാരിക്കുന്നത്? നിങ്ങളൊരു മനുഷ്യനാണ്,അല്ലാതെ ഒരു robot അല്ല.നിങ്ങൾ എന്തായാലും തെറ്റുകൾ വരുത്തും.
എന്നാൽ സാധാരണയായി ബ്രൗസർ, ഉപയോഗിക്കുന്നവർക്ക്‌ error കാണാൻ കഴിയില്ല. അതിനാൽ, സ്ക്രിപ്റ്റിൽ എന്തെങ്കിലും error സംഭവിക്കുകയാണെങ്കിൽ, എന്താണ് തെറ്റിയതെന്നു നമുക്ക് അറിയാൻ പറ്റില്ല, അത് പരിഹരിക്കാനും കഴിയില്ല.
തെറ്റുകൾ കാണാനും സ്ക്രിപ്റ്റുകളെക്കുറിച്ചുള്ള മറ്റ് ഉപയോഗപ്രദമായ ധാരാളം വിവരങ്ങൾ നേടാനും "Developer console" ബ്രൗസറുകളിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.
മിക്ക ഡവലപ്പർമാരും ഡെവലപ്‌മെന്റിനായി Chrome അല്ലെങ്കിൽ Firefox ആയിരിക്കുo ആശ്രയിക്കുന്നത്, കാരണം ആ ബ്രൗസറുകളിൽ മികച്ച ഡവലപ്പർ ടൂൾസ് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. മറ്റ് ബ്രവ്സറുകളും ഡെവലപ്പർ ടൂൾസ് നൽകുന്നു, ചിലപ്പോൾ ചില പ്രത്യേകതകളും അവ നൽകും, പക്ഷേ സാധാരണയായി Chrome അല്ലെങ്കിൽ Firefox ലോട്ടു അനുകരിക്കുകയാണ് അവ ചെയ്യുന്നത്. അതിനാൽ മിക്ക ഡവലപ്പർമാർക്കും അവർക്ക് "ഇഷ്ടപ്പെട്ട" ഒരു ബ്രൗസർ കാണും കൂടാതെ ഒരു ബ്രൗസറിൽ എന്തെങ്കിലും പ്രശ്നമുള്ളതായി തോന്നുകയാണെങ്കിൽ മറ്റുള്ളവയിലേക്കു മാറുകയോ ചെയ്യും.
ഡവലപ്പർ ടൂൾസ് വളരെ ഉപയോഗപ്പെട്ട ഒന്നാണ്; അവയ്‌ക്ക് നിരവധി സവിശേഷതകളുണ്ട്. നമുക്കിപ്പോൾ, അവ എങ്ങനെ ഓപ്പൺ ചെയ്യാമെന്നും, തെറ്റുകൾ എങ്ങനെ നോക്കാമെന്നും, javascript command കൾ എങ്ങനെ ടെസ്റ്റ് ചെയ്തു നോക്കാമെന്നും പഠിക്കാം.
bug.html എന്ന പേജ് ഓപ്പൺ ചെയ്യുക.
അതിലെ javascript കോഡിൽ ഒരു തെറ്റുണ്ട്. സാധാരണ ഒരാൾക്കു അതിലുള്ള തെറ്റ് അറിയാൻ കഴിയില്ല , അതു കൊണ്ടു നമുക്ക് ആദ്യം developer tools ഓപ്പൺ ചെയ്യാം.
key:F12 ഞെക്കുക, നിങ്ങൾ Mac ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ പകരംkey:Cmd+Opt+J ഞെക്കുക.
അപ്പോൾ developer tools തനിയെ Console tab ഓപ്പൺ ചെയ്യും.
അത് ഏകദേശം ഇതുപോലെ ഇരിക്കും:
developer tools ന്റെ യാഥാർത്ഥ ലുക്ക് നിങ്ങളുടെ Chrome ന്റെ വേർഷൻ പോലെയായിരിക്കും. അതു പല സമയത്തുo മാറിക്കൊണ്ടിരിക്കുമെങ്കിലും ഏകദേശം ഒരുപോലെയിരിക്കും.
- നമുക്കിവിടെ ഒരു ചുവന്ന നിറത്തിലുള്ള ഒരു error മെസ്സേജ് കാണാൻ സാധിക്കും. ഈ ഒരു അവസ്ഥയിൽ സ്ക്രിപ്റ്റിൽ "lalala" എന്നൊരു unknown word നമുക്ക് കാണാൻ സാധിക്കും.
- വലതു ഭാഗത്തായി, നമുക്ക് ഞെക്കാൻ കഴിയുന്ന രീതിയിൽ,
bug.html:12ൽ തെറ്റു വന്ന ഭാഗത്തിന്റ വരിയുടെ നമ്പർ ഉൾപ്പടെ നമുക്ക് കാണാൻ സാധിക്കും.
Error മെസ്സേജിന്റെ അടിയിലായി, ഒരു > ചിഹ്നം കാണാം. നമുക്ക് javascript ന്റെ commands ടൈപ്പ് ചെയ്യാനുള്ള ഒരു "command line" നെയാണ് അത് സൂചിപ്പിക്കുന്നത്. അവ Run ചെയ്യാനായി key:Enter ഞെക്കിയാൽ മതി.
ഇപ്പോൾ നമുക്കതിലുള്ള തെറ്റുകൾ കാണാൻ സാധിക്കും, ഇപ്പോൾ നമുക്കത്രയൊക്കെ അറിഞ്ഞാൽ മതി. developer tools ന്റെ info:debugging-chrome എന്ന ചാപ്റ്ററിൽ debugging നെ കുറിച്ചു നമുക്ക് കൂടുതൽ പഠിക്കാം.
സത്യത്തിൽ , console ൽ നമ്മൾ ഒരു വരി ടൈപ്പ് ചെയ്തു, `key:Enter` അമർത്തുമ്പോൾ, അതു execute ആകുകയാണ് ചെയ്യുന്നത്.
ഒന്നിൽ കൂടുതൽ വരികളിൽ ടൈപ്പ് ചെയ്യാനായി, `key:Shift+Enter` ഞെക്കിയാൽ മതിയാകും. ഇതു വഴി ഒരാൾക്ക് ഒരുപാട് JavaScript കോഡുകൾ ടൈപ്പ് ചെയ്യാൻ പറ്റുന്നതാണ്.
മിക്ക മറ്റുള്ള browser കളും key:F12 ആണ് developer tools ഓപ്പൺ ചെയ്യാൻ ഉപയോഗിക്കുന്നത്.
എന്നാൽ അവ എല്ലാം ഒരുപോലെയായിരിക്കും കാണപ്പെടുന്നത്. ഈ tools ക്കെ എങ്ങനെയാണ് ഉപയോഗിക്കുന്നതെന്ന് മനസ്സിലാക്കിയതിനു ശേഷം (Chrome ൽ നിന്നു തന്നെ നിങ്ങൾക്കു തുടങ്ങാം), നിങ്ങൾക്ക് മറ്റൊന്നിലൊട്ടു മാറാം.
Safari (Mac ന്റെ browser ആണ്, Windows/Linux ഉം അത് സപ്പോർട് ചെയ്യത്തില്ല) യുടെ കാര്യത്തിലാണെങ്കിൽ കുറച്ചു കൂടി വ്യത്യാസം ഉണ്ട്. ഇതിൽ നമുക്ക് ആദ്യം "Develop menu" enable ചെയ്യണം.
<<<<<<< HEAD Preferences ൽ കേറിയതിനു ശേഷo "Advanced" എന്ന ഭാഗത്തേക്ക് പോകുക. അവിടെ താഴെയായിട്ടു ഒരു ചെക്‌ബോകസ് കാണാം:
Open Settings and go to the "Advanced" pane. There's a checkbox at the bottom:
540d753e90789205fc6e75c502f68382c87dea9b
ഇപ്പോൾ key:Cmd+Opt+C വഴി console ഓപ്പൺ ചെയ്യാം. മാത്രവുമല്ല, മുകളിലത്തെ മെനുവിൽ "Develop" എന്ന ഐറ്റം വന്നത് കൂടെ ശ്രദ്ദിക്കുക.ഇതിൽ ഒരുപാട് commands കളും ഓപ്ഷൻസും ഉണ്ട്.
- Developer tools വഴി നമുക്ക് errors കാണാനും, commands Run ചെയ്യാനും, variables പരിശോധിക്കാനും തുടങ്ങി ഒരുപാട് കാര്യങ്ങൾ ചെയ്യാൻ പറ്റും.
- windows ലെ മിക്ക browser കളിലും developer tools നമുക്ക്
key:F12വഴി ഓപ്പൺ ചെയ്യാവുന്നതാണ്. Mac ന്റെ Chrome ൽkey:Cmd+Opt+Jഞെക്കിയും, Safariയിൽ:key:Cmd+Opt+Cവഴിയും ഓപ്പൺ ചെയ്യാം (ആദ്യം enable ചെയ്യണം).
ഇപ്പോൾ നമ്മുടെ environment റെഡി ആയിട്ടുണ്ട്. അടുത്തതായി, നമുക്ക് JavaScript നെ കുറിച്ചു നോക്കാം!.