Merge pull request #64 from siddiqkaithodu/master

Developer console

Author: siddiqkaithodu

Diff for: 1-js/01-getting-started/4-devtools/article.md

@@ -1,22 +1,22 @@
 # Developer console
 
-കോഡിൽ ഒരുപാട് തെറ്റുകൾ വരാൻ സാധ്യതയുണ്ട്. നിങ്ങൾ മിക്കവാറും തെറ്റുകൾ  വരുത്തുകയും ചെയ്യും... ഓ, ഞാൻ എന്തിനെക്കുറിച്ചാണ് സംസാരിക്കുന്നത്? നിങ്ങളൊരു [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)) അല്ലാതെ കുറഞ്ഞത് ഒരു മനുഷ്യനാണെങ്കിൽ, നിങ്ങൾ എന്തായാലും തെറ്റുകൾ വരുത്തും.
+കോഡിൽ ഒരുപാട് തെറ്റുകൾ വരാൻ സാധ്യതയുണ്ട്. നിങ്ങൾ മിക്കവാറും തെറ്റുകൾ  വരുത്തുകയും ചെയ്യും... ഓ, ഞാൻ എന്തിനെക്കുറിച്ചാണ് സംസാരിക്കുന്നത്? നിങ്ങളൊരു മനുഷ്യനാണ്,അല്ലാതെ ഒരു [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)) അല്ല.നിങ്ങൾ എന്തായാലും തെറ്റുകൾ വരുത്തും.
 
-എന്നാൽ സാധാരണയായി ബ്രൗസർ‌, ഉപയോഗിക്കുന്നവർക്ക്‌ പിശകുകൾ‌ കാണാൻ കഴിയില്ല. അതിനാൽ, സ്ക്രിപ്റ്റിൽ എന്തെങ്കിലും തെറ്റ് സംഭവിക്കുകയാണെങ്കിൽ, എന്താണ് തെറ്റിയതെന്നു നമുക്ക് അറിയാൻ പറ്റില്ല, അത് പരിഹരിക്കാനും കഴിയില്ല.
+എന്നാൽ സാധാരണയായി ബ്രൗസർ‌, ഉപയോഗിക്കുന്നവർക്ക്‌ error കാണാൻ കഴിയില്ല. അതിനാൽ, സ്ക്രിപ്റ്റിൽ എന്തെങ്കിലും error സംഭവിക്കുകയാണെങ്കിൽ, എന്താണ് തെറ്റിയതെന്നു നമുക്ക് അറിയാൻ പറ്റില്ല, അത് പരിഹരിക്കാനും കഴിയില്ല.
 
 തെറ്റുകൾ കാണാനും സ്ക്രിപ്റ്റുകളെക്കുറിച്ചുള്ള മറ്റ് ഉപയോഗപ്രദമായ ധാരാളം വിവരങ്ങൾ നേടാനും "Developer console" ബ്രൗസറുകളിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.
 
 മിക്ക ഡവലപ്പർമാരും ഡെവലപ്‌മെന്റിനായി Chrome അല്ലെങ്കിൽ Firefox ആയിരിക്കുo ആശ്രയിക്കുന്നത്, കാരണം ആ ബ്രൗസറുകളിൽ മികച്ച ഡവലപ്പർ ടൂൾസ് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. മറ്റ് ബ്രവ്സറുകളും ഡെവലപ്പർ ടൂൾസ് നൽകുന്നു, ചിലപ്പോൾ ചില പ്രത്യേകതകളും അവ നൽകും, പക്ഷേ സാധാരണയായി Chrome അല്ലെങ്കിൽ Firefox ലോട്ടു അനുകരിക്കുകയാണ് അവ ചെയ്യുന്നത്. അതിനാൽ മിക്ക ഡവലപ്പർമാർക്കും അവർക്ക് "ഇഷ്ടപ്പെട്ട" ഒരു ബ്രൗസർ കാണും കൂടാതെ ഒരു ബ്രൗസറിൽ എന്തെങ്കിലും പ്രശ്നമുള്ളതായി തോന്നുകയാണെങ്കിൽ മറ്റുള്ളവയിലേക്കു മാറുകയോ ചെയ്യും.
 
