വെബ് പേജ് ഘടകങ്ങൾ എങ്ങനെ പരിശോധിക്കാം

ഏത് വെബ് പേജിന്റെയും HTML, CSS എന്നിവ കാണുക

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

മിക്ക വെബ് ബ്രൌസറുകളും ഒരു പരിശോധന ഉപകരണം ഡൌൺലോഡ് ചെയ്യില്ല അല്ലെങ്കിൽ ഒരു ആഡ്-ഓൺ ഇൻസ്റ്റാൾ ചെയ്യുന്നില്ല. പകരം, അവ നിങ്ങളെ പേജ് ഘടകം വലത്-ക്ലിക്കുചെയ്ത് എലമെൻറ് പരിശോധിക്കുക അല്ലെങ്കിൽ പരിശോധിക്കുക തിരഞ്ഞെടുക്കുക. എന്നിരുന്നാലും, നിങ്ങളുടെ ബ്രൗസറിൽ പ്രക്രിയ വളരെ കുറച്ചേ ആയിരിക്കാം.

Chrome- ൽ ഘടകങ്ങൾ പരിശോധിക്കുക

Google Chrome- ന്റെ ഏറ്റവും പുതിയ പതിപ്പുകൾ, പേജിൽ അതിന്റെ ഏതാനും മാർഗങ്ങളിലൂടെ പരിശോധിക്കുക, അതിന്റെ എല്ലാ അന്തർനിർമ്മിത Chrome DevTools- ഉം ഉപയോഗിക്കുക:

• പേജിലെ വല്ലതും (അല്ലെങ്കിൽ ഒരു ശൂന്യ പ്രദേശം) വലത് ക്ലിക്കുചെയ്ത് പരിശോധിക്കുക തിരഞ്ഞെടുക്കുക
• Ctrl + Shift + I കീബോർഡ് കുറുക്കുവഴി നൽകുക
• കൂടുതൽ ടൂളുകൾ> ഡവലപ്പർ ടൂൾസ് ഓപ്ഷൻ ആക്സസ് ചെയ്യാൻ Chrome മെനു ഉപയോഗിക്കുക

എളുപ്പത്തിൽ പകർത്താനോ എഡിറ്റുചെയ്യാനോ HTML ലൈനുകൾ എഡിറ്റുചെയ്യാനോ അല്ലെങ്കിൽ ഒളിപ്പിക്കുകയോ എല്ലാം ഇല്ലാതാക്കുകയോ ചെയ്യുക (പേജ് റീലോഡ് ചെയ്യുന്നതുവരെ) Chrome DevTools നിങ്ങളെ അനുവദിക്കുന്നു.

പേജിന്റെ വശത്തെ DevTools തുറക്കുമ്പോൾ, അത് എവിടെയാണ് സ്ഥിതിചെയ്യുന്നത്, അത് എവിടെ നിൽക്കുന്നു, പേജ് പുറത്തെടുക്കുക, എല്ലാ പേജുകളുടെയും ഫയലുകൾക്കായി തിരഞ്ഞു, നിർദ്ദിഷ്ട പരിശോധനയ്ക്കായി പേജിൽ നിന്നുള്ള ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുക, ഫയലുകൾ, URL കൾ എന്നിവ പകർത്തുക, ഒരു കൂട്ടം ഇഷ്ടാനുസൃതമാക്കാം ക്രമീകരണങ്ങൾ.

ഫയർഫോക്സിലെ ഘടകങ്ങൾ പരിശോധിക്കുക

Chrome പോലെയുള്ള, ഇൻസ്പെക്ടർ എന്നു വിളിക്കാവുന്ന ചില ഉപകരണങ്ങൾ ഫയർഫോക്സ് ഉണ്ട്.

• പേജിലെ ഒരു ശൂന്യമായ സ്ഥലത്ത് റൈറ്റ്-ക്ലിക്ക് ചെയ്യുക അല്ലെങ്കിൽ ഒരു ഘടകം തിരഞ്ഞെടുത്ത് എലമെന്റ് പരിശോധിക്കുക തിരഞ്ഞെടുക്കുക
• കീബോർഡിനൊപ്പം Ctrl + Shift + T അല്ലെങ്കിൽ Ctrl + Shift + I നൽകുക
• ഫയർ ഫോക്സ് മെനുവിൽ ഡവലപ്പർ > ഇൻസ്പെക്ടർ ക്ലിക്ക് ചെയ്യുക
• ടൂൾസ് മെനുവിൽ നിന്ന്, വെബ് ഡവലപ്പർ> ഇൻസ്പെക്ടർ ക്ലിക്കുചെയ്യുക

