हमनेgrapesjs-devtools एक ओपन-सोर्स (MIT) प्लगइन जारी किया है जो संपादक में एक डॉक करने योग्य डेवलपर पैनल जोड़ता है। विचार सरल है: आपके ब्राउज़र के DevTools की तरह, लेकिन पृष्ठ का निरीक्षण करने के बजाय, आप संपादक की आंतरिक स्थिति का निरीक्षण करते हैं। हिटCtrl+Shift+D (macOSCMD+Shift+D पर) और पूरा संपादक खुल जाता है: घटक ट्री, लागू शैलियाँ, ईवेंट स्ट्रीम, एक REPL, और यहां तक कि एक AI सहायक जो कार्यशील कोड उदाहरणों के साथ GrapesJS प्रश्नों का उत्तर देता है।
हेडर में मानक वेबपेज प्रीसेट और GrapesJS स्टूडियो के बीच लाइव डेमो स्विच, हॉटकी के साथ पैनल खोलें, और चारों ओर प्रहार करें।
यह क्यों मौजूद है
GrapesJS एक शक्तिशाली उपकरण है, लेकिन इसकी अधिकांश आंतरिक स्थिति अदृश्य है। घटक, लक्षण, सीएसएस नियम, प्रबंधक, इवेंट बस यह सब बैकबोन मॉडल के अंदर रहता है, और जब कुछ गलत हो जाता है, तो आप इसे ब्राउज़र कंसोल से हाथ से खोदते हैं। जिस किसी ने भी प्लगइन या कस्टम घटक लिखा है, वह लूप जानता है: किसी ईवेंट की सदस्यता लें, पेलोड लॉग करें, ट्वीक करें, सदस्यता समाप्त करें, दोहराएं।
DevTools उस पीस को हटा देता है। वह सब कुछ जिसे मैन्युअल रूप से खुदाई की आवश्यकता होती थी, अब एक पैनल में लाइव दिखाई दे रहा है।
अंदर क्या है
पैनल मॉड्यूल से बनाया गया है, यदि आपको इसकी आवश्यकता नहीं है तो प्रत्येक को कॉन्फ़िगरेशन में अक्षम किया जा सकता है।
घटक एक जीवित घटक वृक्ष जिसमें दो-तरफ़ा चयन कैनवास के साथ सिंक होता है। ट्री में एक नोड पर क्लिक करें और घटक कैनवास पर चयनित हो जाता है, और इसके विपरीत। विशेषताएँ और लक्षण पैनल में संपादन योग्य हैं, और किसी भी घटक को JSON के रूप में कॉपी किया जा सकता है।
शैलियाँ देखती हैं कि कौन से सीएसएस नियम वास्तव में चयनित तत्व पर लागू होते हैं, जिसमें कैस्केड-ओवरराइड गुण और इनलाइन संपादन के माध्यम से मारा जाता है। साथ ही प्रोजेक्ट-वाइड नियम खोज और एक मृत-नियम स्कैनर जो नियमों को कुछ भी मेल नहीं खाता है।
ईवेंट एक एकल श्रोता के माध्यम से प्रत्येक संपादक ईवेंट का एक लॉग है: समूह और पाठ फ़िल्टर, विराम, आवृत्ति आँकड़े, और प्रत्येक घटना के लिए पेलोड निरीक्षण। सूची वर्चुअलाइज्ड है, इसलिए यहां तक कि एक शोर परियोजना भी पैनल को फ्रीज नहीं करेगी।
दायरे, इतिहास, स्वत: पूर्ण औरeditor. तैयार किए गए स्निपेट में और ($0चयनित घटक) के साथeditorएक REPL को कंसोल करें। अब ब्राउज़र DevTools को केवल संपादक से कुछ "पूछने" के लिए खुला रखने की आवश्यकता नहीं है।
अपने प्रोजेक्ट डेटा का एक JSON ट्री, स्नैपशॉट, निर्यात/आयात और सिंटैक्स हाइलाइटिंग के साथ लाइव HTML/CSS के बीच संरचनात्मक अंतर संग्रहीत करें।
प्रबंधकों को ब्लॉक, लक्षणों, चयनकर्ताओं, उपकरणों और लोड किए गए प्लगइन्स का अवलोकन मिलता है। किसी चयनकर्ता पर क्लिक करने से सीधे इसे स्टाइल्स मॉड्यूल में फ़िल्टर किया जा सकता है।
perf लाइव मेट्रिक्स (घटक गणना, CSS नियम गणना, संपादक श्रोता गणना, स्टैक आकार पूर्ववत करें), एक कैनवास फिर से रेंडर टाइमर, और एक सरल सिद्धांत पर निर्मित एक रिसाव डिटेक्टर: एक आधार रेखा लें, बाद में तुलना करें।
कैनवास के शीर्ष पर कैनवास ओवरले: नेस्टिंग डेप्थ, चयनित तत्व के बॉक्स मॉडल, कैनवास बॉडी के लिए एक टॉगलpointer-eventsऔर स्क्रॉल-टू-सेलेक्ट द्वारा रंग-कोडित सभी घटकों को हाइलाइट करें।
स्नैपशॉट निर्यात/आयात और वैकल्पिक लोकलस्टोरेज दृढ़ता के साथ पूर्ण प्रोजेक्ट स्थिति (डेटा + चयन + डिवाइस) को कैप्चर और पुनर्स्थापित करते हैं।
एआई सहायक
एआई टैब अपने स्वयं के अनुभाग का हकदार है। यह "चैट के लिए चैट" नहीं है: सहायक संपादक के संदर्भ को समझता है। "तत्व चुनें" दबाएं, यूआई के किसी भी हिस्से पर एक पैनल, एक बटन, एक प्रबंधक पर क्लिक करें या कैनवास पर एक घटक का चयन करें, और कुछ ऐसा पूछें "मैं यहां एक और बटन कैसे जोड़ूं?"। आपको एक स्पष्टीकरण और उपयोग के लिए तैयार GrapesJS कोड उदाहरण मिलता है, जिसे कॉपी करने योग्य कोड ब्लॉक के साथ मार्कडाउन में स्ट्रीम किया जाता है।
क्लाउड, चैटजीपीटी और जेमिनी समर्थित हैं। डिफ़ॉल्ट रूप से, अनुरोध सीधे ब्राउज़र से जाते हैं (विकास के लिए आसान यूआई आपको इसके बारे में ईमानदारी से चेतावनी देता है), लेकिन उत्पादन के लिए दो स्मार्ट मोड हैं:
- प्रॉक्सी मोड इसे अपने समापन बिंदु पर इंगित करता है और एपीआई कुंजी आपके सर्वर को कभी नहीं छोड़ती है। ब्राउज़र प्रदाता के मूल अनुरोध निकाय को आपके प्रॉक्सी पर भेजता है, जो कुंजी जोड़ता है और प्रतिक्रिया को वापस स्ट्रीम करता है। एक न्यूनतम प्रॉक्सी वस्तुतः एक्सप्रेस की एक दर्जन पंक्तियाँ हैं, README में एक उदाहरण है।
- OpenAI-संगत बैकएंड OpenRouter, Ollama, LM Studio, Together, और कोई अन्य गेटवे। ओलामा के माध्यम से एक निःशुल्क स्थानीय सहायक चाहते हैं? हो गया।
अपने संपादक में एक अच्छा अतिथि बनना
हमने devtools को एक विनम्र हाउसगेस्ट की तरह व्यवहार करने के लिए कड़ी मेहनत की:
- कोई लीक नहीं। सभी ईवेंट सब्सक्रिप्शन एक एकल से
EditorBridgeगुजरती हैं जो पैनल बंद होने पर उन्हें फाड़ देती है जब पैनल अपनी आधार रेखा पर वापस आ जाता हैeditor._events। - आलसी। मॉड्यूल पहले टैब पर माउंट होते हैं; टाइमर और आरएएफ लूप निष्क्रियता पर रुकते हैं।
- गैर-इनवेसिव। पैनल एक
position: fixedओवरले है और कभी भी कैनवास आईफ्रेम में नहीं लिखता है (एकमात्र अपवाद स्पष्टpointer-eventsटॉगल है)। - शून्य रनटाइम निर्भरता। यूआई सादा डीओएम है, बड़ी सूचियों को वर्चुअलाइज्ड किया जाता है, और पेड़ बच्चों को 1000+ घटकों के साथ आलसी परियोजनाओं को उत्तरदायी रहता है।
जहां हम निजी एपीआई में झांकते हैं (पर्फ श्रोता मीट्रिक बैकबोन की आंतरिक संरचना को पढ़ता है), यह पैनल को क्रैश करने के बजाय अलग-थलगtry/catchहो जाता है और नीचा दिखाताn/aहै।
इसे अजमाएं
npm install grapesjs-devtools import grapesjs from 'grapesjs'; import devtools from 'grapesjs-devtools'; import 'grapesjs-devtools/dist/style.css'; const editor = grapesjs.init({ container: '#gjs', plugins: [devtools], }); GrapesJS के >= 0.21.0साथ संगत। सब कुछ कॉन्फ़िगर करने योग्य है: डॉक स्थिति (नीचे/दाएं/बाएं), आकार, थीम (अंधेरा/प्रकाश/ऑटो), हॉटकी, मॉड्यूल।
पैनल भी एक्स्टेंसिबल है: एक कस्टम मॉड्यूल सिर्फ एक वर्ग है जिसके साथ /mount/deactivateजोdestroy सुरक्षित सदस्यता के लिएEditorBridgeएक संदर्भ प्राप्त करता है।