വെബ് ബ്രൌസർ ഡവലപ്പർ ഉപകരണങ്ങൾ എങ്ങനെ ഉപയോഗിക്കാം

വെബ് ഡിസൈനർമാർക്കും ഡവലപ്പർമാർക്കും ടെസ്റ്ററുകൾക്കും വേണ്ടിയുള്ള സംയോജിത ടൂളുകൾ

വെബിൽ സർഫ് ചെയ്യുന്നതിനായുള്ള ദിവസേനയുള്ള മിക്ക ബ്രൌസർ നിർമ്മാതാക്കളും, വെബ് ഡെവലപ്പർമാർക്കും, ഡിസൈനർമാർക്കും, ഗുണമേൻമ ഉറപ്പുനൽകുന്ന പ്രൊഫഷണലുകളോടും ഒപ്പം, ബ്രൌസറുകളിലേക്ക് ശക്തമായ ഉപകരണങ്ങൾ സമന്വയിപ്പിക്കുന്നതിലൂടെ ആ ഉപയോക്താക്കളെ ആക്സസ് ചെയ്യുന്ന അപ്ലിക്കേഷനുകളും സൈറ്റുകളും നിർമ്മിക്കാൻ സഹായിക്കുന്നു. തങ്ങളെത്തന്നെ.

ഒരു ബ്രൗസറിലെ കണ്ടെത്തിയ ഒരേയൊരു പ്രോഗ്രാമിംഗും പരിശോധന ഉപകരണങ്ങളും നിങ്ങൾ ഒരു പേജിന്റെ ഉറവിട കോഡ് കാണാനും അനുവദിക്കാനോ അനുവദിച്ച ദിവസങ്ങൾ കഴിഞ്ഞു. ഇന്നത്തെ ബ്രൌസറുകൾ നിങ്ങളെ കൂടുതൽ ആഴത്തിലുള്ള ഡൈവിംഗിൽ കൊണ്ടുപോകുന്നു, ജാവാസ്ക്രിപ്ഷനിലെ സ്നിപ്പെറ്റുകൾ എക്സ്ട്രാക്റ്റ് ചെയ്ത് ഡമോഗ് ചെയ്യൽ, DOM ഘടകങ്ങൾ പരിശോധിക്കൽ, എഡിറ്റുചെയ്യൽ, നിങ്ങളുടെ അപ്ലിക്കേഷൻ അല്ലെങ്കിൽ പേജ് ലോഡ്സ് പോലുള്ള യഥാസമയ പ്രാവശ്യം നെറ്റ്വർക്ക് ട്രാഫിക് നിരീക്ഷിക്കുന്നത് ബുദ്ധിമുട്ടുകൾ തിരിച്ചറിയൽ, CSS പ്രകടനം വിശകലനം ചെയ്യുക, നിങ്ങളുടെ കോഡ് ഉറപ്പാക്കൽ വളരെയധികം മെമ്മറി അല്ലെങ്കിൽ കൂടുതൽ സിപിയു സൈക്കിളുകൾ ഉപയോഗപ്പെടുത്തുന്നില്ല, കൂടാതെ അതിലും കൂടുതലും. ടെസ്റ്റിംഗ് കാഴ്ചപ്പാടിൽ നിന്ന്, ഒരു അപ്ലിക്കേഷൻ അല്ലെങ്കിൽ വെബ് പേജ് വ്യത്യസ്ത ബ്രൌസറുകളിലും അതുപോലെ വിവിധ ഉപകരണങ്ങളിലും പ്ലാറ്റ്ഫോമുകളിലും പ്രതികരിക്കുന്ന രൂപകൽപ്പനയും ബിൽറ്റ്-ഇൻ അനുകരിക്കുന്നവരുടെ ജാലകവും ഉപയോഗിച്ച് എങ്ങനെ പുനർനിർമ്മിക്കുന്നു. നിങ്ങളുടെ ബ്രൌസർ ഉപേക്ഷിക്കാതെ തന്നെ നിങ്ങൾക്ക് ഇതെല്ലാം ചെയ്യാൻ കഴിയുന്നതാണ് ഏറ്റവും മികച്ച ഭാഗം!

ചുവടെയുള്ള ട്യൂട്ടോറിയലുകൾ നിരവധി ജനപ്രിയ വെബ് ബ്രൌസറുകളിൽ ഈ ഡവലപ്പർ ടൂളുകൾ എങ്ങനെ ആക്സസ് ചെയ്യണമെന്നത് വഴി നിങ്ങളെ നയിക്കുന്നു.

ഗൂഗിൾ ക്രോം

പ്രവർത്തനത്തിന്റെ പ്രശ്നങ്ങൾ വെളിപ്പെടുത്തുന്നതിനും, പ്രവർത്തനത്തിലുണ്ടാക്കുന്ന Android, iOS എന്നിവയുൾപ്പെടെയുള്ള വ്യത്യസ്ത ഉപകരണ സ്ക്രീനുകൾ പകർത്താനും മറ്റ് നിരവധി ഉപയോഗപ്രദമായ പ്രവർത്തനങ്ങൾ അവതരിപ്പിക്കാനും കോഡുകളെ എഡിറ്റുചെയ്യാനും ഡീബഗ് ചെയ്യാനും Chrome- ന്റെ ഡവലപ്പർ ഉപകരണങ്ങൾ നിങ്ങളെ അനുവദിക്കുന്നു.