-ഡവലപ്പർ ടൂൾസ് വളരെ ശക്തമാണ്; അവയ്‌ക്ക് നിരവധി സവിശേഷതകളുണ്ട്. നമുക്കിപ്പോൾ, അവ എങ്ങനെ ഓപ്പൺ ചെയ്യാമെന്നും, തെറ്റുകൾ എങ്ങനെ നോക്കാമെന്നും, javascript command കൾ എങ്ങനെ ടെസ്റ്റ്  ചെയ്തു നോക്കാമെന്നും പഠിക്കാം.
+ഡവലപ്പർ ടൂൾസ് വളരെ ഉപയോഗപ്പെട്ട ഒന്നാണ്; അവയ്‌ക്ക് നിരവധി സവിശേഷതകളുണ്ട്. നമുക്കിപ്പോൾ, അവ എങ്ങനെ ഓപ്പൺ ചെയ്യാമെന്നും, തെറ്റുകൾ എങ്ങനെ നോക്കാമെന്നും, javascript command കൾ എങ്ങനെ ടെസ്റ്റ്  ചെയ്തു നോക്കാമെന്നും പഠിക്കാം.
 
 
 ## Google Chrome
 [bug.html](bug.html) എന്ന പേജ് ഓപ്പൺ ചെയ്യുക.
 
 അതിലെ javascript കോഡിൽ ഒരു തെറ്റുണ്ട്. സാധാരണ ഒരാൾക്കു അതിലുള്ള തെറ്റ് അറിയാൻ കഴിയില്ല , അതു കൊണ്ടു നമുക്ക് ആദ്യം developer tools ഓപ്പൺ ചെയ്യാം.
 
-`key:F12` ഞെക്കുകയോ അല്ലെങ്കിൽ, നിങ്ങൾ Mac ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ,`key:Cmd+Opt+J` ഞെക്കുക.
+`key:F12` ഞെക്കുക, നിങ്ങൾ Mac ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ പകരം`key:Cmd+Opt+J` ഞെക്കുക.
 
 അപ്പോൾ developer tools തനിയെ  Console tab ഓപ്പൺ ചെയ്യും.
 
@@ -26,12 +26,12 @@
 
 developer tools ന്റെ യാഥാർത്ഥ ലുക്ക് നിങ്ങളുടെ Chrome ന്റെ വേർഷൻ പോലെയായിരിക്കും. അതു പല സമയത്തുo മാറിക്കൊണ്ടിരിക്കുമെങ്കിലും ഏകദേശം ഒരുപോലെയിരിക്കും.
 
-- നമുക്കിവിടെ ഒരു ചുവന്ന നിറത്തിലുള്ള ഒരു error മെസ്സേജ് കാണാൻ സാധിക്കും. ഈ ഒരു അവസ്ഥയിൽ സ്ക്രിപ്റ്റിൽ "lalala" എന്നൊരു unknown വേർഡ് നമുക്ക് കാണാൻ സാധിക്കും.
+- നമുക്കിവിടെ ഒരു ചുവന്ന നിറത്തിലുള്ള ഒരു error മെസ്സേജ് കാണാൻ സാധിക്കും. ഈ ഒരു അവസ്ഥയിൽ സ്ക്രിപ്റ്റിൽ "lalala" എന്നൊരു unknown word നമുക്ക് കാണാൻ സാധിക്കും.
 - വലതു ഭാഗത്തായി, നമുക്ക് ഞെക്കാൻ കഴിയുന്ന രീതിയിൽ, `bug.html:12` ൽ തെറ്റു വന്ന ഭാഗത്തിന്റ വരിയുടെ നമ്പർ ഉൾപ്പടെ നമുക്ക് കാണാൻ സാധിക്കും.
 
