വെബ് ഘടകം DevTools ഇൻ Chrome OffiDocs ഉപയോഗിച്ച്

വിവരണം

വെബ് ഘടകങ്ങൾക്കും വെബ് ഘടക ലൈബ്രറികൾക്കുമുള്ള ഡെവലപ്പർ ടൂളിംഗ് വെബ് ഘടകങ്ങളുമായി പ്രവർത്തിക്കുന്ന എല്ലാ ഡെവലപ്പർമാരെയും ലക്ഷ്യം വച്ചുള്ളതാണ്.

നൽകിയിരിക്കുന്ന ടൂളിംഗ് ഒരു പുതിയ Chrome Devtools പാനൽ സൃഷ്‌ടിക്കുന്നു, അത് നിലവിലെ പേജിലെ ഇഷ്‌ടാനുസൃത ഘടകങ്ങളിലേക്ക് വേഗത്തിൽ നോക്കാൻ അനുവദിക്കുന്നു, കൂടാതെ പറഞ്ഞ ഘടകങ്ങളുടെ ഗുണങ്ങളും ഗുണങ്ങളും പരിഷ്‌ക്കരിക്കുന്നത് പ്രവർത്തനക്ഷമമാക്കുന്നു.

Web Component DevTools ഇഷ്‌ടാനുസൃത ഘടകങ്ങൾ മാനിഫെസ്റ്റ് ഉപയോഗിക്കുന്നു (https://github.

com/webcomponents/custom-elements-manifest) വെബ് ഘടകങ്ങളെ വിശകലനം ചെയ്യാൻ.

ഫീച്ചറുകൾ: വെബ് ഘടകം DevTools, ബ്രൗസറിൻ്റെ UI-ൽ നിന്ന് നേരിട്ട് ഡെവലപ്പർക്ക് വിപുലമായ സവിശേഷതകൾ നൽകുന്നു, ഉദാഹരണത്തിന്: - പേജിലെ ഇഷ്‌ടാനുസൃത ഘടകങ്ങൾ ലിസ്റ്റുചെയ്യുന്നു, കൂടാതെ പേജിനുള്ളിൽ ആക്‌സസ് ചെയ്യാവുന്ന iframes - ലിസ്റ്റിലെ ഇഷ്‌ടാനുസൃത ഘടകങ്ങൾ ഫിൽട്ടർ ചെയ്യുന്നു - ഇതിൻ്റെ ആട്രിബ്യൂട്ടുകൾ പരിശോധിച്ച് പരിഷ്‌ക്കരിക്കുന്നു ഇഷ്‌ടാനുസൃത ഘടകങ്ങൾ - ഇഷ്‌ടാനുസൃത ഘടകങ്ങളുടെ പ്രോപ്പർട്ടികൾ (ഒബ്‌ജക്‌റ്റുകളും അറേകളും പോലും) പരിശോധിക്കുകയും പരിഷ്‌ക്കരിക്കുകയും ചെയ്യുക - അയച്ച ഇവൻ്റുകൾ നിരീക്ഷിക്കുക - ഇഷ്‌ടാനുസൃത ഘടകത്തിൻ്റെ കോൾ ഫംഗ്‌ഷനുകൾ, ഒപ്പം റിട്ടേൺ മൂല്യങ്ങൾ ലോഗ് ചെയ്യുക - പേജിലെ വെബ് ഘടകങ്ങളുടെ സോഴ്‌സ് കോഡ് കാണുക - വെബ് ഘടകങ്ങളുമായി നേരിട്ട് സംവദിക്കുക കൺസോളിലൂടെ എന്തുകൊണ്ട്? വെബ് ഘടകങ്ങൾ വികസിപ്പിക്കുന്ന പ്രക്രിയയിൽ, അത് Lit പോലുള്ള ഒരു ലൈബ്രറിയിലായാലും അല്ലെങ്കിൽ ഏതെങ്കിലും തരത്തിലുള്ള ലൈബ്രറിയില്ലാതെയായാലും, സാധാരണ ബ്രൗസർ devtools നിങ്ങൾക്ക് നൽകുന്നതിനേക്കാൾ കുറച്ച് കൂടുതൽ നിയന്ത്രണം നിങ്ങളുടെ ഘടകങ്ങളിൽ നിങ്ങൾ ആഗ്രഹിക്കുന്ന സാഹചര്യങ്ങൾ വരുന്നു.

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

നിങ്ങൾക്ക് പാത ലഭിച്ചാലും, പ്രമാണം എഴുതേണ്ടതുണ്ട്.

querySelector("my-selector-string > element-name").

setAttribute("my-attr", "foo") ഓരോ തവണയും നിങ്ങൾ ഒരു മൂല്യം പരിഷ്കരിക്കാൻ ആഗ്രഹിക്കുന്നത് വളരെ ബുദ്ധിമുട്ടാണ്.

ഈ ഉപയോഗത്തിനായി വെബ് ഘടകങ്ങളുടെ DevTools സൃഷ്ടിച്ചു: ഒരു ബട്ടണിൻ്റെ ക്ലിക്കിലൂടെ devtools വിൻഡോയിൽ നിന്ന് നേരിട്ട് ആട്രിബ്യൂട്ടുകൾ, പ്രോപ്പർട്ടികൾ, അതിനാൽ അവയുടെ മൂലകത്തിൻ്റെ അവസ്ഥ എന്നിവ എളുപ്പത്തിൽ പരിഷ്‌ക്കരിക്കാൻ ഡവലപ്പറെ പ്രാപ്‌തമാക്കുന്നതിന്.

പ്രശ്‌നങ്ങൾ: DevTools ഉപയോഗിക്കുമ്പോൾ നിങ്ങൾ നേരിടുന്ന ഏത് പ്രശ്‌നങ്ങളും GitHub ശേഖരണത്തിലേക്ക് സമർപ്പിക്കണം (https://github.

com/Matsuuu/web-component-devtools/issues).

അധിക വിവരം:

- Matsuuu ഓഫർ ചെയ്തത്
- ശരാശരി റേറ്റിംഗ്: 5 നക്ഷത്രങ്ങൾ (ഇത് ഇഷ്ടപ്പെട്ടു)
- ഡെവലപ്പർ ഈ ഇമെയിൽ വിലാസം സ്പാമിൽ നിന്നും മുക്തമാണ്. ഇത് കാണുന്നതിനായി ജാവാ സ്ക്രിപ്റ്റ് എനേബിൾ ചെയ്യണം.

വെബ് ഘടകം DevTools വെബ് extension OffiDocs-മായി സംയോജിപ്പിച്ചിരിക്കുന്നു Chromium ഓൺലൈൻ