1. Chrome- ന്റെ പ്രധാന മെനു ബട്ടണിൽ ക്ലിക്കുചെയ്യുക, മൂന്ന് തിരശ്ചീന ലൈനുകളിലൂടെ അടയാളപ്പെടുത്തി ബ്രൗസറിന്റെ മുകളിൽ വലത് കോണിലാണ് അത് സ്ഥിതിചെയ്യുന്നത്.
2. ഡ്രോപ്പ്-ഡൗൺ മെനു ദൃശ്യമാകുമ്പോൾ, കൂടുതൽ ടൂളുകൾ ഓപ്ഷനിൽ നിങ്ങളുടെ മൗസ് കഴ്സർ ഹോവർ ചെയ്യുക.
3. ഒരു ഉപ-മെനു ഇപ്പോൾ പ്രത്യക്ഷപ്പെടണം. ഡവലപ്പർ ഉപകരണങ്ങൾ ലേബൽ ചെയ്ത ഓപ്ഷൻ തിരഞ്ഞെടുക്കുക. നിങ്ങൾക്ക് ഈ മെനു ഇനത്തിന് പകരം ഇനിപ്പറയുന്ന കീബോർഡ് കുറുക്കുവഴിയും ഉപയോഗിക്കാം: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. ഈ ഉദാഹരണ സ്ക്രീൻഷോട്ടിൽ കാണിച്ചിരിക്കുന്നതുപോലെ Chrome ഡവലപ്പർ ഉപകരണങ്ങൾ ഇന്റർഫേസ് ഇപ്പോൾ പ്രദർശിപ്പിക്കണം. നിങ്ങളുടെ Chrome പതിപ്പ് അനുസരിച്ച്, നിങ്ങൾ കാണുന്ന ഇനീഷ്യൽ ലേഔട്ട് ഇവിടെ അവതരിപ്പിക്കുന്നതിൽ നിന്നും അല്പം വ്യത്യസ്തമായിരിക്കും. സാധാരണയായി ഡവലപ്പർ ഉപകരണങ്ങളുടെ പ്രധാന ഹബ്, സാധാരണയായി സ്ക്രീനിന്റെ ചുവടെയോ വലത് വശത്തോ ആണ് സ്ഥിതിചെയ്യുന്നത്, ഇനിപ്പറയുന്ന ടാബുകൾ അടങ്ങിയിരിക്കുന്നു.
   മൂലകങ്ങൾ: CSS- ഉം HTML കോഡും പരിശോധിക്കുക, ഓൺ-ദി-ഫ്ളൈ എഡിറ്റ് ചെയ്യുക, നിങ്ങളുടെ മാറ്റങ്ങൾ യഥാസമയം കാണുന്നത് കാണുക.
   കൺസോൾ: നേരിട്ടുള്ള കമാൻഡ് എൻട്രിയും ഡയഗണോസ്റ്റിക് ഡീബഗ്ഗിംഗിനും Chrome- ന്റെ JavaScript കൺസോൾ അനുവദിക്കുന്നു.
   ഉറവിടങ്ങൾ: നിങ്ങൾക്ക് ശക്തമായ ഗ്രാഫിക്കൽ ഇന്റർഫേസ് വഴി JavaScript കോഡ് ഡീബഗ് ചെയ്യാൻ അനുവദിക്കുന്നു.
   നെറ്റ്വർക്ക്: പൂർണ്ണമായ അഭ്യർത്ഥനയും പ്രതികരണ തലക്കെട്ടുകളും അതുപോലെ തന്നെ വിപുലമായ ടൈമിംഗ് മെട്രിക്കുകളും ഉൾപ്പെടെ, സജീവ അപ്ലിക്കേഷൻ അല്ലെങ്കിൽ പേജിൽ ബന്ധപ്പെട്ട ബന്ധപ്പെട്ട പ്രവർത്തനങ്ങളെക്കുറിച്ചുള്ള വിശദമായ വിവരങ്ങൾ വർഗ്ഗീകരിക്കുകയും പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു.
   ടൈംലൈൻ: ഒരു പേജ് അല്ലെങ്കിൽ അപ്ലിക്കേഷൻ ലോഡ് അഭ്യർത്ഥന ആരംഭിക്കുമ്പോൾ ഉടൻ ബ്രൗസറിൽ നടക്കുന്ന ഓരോ പ്രവർത്തനത്തിന്റെയും ആഴത്തിലുള്ള വിശകലനം സാധ്യമാക്കുന്നു.
5. ഈ വിഭാഗങ്ങൾക്ക് പുറമേ, നിങ്ങൾക്ക് താഴെപ്പറയുന്ന ടൂളുകൾ ടൈംലൈൻ ടാബിന്റെ വലതുവശത്തുള്ള ഐക്കൺ വഴി ആക്സസ് ചെയ്യാൻ കഴിയും.
   പ്രൊഫൈൽ: CPU പ്രൊഫൈലർ , ഹീപ്പ് പ്രൊഫൈലർ വിഭാഗങ്ങളിൽ ബ്രോക്കൺ, സജീവ അപ്ലിക്കേഷൻ അല്ലെങ്കിൽ പേജിന്റെ സമഗ്രമായ മെമ്മറി ഉപയോഗം, മൊത്തത്തിലുള്ള നിർവ്വഹണ സമയം എന്നിവ നൽകുന്നു.
   സുരക്ഷ: സജീവ പേജ് അല്ലെങ്കിൽ അപ്ലിക്കേഷനോടെയുള്ള ഹൈലൈറ്റുകൾ സർട്ടിഫിക്കറ്റ് പ്രശ്നങ്ങൾ, മറ്റ് സുരക്ഷാ സംബന്ധിയായ പ്രശ്നങ്ങൾ എന്നിവ.
   റിസോഴ്സുകൾ: കുക്കികൾ, പ്രാദേശിക സംഭരണം, അപ്ലിക്കേഷൻ കാഷെ, നിലവിലെ വെബ് പേജ് അല്ലെങ്കിൽ അപ്ലിക്കേഷനിൽ ഉപയോഗിക്കുന്ന മറ്റ് പ്രാദേശിക ഡാറ്റ ഉറവിടങ്ങൾ എന്നിവ പരിശോധിക്കാൻ നിങ്ങൾക്ക് കഴിയും.
   ഓഡിറ്റുകൾ: ഒരു പേജ് അല്ലെങ്കിൽ ആപ്ലിക്കേഷന്റെ ലോഡ് ടൈമും പൊതുവായ പ്രകടനവും ഒപ്റ്റിമൈസുചെയ്യാനുള്ള വഴികൾ നൽകുന്നു.