-Error മെസ്സേജിന്റെ അടിയിലായി, ഒരു `>` ചിഹ്നം കാണാം. നമുക്ക് javascript ന്റെ commands ടൈപ്പ് ചെയ്യാനുള്ള ഒരു "command line" നെയാണ് അത് സൂചിപ്പിക്കുന്നത്. അവ റണ് ചെയ്യാനായി `key:Enter` ഞെക്കിയാൽ മതി.
+Error മെസ്സേജിന്റെ അടിയിലായി, ഒരു `>` ചിഹ്നം കാണാം. നമുക്ക് javascript ന്റെ commands ടൈപ്പ് ചെയ്യാനുള്ള ഒരു "command line" നെയാണ് അത് സൂചിപ്പിക്കുന്നത്. അവ Run ചെയ്യാനായി `key:Enter` ഞെക്കിയാൽ മതി.
 
-ഇപ്പോൾ നമുക്കതിലുള്ള തെറ്റുകൾ കാണാൻ സാധിക്കും, ഇപ്പോൾ നമുക്കത്രയൊക്കെ അറിഞ്ഞാൽ മതി. developer tools ൽ നമുക്ക് <info:debugging-chrome> എന്ന ചാപ്റ്ററിൽ debugging നെ കുറിച്ചു നമ്മൾ കൂടുതൽ പഠിക്കും.
+ഇപ്പോൾ നമുക്കതിലുള്ള തെറ്റുകൾ കാണാൻ സാധിക്കും, ഇപ്പോൾ നമുക്കത്രയൊക്കെ അറിഞ്ഞാൽ മതി. developer tools ന്റെ <info:debugging-chrome> എന്ന ചാപ്റ്ററിൽ debugging നെ കുറിച്ചു നമുക്ക് കൂടുതൽ പഠിക്കാം.
 
 ```smart header="Multi-line input"
 സത്യത്തിൽ , console ൽ നമ്മൾ ഒരു വരി ടൈപ്പ് ചെയ്തു, `key:Enter` അമർത്തുമ്പോൾ, അതു execute ആകുകയാണ് ചെയ്യുന്നത്.
@@ -49,15 +49,15 @@ Error മെസ്സേജിന്റെ അടിയിലായി, ഒര
 
 Safari (Mac ന്റെ browser ആണ്, Windows/Linux ഉം അത് സപ്പോർട് ചെയ്യത്തില്ല) യുടെ കാര്യത്തിലാണെങ്കിൽ കുറച്ചു കൂടി വ്യത്യാസം ഉണ്ട്. ഇതിൽ നമുക്ക് ആദ്യം "Develop menu" enable ചെയ്യണം.
 
-Preferences ൽ കേറിയതിനു ശേഷo "Advanced" എന്ന ഭാഗത്തേക്ക് പോകുക. അവിടെ താഴെയായിട്ടു ഒരു ചെക്‌ബോകസ് കാണും:
+Preferences ൽ കേറിയതിനു ശേഷo "Advanced" എന്ന ഭാഗത്തേക്ക് പോകുക. അവിടെ താഴെയായിട്ടു ഒരു ചെക്‌ബോകസ് കാണാം:
 
 ![safari](safari.png)
 
 ഇപ്പോൾ `key:Cmd+Opt+C` വഴി console ഓപ്പൺ ചെയ്യാം. മാത്രവുമല്ല, മുകളിലത്തെ മെനുവിൽ "Develop" എന്ന ഐറ്റം വന്നത് കൂടെ ശ്രദ്ദിക്കുക.ഇതിൽ ഒരുപാട് commands കളും ഓപ്ഷൻസും ഉണ്ട്.
 
 ## സംഗ്രഹം
 
-- Developer tools വഴി നമുക്ക് തെറ്റുകൾ കാണാനും, commands റണ് ചെയ്യാനും, variables പരിശോധിക്കാനും, തുടങ്ങി ഒരുപാട് കാര്യങ്ങൾ ചെയ്യാൻ പറ്റും.
+- 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 നെ കുറിച്ചു നോക്കാം.
+ഇപ്പോൾ നമ്മുടെ environment റെഡി ആയിട്ടുണ്ട്. അടുത്തതായി, നമുക്ക് JavaScript നെ കുറിച്ചു നോക്കാം!.