वेब घटक DevTools in Chrome ऑफिस डॉक्स के साथ

वर्णन

वेब कंपोनेंट और वेब कंपोनेंट लाइब्रेरी के लिए डेवलपर टूलिंग वेब कंपोनेंट DevTools का लक्ष्य वेब कंपोनेंट के साथ काम करने वाले सभी डेवलपर हैं।

प्रदान की गई टूलिंग एक नया क्रोम Devtools पैनल बनाती है, जो वर्तमान पृष्ठ पर कस्टम तत्वों को त्वरित रूप से देखने की अनुमति देती है, और उक्त घटकों की विशेषताओं और गुणों के संशोधन को सक्षम करती है।

वेब कंपोनेंट DevTools कस्टम एलिमेंट्स मेनिफेस्ट (https://github.

com/webcomponents/custom-elements-manifest) वेब घटकों का विश्लेषण करने के लिए।

विशेषताएं: वेब घटक DevTools, उदाहरण के लिए, सीधे ब्राउज़र के UI से, डेवलपर को उन्नत सुविधाएं प्रदान करता है: - पृष्ठ पर कस्टम तत्वों की सूची बनाना, और पृष्ठ के अंदर पहुंच योग्य iframes - सूची में कस्टम तत्वों को फ़िल्टर करना - की विशेषताओं का निरीक्षण और संशोधन करना कस्टम तत्व - कस्टम तत्वों के गुणों (यहां तक ​​​​कि वस्तुओं और सरणियों) का निरीक्षण और संशोधन - प्रेषित घटनाओं का अवलोकन - कस्टम तत्व के कार्यों को कॉल करना, और वापसी मूल्यों को लॉग करना - पृष्ठ पर वेब घटकों के स्रोत कोड को देखना - वेब घटकों के साथ सीधे बातचीत करना कंसोल के माध्यम से क्यों? वेब घटकों को विकसित करने की प्रक्रिया में, चाहे वह लिट जैसी लाइब्रेरी के साथ हो, या किसी भी प्रकार की लाइब्रेरी के बिना, ऐसी स्थितियाँ आती हैं जिनमें आप अपने घटकों पर थोड़ा अधिक नियंत्रण रखना चाहते हैं जो कि नियमित ब्राउज़र devtools आपको देता है।

उदाहरण के लिए आप चाहते हैं: तत्व के गुणों को टॉगल करें तत्व के गुणों को टॉगल करें जब ईवेंट तत्व से कॉल फ़ंक्शंस भेजे जाते हैं और जब आप वेब घटकों के साथ काम कर रहे हों, तो शैडो डोम आमतौर पर मौजूद होता है, जिससे यह काफी मुश्किल हो जाता है तत्व का मार्ग खोजें।

और भले ही आपको रास्ता मिल गया हो, दस्तावेज़ लिखना होगा।

querySelector ("माय-चयनकर्ता-स्ट्रिंग> तत्व-नाम")।

setAttribute("my-attr", "foo") हर बार जब आप किसी मान को संशोधित करना चाहते हैं तो यह काफी बोझिल होता है।

इस उपयोग मामले के लिए वेब घटक DevTools बनाए गए थे: डेवलपर को एक बटन के क्लिक के साथ सीधे devtools विंडो से विशेषताओं, गुणों और इसलिए उनके तत्व की स्थिति को आसानी से संशोधित करने में सक्षम बनाने के लिए।

मुद्दे: DevTools का उपयोग करते समय आपके सामने आने वाली कोई भी समस्या GitHub रिपॉजिटरी (https://github.

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

अतिरिक्त जानकारी:

- मात्सुउ द्वारा ऑफ़र किया गया
- औसत रेटिंग : 5 सितारे (इसे पसंद किया)
- डेवलपर इस ईमेल पते की सुरक्षा स्पैममबोट से की जा रही है। इसे देखने के लिए आपको जावास्क्रिप्ट सक्षम करना होगा।

वेब घटक DevTools web extension ऑफिस डॉक्स के साथ एकीकृत Chromium ऑनलाइन