6. ഐപാഡ്, ഐഫോൺ, സാംസങ് ഗാലക്സി എന്നിങ്ങനെ നിരവധി മികച്ച ആൻഡ്രോയ്ഡ്, ഐഒഎസ് മോഡലുകൾ ഉൾപ്പെടെയുള്ള ഡസൻ ഉപകരണങ്ങളിൽ ഒന്നിൽ പ്രത്യക്ഷപ്പെടാൻ കഴിയുന്ന ഒരു സിമുലേറ്ററിലേക്ക് സജീവ പേജ് കാണാൻ ഉപകരണ മോഡ് നിങ്ങളെ അനുവദിക്കുന്നു. നിങ്ങളുടെ പ്രത്യേക വികസനം അല്ലെങ്കിൽ ടെസ്റ്റിംഗ് ആവശ്യകതകൾക്ക് അനുയോജ്യമായ ഇച്ഛാനുസൃത സ്ക്രീൻ മിഴിവ്കൾ നിങ്ങൾക്ക് അനുകരിക്കാനുള്ള കഴിവും നൽകും. ഉപകരണ മോഡ് ഓണും ഓഫും ടോഗിൾ ചെയ്യാൻ, ഘടകങ്ങളുടെ ടാബിന്റെ ഇടതുവശത്ത് നേരിട്ട് സ്ഥിതി ചെയ്യുന്ന മൊബൈൽ ഫോൺ ഐക്കൺ തിരഞ്ഞെടുക്കുക.
7. മൂന്ന് ലംബമായി സജ്ജമാക്കിയ ഡോട്ടുകളും, മുകളിൽ സൂചിപ്പിച്ച ടാബുകളുടെ വലതുവശത്തായി സ്ഥിതി ചെയ്യുന്ന മെനു ബട്ടണിൽ ആദ്യം ക്ലിക്ക് ചെയ്തുകൊണ്ട് നിങ്ങളുടെ ഡെവലപ്പർ ടൂളുകളുടെ രൂപവും ഭാവവും ഇച്ഛാനുസൃതമാക്കാനും കഴിയും. ഈ ഡ്രോപ്പ്-ഡൗൺ മെനുവിൽ നിന്ന്, ഉപകരണത്തിന്റെ ഇൻസ്പെക്ടർ പോലെയുള്ള വിപുലമായ ഇനങ്ങൾ ലോക്കുചെയ്യുക, വ്യത്യസ്ത ഉപകരണങ്ങൾ കാണിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യാനാകും. ഈ വിഭാഗത്തിൽ കാണപ്പെടുന്ന ക്രമീകരണങ്ങളിലൂടെ dev Tools ഇന്റർഫേസ് വളരെ കസ്റ്റമൈസുചെയ്യാനാകുമെന്ന് നിങ്ങൾക്ക് കാണാം.

മോസില്ല ഫയർഫോക്സ്

ഫയർഫോഴ്സിന്റെ വെബ് ഡവലപ്പർ വിഭാഗത്തിൽ ഡിസൈനർമാർക്കും ഡവലപ്പർമാർക്കും ടെസ്റ്ററുകൾക്കും സ്റ്റൈൽ എഡിറ്റർ, പിക്സൽ ടാർഗെറ്റിംഗ് കെയ്റ്റപ്പോപ്പർ പോലെയുള്ള ഉപകരണങ്ങൾ ഉൾപ്പെടുന്നു.

ശുപാർശചെയ്ത വായന: ദി ഗ്രേറ്റ് 25 ഗ്രേസ്മോൺകെ ആൻഡ് ടാംപർമോകിക്കു യൂസർ സ്ക്രിപ്റ്റുകൾ