നിങ്ങളുടെ മൌസ് ഫയർഫോക്സിൽ വിവിധ മൂലകങ്ങളെ നീക്കുമ്പോൾ, ഇൻസ്പെക്ടർ ഉപകരണം മൂലകത്തിന്റെ ഉറവിട കോഡ് വിവരങ്ങൾ സ്വയം കണ്ടെത്തുന്നു. ഒരു ഘടകം ക്ലിക്കുചെയ്യുക, "ഓൺ-ദി-ഫ്ലഡ് തിരയൽ" നിർത്തും, ഇൻസ്പെക്ടർ വിൻഡോയിൽ നിന്നും നിങ്ങൾക്ക് എലമെൻറിൽ പരിശോധിക്കാം.

പിന്തുണയ്ക്കുന്ന എല്ലാ നിയന്ത്രണങ്ങളും കണ്ടെത്തുന്നതിന് ഒരു ഘടകം വലത് ക്ലിക്കുചെയ്യുക. നിങ്ങൾക്ക് പേജ് എഡിറ്റുചെയ്യുന്നതോ, ആന്തരിക അല്ലെങ്കിൽ ബാഹ്യ HTML കോഡോ എഡിറ്റ് ചെയ്യുകയോ DOM വസ്തുക്കൾ, സ്ക്രീൻഷോട്ട് കാണിക്കുകയോ നോഡ് ഇല്ലാതാക്കുകയോ പോലുള്ള പുതിയ കാര്യങ്ങൾ നിങ്ങൾക്ക് എളുപ്പത്തിൽ ഉപയോഗിക്കാം, എല്ലാ പേജിന്റെ CSS ഉം അതിലേറെയും കാണുക.

Opera ലെ ഘടകങ്ങൾ പരിശോധിക്കുക

Chrome ന് സമാനമായ DOM ഇൻസ്പെക്ടർ ടൂളുമായി ഒപെറായ്ക്ക് എലമെന്റുകളും പരിശോധിക്കാം. ഇത് എങ്ങനെ നേടണമെന്നത് ഇതാ:

• കീബോർഡ് കുറുക്കുവഴി Ctrl + Shift + I ഉപയോഗിക്കുക
• മെനുവിലേക്ക് പോകുക> കൂടുതൽ ടൂളുകൾ> ഡെവലപ്പർ മെനു കാണിക്കുക , തുടർന്ന് മെനു> ഡവലപ്പർ> ഡെവലപ്പർ ടൂളുകൾ വഴി മെനു തുറക്കുക
• പേജിലെ ഏത് ഘടകത്തിലെയും വലതുക്ലിക്ക് മെനുവിൽ നിന്നും, ഘടകാംശം പരിശോധിക്കുക തിരഞ്ഞെടുക്കുക

Internet Explorer ലെ ഘടകങ്ങൾ പരിശോധിക്കുക

ഡവലപ്പർ ടൂൾസ് എന്ന സമാന ഇൻക്യുപ്മെന്റ് എലമെന്റ് ടൂൾ Internet Explorer ൽ ലഭ്യമാണ്:

• കീബോർഡിൽ F12 അമർത്തുക
• ഉപകരണങ്ങൾ> F12 ഡവലപ്പർ മെനു ഓപ്ഷൻ ഉപയോഗിക്കുക (നിങ്ങൾ ഉപകരണങ്ങൾ മെനു കാണുന്നില്ലെങ്കിൽ Alt + X തട്ടുക)
• പേജിൽ വലത് ക്ലിക്കുചെയ്ത് എലമെന്റ് പരിശോധിക്കുക ക്ലിക്കുചെയ്യുക

ഈ പുതിയ മെനുവിൽ ഒരു എലമെൻറ് എലമെന്റ് ടൂൾ ഐഇനുണ്ട്, അത് അതിന്റെ HTML ഉം CSS വിശദാംശങ്ങളും കാണുന്നതിന് ഏതെങ്കിലും പേജ് ഘടകത്തിൽ ക്ലിക്ക് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. നിങ്ങൾ DOM എക്സ്പ്ലോറർ ടാബിലൂടെ ബ്രൌസുചെയ്യുമ്പോൾ എലിക്കുമ്പോഴോ എലമെന്റ് ഹൈലൈറ്റിംഗിനെ എളുപ്പത്തിൽ പ്രാപ്തമാക്കാനും കഴിയും.

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