1. ഫയർഫോക്സിന്റെ പ്രധാന മെനു ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക, മൂന്ന് തിരശ്ചീന ലൈനുകൾ പ്രതിനിധീകരിക്കുന്നു, ബ്രൌസർ വിൻഡോയുടെ മുകളിൽ വലത് കോണിലുള്ളതാണ്.
2. ഡ്രോപ്പ്-ഡൗൺ മെനു ദൃശ്യമാകുമ്പോൾ, ഐക്കൺ ലേബൽ ഡവലപ്പർ തിരഞ്ഞെടുക്കുക. വെബ് ഡെവലപ്പർ മെനു ഇപ്പോൾ പ്രദർശിപ്പിക്കണം, താഴെ പറയുന്ന ഓപ്ഷനുകൾ അടങ്ങുന്നു. മിക്ക മെനു ഇനങ്ങളും അവയുമായി ബന്ധപ്പെട്ട കീബോർഡ് കുറുക്കുവഴികൾ നിങ്ങൾ കാണും.
   ടോഗിൾ ഉപകരണങ്ങൾ: ഡെവലപ്പർ ടൂൾസ് ഇൻറർഫേസിനെ പ്രദർശിപ്പിക്കുന്നു അല്ലെങ്കിൽ മറയ്ക്കുന്നു, സാധാരണയായി ബ്രൗസർ വിൻഡോയുടെ ചുവടെ സ്ഥിതിചെയ്യുന്നു. കീബോർഡ് കുറുക്കുവഴി: Mac OS X ( ALT (OPTION) + COMMAND + I ), വിൻഡോസ് ( CTRL + SHIFT + I )
   ഇൻസ്പെക്ടർ: സജീവ പേജിൽ റിമോട്ട് ഡീബഗ്ഗിംഗ് വഴി പോർട്ടബിൾ ഉപകരണത്തിൽ സി.എൽ. / എച്ച്ടിഎംഎൽ കോഡ് പരിശോധിക്കാനും കൂടാതെ / അല്ലെങ്കിൽ തിരുത്താനും നിങ്ങളെ അനുവദിക്കുന്നു. കീബോർഡ് കുറുക്കുവഴി: Mac OS X ( ALT (ഓപ്ഷൻ) + COMMAND + C ), വിൻഡോസ് ( CTRL + SHIFT + C )
   വെബ് കൺസോൾ: സജീവ പേജിൽ ജാവാസ്ക്രിപ്റ്റ് എക്സ്ചേഞ്ചുകളെ എക്സിക്യൂട്ട് ചെയ്യുന്നതിനും സുരക്ഷാ മുന്നറിയിപ്പുകൾ, നെറ്റ്വർക്ക് അഭ്യർത്ഥനകൾ, CSS സന്ദേശങ്ങൾ എന്നിവയും അതിൽ കൂടുതലും ലോഗ് ചെയ്ത ഡാറ്റയുടെ വൈവിധ്യമാർന്ന ഒരു സെറ്റ് അവലോകനം ചെയ്യാനും നിങ്ങളെ അനുവദിക്കുന്നു. കീബോർഡ് കുറുക്കുവഴി: Mac OS X ( ALT (OPTION) + COMMAND + K ), വിൻഡോസ് ( CTRL + SHIFT + K )
   ഡീബഗ്ഗർ: ബ്രേക്ക്പോയിന്റുകൾ സജ്ജമാക്കി ഡിം നോഡുകൾ, ബ്ലാക്ക് ബോക്സിംഗ് ബാഹ്യ ഉറവിടങ്ങൾ എന്നിവയും അതിലേറെയും കണ്ടുപിടിച്ചുകൊണ്ട് പിഴവുകൾ കൃത്യമായി നിർദേശിക്കുന്നതിനും പരിഹരിക്കുന്നതിനും ജാവാസ്ക്രിപ്റ്റ് ഡീബഗ്ഗർ സഹായിക്കുന്നു. ഇൻസ്പെക്ടറുടെ കാര്യത്തിലെന്നപോലെ , ഈ സവിശേഷത റിമോട്ട് ഡീബഗ്ഗിംഗിന് പിന്തുണയും നൽകുന്നു. കീബോർഡ് കുറുക്കുവഴി: Mac OS X ( ALT (OPTION) + COMMAND + S ), വിൻഡോസ് ( CTRL + SHIFT + S)
   സ്റ്റൈൽ എഡിറ്റർ: പുതിയ സ്റ്റൈൽഷീറ്റുകള് സൃഷ്ടിക്കാനും അവയെ സജീവ വെബ്പേജുമായി കൂട്ടിച്ചേര്ക്കുവാനും, നിലവിലുള്ള ഷീറ്റുകള് എഡിറ്റ് ചെയ്യാനും ഒരൊറ്റ ക്ലിക്കിലൂടെ നിങ്ങളുടെ ബ്രൌസറില് റെന്ഡര് എങ്ങനെ റെജിസ് ചെയ്യുമെന്ന് പരിശോധിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു. കീബോർഡ് കുറുക്കുവഴി: മാക് ഒഎസ് എക്സ്, വിൻഡോസ് ( SHIFT + F7 )
   പ്രകടനം: സജീവ പേജ് നെറ്റ്വർക്കിന്റെ പ്രകടനം, ഫ്രെയിം റേറ്റ് ഡാറ്റ, ജാവാസ്ക്രിപ്റ്റ് നിർവ്വഹണ സമയം, സംസ്ഥാനം, ചായം മലകയറ്റം എന്നിവയും അതിലധികവും ഒരു വിശദമായ പ്രവർത്തനം നൽകുന്നു. കീബോർഡ് കുറുക്കുവഴി: മാക് ഒഎസ് എക്സ്, വിൻഡോസ് ( SHIFT + F5 )
   നെറ്റ്വർക്ക്: അനുബന്ധ രീതി, ഉത്ഭവ ഡൊമെയ്ൻ, ടൈപ്പ്, വലുപ്പം, സമയം എന്നിവയുമൊത്ത് ബ്രൗസർ ആരംഭിച്ച ഓരോ നെറ്റ്വർക്ക് അഭ്യർത്ഥനയും ലിസ്റ്റുചെയ്യുക. കീബോർഡ് കുറുക്കുവഴി: Mac OS X ( ALT (OPTION) + COMMAND + Q ), വിൻഡോസ് ( CTRL + SHIFT + Q )
   ഡവലപ്പർ ഉപകരണബാർ: ഒരു ഇന്ററാക്ടീവ് കമാൻഡ് ലൈൻ ഇന്റർപ്രെറ്റർ തുറക്കുന്നു. ലഭ്യമായ എല്ലാ ആജ്ഞകളുടെയും അവയുടെ ശരിയായ സിന്റാക്സ് ലിസ്റ്റിന്റെയും ഇന്റർപ്രെട്ടറിൽ സഹായം നൽകുക. കീബോർഡ് കുറുക്കുവഴി: മാക് ഒഎസ് എക്സ്, വിൻഡോസ് ( SHIFT + F2 )
   Webide: ഫയർഫോക്സ് ഒഎസ് വഴിയോ അല്ലെങ്കിൽ ഫയർഫോക്സ് ഒഎസ് സിമുലേറ്ററിലൂടെയോ ഒരു യഥാർത്ഥ ഉപകരണം ഉപയോഗിച്ച് വെബ് ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കുന്നതിനും നടപ്പിലാക്കുന്നതിനും ഉള്ള കഴിവ് നൽകുന്നു. കീബോർഡ് കുറുക്കുവഴി: മാക് ഒഎസ് എക്സ്, വിൻഡോസ് ( SHIFT + F8 )
   ബ്രൌസർ കൺസോൾ: വെബ് കൺസോൾ പോലെ സമാനമായ പ്രവർത്തനം നൽകുന്നു (മുകളിൽ കാണുക). എന്നിരുന്നാലും, സജീവ വെബ് പേജ് എതിരായി എല്ലാ ഫയർഫോക്സ് ആപ്ലിക്കേഷനുകൾക്കും ( എക്സ്റ്റൻഷനുകളും ബ്രൌസർ-ലെവൽ ഫംഗ്ഷനുകളും ഉൾപ്പെടെ) മാത്രമാണ് നൽകപ്പെട്ട എല്ലാ ഡാറ്റയും. കീബോർഡ് കുറുക്കുവഴി: Mac OS X ( SHIFT + COMMAND + J ), വിൻഡോസ് ( CTRL + SHIFT + J )
   റെസ്പോൺസീവ് ഡിസൈൻ കാഴ്ച: ടാബ്ലറ്റുകൾ, സ്മാർട്ട്ഫോണുകൾ എന്നിവയുൾപ്പെടെ വിവിധ ഉപകരണങ്ങളെ അനുകരിക്കുന്നതിന് വ്യത്യസ്ത മിഴിവുകൾ, ലേഔട്ടുകൾ, സ്ക്രീൻ വലുപ്പങ്ങളിൽ ഒരു വെബ് പേജ് തൽക്ഷണം കാണാൻ അനുവദിക്കുന്നു. കീബോർഡ് കുറുക്കുവഴി: Mac OS X ( ALT (ഓപ്ഷൻ) + COMMAND + M ), വിൻഡോസ് ( CTRL + SHIFT + M )
   ഐഡ്രോപ്പാപർ: വ്യക്തിഗതമായി തിരഞ്ഞെടുത്ത പിക്സലുകൾക്കായി ഹെക്സ് കളർ കോഡ് പ്രദർശിപ്പിക്കുന്നു.
   സ്ക്രാച്ച്പാഡ് : ഒരു പോപ്പ്-ഔട്ട് ഫയർഫോക്സ് വിൻഡോയിൽ നിന്ന് നിങ്ങൾക്ക് JavaScript കോഡിന്റെ സ്നിപ്പറ്റുകൾ എഴുതുക, എഡിറ്റുചെയ്യുക, സമന്വയിപ്പിക്കുക, പ്രവർത്തിപ്പിക്കുക. കീബോർഡ് കുറുക്കുവഴി: മാക് ഒഎസ് എക്സ്, വിൻഡോസ് ( SHIFT + F4 )
   പേജ് ഉറവിടം: യഥാർത്ഥ ബ്രൗസർ അടിസ്ഥാനമാക്കിയുള്ള ഡെവലപ്പർ ഉപകരണം, ഈ ഓപ്ഷൻ സജീവ പേജിൽ ലഭ്യമായ സോഴ്സ് കോഡ് പ്രദർശിപ്പിക്കുന്നു. കീബോർഡ് കുറുക്കുവഴി: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   കൂടുതൽ ഉപകരണങ്ങൾ നേടുക: മോസില്ലയുടെ ഔദ്യോഗിക ആഡ്-ഓൺസ് സൈറ്റിൽ വെബ് ഡവലപ്പറിന്റെ ടൂൾബോക്സ് ശേഖരം തുറക്കുന്നു, ഇതിൽ ഡഗ്ലർ ഫയർബഗ്, ഗ്രേസ്മോൺകി എന്നിവ പോലുള്ള ധാരാളം വിപുലീകരണങ്ങൾ ഉണ്ട്.

Microsoft Edge / Internet Explorer

ഇന്റർനെറ്റ് എക്സ്പ്ലോററിന്റെ മുൻ പതിപ്പുകൾ മുതൽ ഇന്റർഫേസ് ആരംഭിച്ച കീബോർഡ് കുറുക്കുവഴിക്കായി ഒരു FG Developer Tools എന്ന് സാധാരണയായി പരാമർശിക്കപ്പെടുന്നു, IE11, Microsoft Edge ലെ dev toolset അതിന്റെ ആരംഭം മുതൽ വളരെ ദീർഘമായ ഒരു ഗ്രൂപ്പ് മോണിറ്ററുകൾ, ഡീബഗ്ഗർമാർ, എമുലേയറുകൾ, ഓൺ-ദി-ഫ്ളക്സ് കമ്പൈലറുകൾ എന്നിവ.

1. മൂന്ന് ഡോട്ടുകളാൽ പ്രതിനിധാനം ചെയ്യപ്പെടുന്നതും, ബ്രൌസർ വിൻഡോയുടെ മുകളിൽ വലത് കോണിലുള്ളതുമായ, കൂടുതൽ പ്രവർത്തനങ്ങൾ മെനുവിൽ ക്ലിക്കുചെയ്യുക. ഡ്രോപ്പ്-ഡൗൺ മെനു ലഭ്യമാകുമ്പോൾ, F12 ഡവലപ്പർ ഉപകരണങ്ങൾ ലേബൽ ചെയ്ത ഓപ്ഷൻ തിരഞ്ഞെടുക്കുക. ഞാൻ ഇതിനകം സൂചിപ്പിച്ച പോലെ, നിങ്ങൾക്ക് F12 കീബോർഡ് കുറുക്കുവഴി വഴി ഉപകരണങ്ങൾ ആക്സസ് ചെയ്യാൻ കഴിയും.
2. വികസന ഇന്റർഫേസ് ഇപ്പോൾ പ്രദർശിപ്പിക്കേണ്ടതുണ്ട്, സാധാരണയായി ബ്രൌസർ വിൻഡോയുടെ ചുവടെ. താഴെ പറയുന്ന ടൂളുകൾ ലഭ്യമാണു്, ഓരോന്നിന്റെയും ബന്ധപ്പെട്ട ടാബി ഹെഡിങ് അല്ലെങ്കിൽ അതോടൊപ്പം കീബോർഡ് കുറുക്കുവഴി ഉപയോഗിയ്ക്കുന്നു.
   DOM എക്സ്പ്ലോറർ: സജീവ പേജിൽ സ്റ്റൈൽഷീറ്റുകളും HTML ഫയലുകളും എഡിറ്റുചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു, പരിഷ്കരിച്ച ഫലങ്ങൾ നിങ്ങൾ പോകുമ്പോൾ നൽകുന്നു. ബാധകമായ സ്ഥലത്ത് സ്വയം പൂർത്തിയാക്കാൻ IntelliSense പ്രവർത്തനം പ്രയോജനപ്പെടുത്തുന്നു. കീബോർഡ് കുറുക്കുവഴി: (CTRL + 1)
   കൺസോൾ: കൌണ്ടറുകൾ, ടൈമറുകൾ, ട്രെയ്സുകൾ, ഒരു സമ്പന്ന API വഴി ഇഷ്ടാനുസൃത സന്ദേശങ്ങൾ എന്നിവയുൾപ്പെടെ ഡീബഗ്ഗിംഗ് വിവരങ്ങൾ സമർപ്പിക്കുന്നതിനുള്ള ശേഷി നൽകുന്നു. കൂടാതെ, ഒരു സജീവ വെബ് പേജിലേക്ക് കോഡ് പകർത്താനും തൽസമയ വേരിയബിളുകളിൽ നൽകിയിരിക്കുന്ന മൂല്യങ്ങൾ പരിഷ്ക്കരിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു. കീബോർഡ് കുറുക്കുവഴി: (CTRL + 2)
   ഡീബഗ്ഗർ: നിങ്ങൾ ബ്രേക്ക്പോയിന്റുകൾ സെറ്റുകൾ സജ്ജമാക്കുകയും ആവശ്യപ്പെടുകയും ചെയ്താൽ നിങ്ങളുടെ കോഡ് ഡീബഗ് ചെയ്യുമ്പോൾ ഡീബഗ് ചെയ്യാം. കീബോർഡ് കുറുക്കുവഴി: (CTRL + 3)
   നെറ്റ്വർക്ക്: പേജ് ലോഡ് ചെയ്യുമ്പോൾ ബ്രൗസർ ആരംഭിച്ച ഓരോ നെറ്റ്വർക്ക് അഭ്യർത്ഥനയും പ്രോട്ടോക്കോൾ വിശദാംശങ്ങൾ, ഉള്ളടക്ക തരം, ബാൻഡ്വിഡ്ത്ത് ഉപയോഗം എന്നിവയും അതിലേറെയും ഉൾപ്പെടെയുള്ള നിർവ്വചനവും. കീബോർഡ് കുറുക്കുവഴി: (CTRL + 4)
   പ്രകടനം: വിശദാംശങ്ങൾ ഫ്രെയിം റേറ്റിംഗ്, CPU ഉപയോഗം, മറ്റ് പ്രകടനം അനുബന്ധ മെട്രിക്സ് എന്നിവ പേജ് പേജ് ലോഡു സമയവും മറ്റ് പ്രവർത്തനങ്ങളും വേഗത്തിലാക്കാൻ സഹായിക്കുന്നതിന്. കീബോർഡ് കുറുക്കുവഴി: (CTRL + 5)
   മെമ്മറി: വ്യത്യസ്ത സമയ ഇടവേളകളിൽ സ്നാപ്പ്ഷോട്ടുകൾക്കൊപ്പം ഒരു മെമ്മറി ഉപയോഗ ടൈംലൈൻ പ്രദർശിപ്പിച്ചുകൊണ്ട് നിലവിലെ വെബ് പേജിൽ മെമ്മറി ലീക്കുകൾ വേർപെടുത്തി പരിഹരിക്കാനും സഹായിക്കുന്നു. കീബോർഡ് കുറുക്കുവഴി: (CTRL + 6)
   എമുലേഷൻ: സ്മാർട്ട്ഫോണുകൾ, ടാബ്ലറ്റുകൾ, മറ്റ് ഡിവൈസുകൾ എന്നിവ അനലോലിങ് ചെയ്യുന്ന വിവിധ പ്രവർത്തനങ്ങളിലും സ്ക്രീൻ വലുപ്പത്തിലും എങ്ങനെയാണ് സജീവ പേജ് റെൻഡർ ചെയ്യുന്നത് എന്ന് നിങ്ങൾക്ക് കാണിച്ചുതരുന്നു. ഉപയോക്തൃ ഏജന്റും പേജ് ഓറിയന്റേഷനും പരിഷ്കരിക്കാനും അതുപോലെ ഒരു അക്ഷാംശവും രേഖാംശവും നൽകിക്കൊണ്ട് വ്യത്യസ്ത ജിയോലൊക്കേഷൻകൾ രൂപപ്പെടുത്തുകയും സാധ്യമാക്കുന്നു. കീബോർഡ് കുറുക്കുവഴി: (CTRL + 7)
3. കൺസോൾ പ്രദർശിപ്പിക്കുന്നതിന്, മറ്റ് ഉപകരണങ്ങളിൽ ഏതെങ്കിലും ഒരു സ്ക്വയർ ബട്ടണിനൊപ്പം അതിനുള്ളിലുള്ള വലത് ബ്രാക്കറ്റുമായി ക്ലിക്ക് ചെയ്യുക. ഇത് വികസന ഉപകരണങ്ങളുടെ ഇന്റർഫേസ് മുകളിലെ വലത് കോണിലാണ് സ്ഥിതിചെയ്യുന്നത്.
4. ഡീക്ക് ചെയ്യുന്നതിനു്, ഡവലപ്പർ ടൂൾസ് ഇന്റർഫെയിസ് അതു് വെവ്വേറെ വിൻഡോ ആയി മാറുന്നു, രണ്ട് കാസ്കേഡിംഗ് റെക്ടാഞ്ചുകൾ പ്രതിനിധാനം ചെയ്യുന്ന ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക അല്ലെങ്കിൽ താഴെ പറയുന്ന കീബോർഡ് കുറുക്കുവഴികൾ ഉപയോഗിക്കുക: CTRL + P. നിങ്ങൾക്ക് രണ്ടാമത്തെ തവണ CTRL + P അമർത്തുന്നതിലൂടെ അവരുടെ യഥാർത്ഥ ലൊക്കേഷനിൽ നിന്ന് ഉപകരണങ്ങൾ തിരികെ വയ്ക്കാനാകും .

ആപ്പിൾ സഫാരി (ഒഎസ് എക്സ് മാത്രം)

സഫാരിയുടെ വൈവിധ്യ ഡി ഡവലപ്മെന്റ് സെറ്റ് അവരുടെ ഡിസൈൻ, പ്രോഗ്രാമിങ് ആവശ്യങ്ങൾക്കായി ഒരു മാക്കിനെ ഉപയോഗപ്പെടുത്തുന്ന വലിയ ഡവലപ്പർ കമ്മ്യൂണിറ്റിയെയാണ് പ്രതിഫലിപ്പിക്കുന്നത്. ശക്തമായ കൺസോൾ, പരമ്പരാഗത ലോഗ്ഗിങ്, ഡീബഗ്ഗിംഗ് ഫീച്ചറുകൾ എന്നിവ കൂടാതെ, പ്രതികരിക്കാൻ എളുപ്പമുള്ള പ്രതിവിധാന മോഡും നിങ്ങളുടെ സ്വന്തം ബ്രൌസർ എക്സ്റ്റൻഷനുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു ഉപകരണവും നൽകുന്നു.

1. നിങ്ങളുടെ സ്ക്രീനിന്റെ മുകളിലുള്ള ബ്രൗസർ മെനുവിൽ സഫാരിയിൽ ക്ലിക്കുചെയ്യുക. ഡ്രോപ്പ്-ഡൌൺ മെനു ദൃശ്യമാകുമ്പോൾ മുൻഗണനകൾ തിരഞ്ഞെടുക്കുക. നിങ്ങൾക്ക് ഈ മെനു ഇനം സ്ഥാനത്ത് ഇനിപ്പറയുന്ന കീബോർഡ് കുറുക്കുവഴിയും ഉപയോഗിക്കാനാകും: COMMAND + COMMA (,)
2. നിങ്ങളുടെ ബ്രൗസർ വിൻഡോ മറയ്ക്കുക, സഫാരിയുടെ മുൻഗണനകൾ ഇന്റർഫേസ് ഇപ്പോൾ പ്രദർശിപ്പിക്കേണ്ടതുണ്ട്. തലക്കെട്ടിലെ വലതുഭാഗത്തായി സ്ഥിതി ചെയ്യുന്ന നൂതനമായ ഐക്കണിൽ ക്ലിക്കുചെയ്യുക.
3. വിപുലമായ മുൻഗണനകൾ ഇപ്പോൾ ദൃശ്യമാകണം. ഈ സ്ക്രീനിന്റെ ചുവടെയുള്ള മെനുവിലെ "ഡവലപ്പ്മെൻറ് മെനു കാണിക്കുക" എന്ന ചെക്ക്ബോക്സിൽ ഒരു ചെക്ക് ബോക്സും കാണാം. ബോക്സിൽ കാണിക്കപ്പെടുന്ന ചെക്ക് അടയാളം ഇല്ലെങ്കിൽ, അവിടെ ഒരെണ്ണം സ്ഥാപിക്കാൻ ഒരിക്കൽ ക്ലിക്ക് ചെയ്യുക.
4. ചുവടെ ഇടത് കോണിലുള്ള ചുവപ്പ് 'x' എന്നതിൽ ക്ലിക്കുചെയ്ത് മുൻഗണനാ ഇന്റർഫേസ് അടയ്ക്കുക.
5. ബുക്ക്മാർക്കുകൾ , വിൻഡോകൾക്കിടയിൽ വികസിപ്പിച്ച ബ്രൗസർ മെനുവിൽ നിങ്ങൾ ഇപ്പോൾ ഒരു പുതിയ ഓപ്ഷൻ ശ്രദ്ധിക്കണം. ഈ മെനുവിൽ ക്ലിക്ക് ചെയ്യുക. താഴെ പറയുന്ന ഓപ്ഷനുകൾ അടങ്ങുന്ന ഒരു ഡ്രോപ്പ്-ഡൗൺ മെനു ഇപ്പോൾ പ്രദർശിപ്പിക്കേണ്ടതുണ്ട്.
   ഇതിനൊപ്പം പേജ് തുറക്കുക: നിലവിൽ നിങ്ങളുടെ Mac- ൽ ഇൻസ്റ്റാളുചെയ്തിരിക്കുന്ന മറ്റ് ബ്രൗസറുകളിൽ സജീവ വെബ് പേജ് തുറക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
   ഉപയോക്തൃ ഏജൻറ്: Chrome, Firefox, Internet Explorer എന്നിവയുൾപ്പെടെ ഒരു ഡസൻ മുൻകൂട്ടി നിർണയിച്ച ഉപയോക്തൃ ഏജന്റു വിലകളിൽ നിന്നും നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം, കൂടാതെ നിങ്ങളുടെ സ്വന്തം ഇച്ഛാനുസൃത സ്ട്രിംഗ് നിർവചിക്കുക.
   റെസ്പോൺസീവ് ഡിസൈൻ മോഡ് നൽകുക: വിവിധ ഉപകരണങ്ങളിലും വിവിധ സ്ക്രീൻ റിസല്യൂഷനുകളിലും അത് ദൃശ്യമാകുന്നതുപോലെ നിലവിലെ പേജ് റെൻഡർ ചെയ്യുക.
   വെബ് ഇൻസ്പെക്ടർ കാണിക്കുക: സഫാരിയുടെ dev ടൂളുകളുടെ പ്രധാന ഇൻറർഫേസ് ആരംഭിക്കുന്നു, സാധാരണയായി നിങ്ങളുടെ ബ്രൗസർ സ്ക്രീനിന്റെ അടിയിൽ സ്ഥാപിക്കുകയും താഴെപ്പറയുന്ന വിഭാഗങ്ങൾ ഉൾപ്പെടുത്തുക: ഘടകങ്ങൾ , നെറ്റ്വർക്ക് , റിസോഴ്സസ് , ടൈംലൈനുകൾ , ഡീബഗ്ഗർ , സ്റ്റോറേജ് , കൺസോൾ .
   പിശക് കൺസോൾ കാണിക്കുക: പിശകുകൾ, മുന്നറിയിപ്പുകൾ, മറ്റ് തിരയാറേറ്റഡ് ലോഗ് ഡാറ്റ എന്നിവ പ്രദർശിപ്പിക്കുന്ന കൺസോൾ ടാബിലേക്ക് നേരിട്ട് dev ടൂളുകൾ ഇൻഫർമേഷൻ ആരംഭിക്കുന്നു.
   പേജ് ഉറവിടം ദൃശ്യമാക്കുക: സ്രോതസ്സുകൾക്കായുള്ള സ്രോതസ്സായ കോഡ് ഉറവിടം ടാബിൽ തുറക്കുന്നു.
   പേജ് റിസോഴ്സുകൾ കാണിക്കുക: പേജ് സ്രോതസ്സ് ഓപ്ഷൻ കാണിക്കുക അതേ ഫംഗ്ഷൻ നടപ്പിലാക്കുന്നു.
   സ്നിപ്പെറ്റ് എഡിറ്റർ കാണിക്കുക: പുതിയൊരു വിൻഡോ തുറക്കുന്നു, അവിടെ നിങ്ങൾക്ക് CSS, HTML കോഡ് നൽകാം, അതിന്റെ ഔട്ട്പുട്ട് ഓൺ-ദി-ഫ്ളൈ ഓണ് പ്രിവ്യൂ.
   വിപുലീകരണ ബിൽഡർ കാണിക്കുക: CSS, HTML, JavaScript എന്നിവ ഉപയോഗിച്ച് സഫാരി വിപുലീകരണങ്ങൾ സൃഷ്ടിക്കാനോ എഡിറ്റുചെയ്യാനോ ഉള്ള കഴിവ് നൽകുന്നു.
   ടൈംലൈൻ റിക്കോർഡിംഗ് കാണിക്കുക: ടൈംലൈനുകളുടെ ടാബ് തുറക്കുകയും നെറ്റ്വർക്ക് അഭ്യർത്ഥനകൾ, ലേഔട്ട്, റെൻഡർചെയ്യൽ വിവരങ്ങൾ, തൽസമയ ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ എന്നിവ പ്രദർശിപ്പിക്കാൻ ആരംഭിക്കുകയും ചെയ്യുന്നു.
   കാഷെ ശൂന്യമാക്കുക: നിങ്ങളുടെ ഹാർഡ് ഡ്രൈവിൽ നിലവിൽ സംഭരിച്ചിരിക്കുന്ന മുഴുവൻ ക്യാഷും ഇല്ലാതാക്കുക.
   കാഷെ അപ്രാപ്തമാക്കുക: കാഷ് ചെയ്യുന്നതിൽ നിന്ന് സഫാരി നിർത്തുന്നതിനാൽ ഓരോ ഉള്ളടക്കവും സെർവറിൽ നിന്നും എല്ലാ ഉള്ളടക്കവും തിരിച്ചെടുക്കപ്പെടും.
   ഇമേജുകൾ പ്രവർത്തന രഹിതമാക്കുക: എല്ലാ വെബ് പേജുകളിലും റെൻഡർ ചെയ്യുന്നതിൽ നിന്നും ചിത്രങ്ങൾ തടയുന്നു.
   ശൈലികൾ അപ്രാപ്തമാക്കുക: ഒരു പേജ് ലോഡ് ചെയ്യുമ്പോൾ CSS പ്രോപ്പർട്ടികൾ അവഗണിക്കുന്നു.
   JavaScript അപ്രാപ്തമാക്കുക: എല്ലാ പേജുകളിലും ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ നിയന്ത്രിക്കുക.
   വിപുലീകരണങ്ങൾ പ്രവർത്തനരഹിതമാക്കുക: ഇൻസ്റ്റാളുചെയ്ത എല്ലാ വിപുലീകരണങ്ങളും ബ്രൗസറിനുള്ളിൽ പ്രവർത്തിക്കുന്നത് തടയുന്നു.
   സൈറ്റ് നിർദ്ദിഷ്ട ഹാക്കുകൾ അപ്രാപ്തമാക്കുക: സജീവ വെബ്പേജിലെ നിർദ്ദിഷ്ട പ്രശ്നത്തെ കൈകാര്യം ചെയ്യാൻ സഫാരി മാറിയെങ്കിൽ, ഈ മാറ്റങ്ങൾ ആ മാറ്റങ്ങൾ തടയുന്നു, അതിനാൽ ഈ മാറ്റങ്ങൾ പരിചയപ്പെടുത്തുന്നതിന് മുമ്പ് പേജ് ലോഡ് ചെയ്യപ്പെടും.
   പ്രാദേശിക ഫയൽ നിയന്ത്രണങ്ങൾ അപ്രാപ്തമാക്കുക: നിങ്ങളുടെ പ്രാദേശിക ഡിസ്കുകളിലെ ഫയലുകൾ ആക്സസ് ചെയ്യാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു, ഇത് സുരക്ഷാ കാരണങ്ങളാൽ സ്ഥിരമായി നിയന്ത്രിക്കപ്പെട്ട പ്രവർത്തനമാണ്.
   ക്രോസ്-ഒറിജിൻ നിയന്ത്രണങ്ങൾ അപ്രാപ്തമാക്കുക: XSS- ഉം XFS- ഉം മറ്റ് അപകടങ്ങളെ തടയുന്നതിന് ഈ നിയന്ത്രണങ്ങൾ സ്ഥിരസ്ഥിതിയായി സ്ഥാപിക്കുന്നു. എന്നിരുന്നാലും, അവ പലപ്പോഴും വികസന ആവശ്യങ്ങൾക്കായി താൽകാലികമായി അപ്രാപ്തമാക്കേണ്ടതുണ്ട്.
   സ്മാർട്ട് തിരയൽ ഫീൽഡിൽ നിന്നും JavaScript അനുവദിക്കുക: പ്രവർത്തനക്ഷമമാക്കിയാൽ, വിലാസ ബാറിൽ നേരിട്ട് ഉൾപ്പെടുത്തിയിട്ടുള്ള javascript ഉള്ള URL കൾ നൽകാനുള്ള കഴിവ് നൽകുന്നു.
   SHA-1 സര്ട്ടിഫിക്കറ്റുകള് അസുരക്ഷിതമായി കൈകാര്യം ചെയ്യുക: SHA-1 ആല്ഗരിതം ഉപയോഗിച്ച് SSL സര്ട്ടിഫിക്കറ്റുകള് കാലഹരണപ്പെട്ടതും അപകടകരവുമാണെന്ന് കണക്കാക്കപ്പെടുന്നു.