DevTools एक्सटेंशन

Text.js DevTools एक्सटेंशन “कंसोल” के बगल में एक Text.js पैनल जोड़ता है। यह कंसोल में रेंडर हो रहे ऐप की जांच करता है।

• कंपोनेंट: हर कंसोल रूट का React ट्री, जिसमें props, हुक, keys और उनके पीछे के tx-box / tx-text सीन नोड सेल में व्यवस्थित होते हैं।
• फ़्रेम: सेल ग्रिड के रूप में मौजूदा फ़्रेम। किस कंपोनेंट ने सेल को पेंट किया, यह देखने के लिए उस पर होवर करें। नोड चुनने के लिए क्लिक करें। यह लाइव कंसोल में हाइलाइट होता है।
• टाइमलाइन: हर फ़्रेम के React, लेआउट, पेंट और एनकोड का समय, छोड़े गए और आउटपुट किए गए फ़्रेम, फ़्रेम पेसिंग और %c span।
• कंट्रोल: आउटपुट रोकें और फिर से शुरू करें, लेआउट वायरफ़्रेम टॉगल करें, ग्रिड का आकार पिन या फ़िट करें, फ़्रेम को टेक्स्ट के रूप में कॉपी करें।

#इंस्टॉलेशन

एक्सटेंशन को packages/devtools-extension से बिल्ड करके अनपैक किए गए रूप में लोड किया जाता है:

bun run --cwd packages/devtools-extension build

1. chrome://extensions खोलें और डेवलपर मोड चालू करें।
2. अनपैक किया गया लोड करें पर क्लिक करें और packages/devtools-extension/dist चुनें।
3. अपना ऐप रीलोड करें और DevTools खोलें। पेज के कंसोल रूट बनाते ही Text.js पैनल दिखने लगता है।

बिल्ड release/textjs-devtools-<version>.zip फ़ाइल भी लिखता है, जो Chrome Web Store के लिए तैयार होती है।

#कंपोनेंट

किसी कंपोनेंट के props, कॉल के क्रम में उसके हुक (State, Ref, Memo, Effect वगैरह, मौजूदा वैल्यू के साथ) और उसके रेंडर किए गए सीन नोड की स्थिति, आकार और बॉक्स इनसेट सेल में देखने के लिए उसे चुनें। किसी पंक्ति पर होवर करने से कंसोल में नोड हाइलाइट होता है। होस्ट नोड कंपोनेंट के बीच के tx-box और tx-text एलिमेंट दिखाता या छिपाता है।

पैनल खुला होने पर कमिट के बाद ट्री रीफ़्रेश होता है। वैल्यू दिखाने के लिए सारांश हैं, लाइव ऑब्जेक्ट नहीं।

#फ़्रेम

फ़्रेम इंस्पेक्टर रेंडरर का सेल बफ़र बनाता है: हर ग्लिफ़, फ़ोरग्राउंड, बैकग्राउंड और एट्रिब्यूट। किसी सेल पर होवर करने से उसका कैरेक्टर और रंग, पेंट क्रम में उसके ऊपर का सीन नोड (overflow, स्क्रॉल ऑफ़सेट और zIndex का पालन करते हुए) और उस नोड को रेंडर करने वाले कंपोनेंट दिखते हैं। क्लिक करने से कंपोनेंट में नोड चुना जाता है और रेंडरर के अपने हाइलाइट ओवरले से लाइव कंसोल में हाइलाइट होता है।

#टाइमलाइन

हर बार रेंडरर का एक फ़्रेम है:

छोड़े गए फ़्रेम फीके दिखते हैं: कुछ नहीं बदला, इसलिए कुछ लॉग नहीं हुआ। पेसिंग चार्ट आउटपुट किए गए फ़्रेम के बीच का अंतर 66 ms के न्यूनतम अंतराल के मुकाबले दिखाता है।

समय की माप console.log() पर रुक जाती है। मैसेज की फ़ॉर्मैटिंग और पेंटिंग DevTools के अंदर होती हैं और पेज से देखी नहीं जा सकतीं, इसलिए टाइमलाइन उन्हें नहीं दिखाती। फ़्रेम के बीच कमिट होने वाले कन्करेंट रेंडर कमिट के रूप में गिने जाते हैं, उनका समय नहीं मापा जाता।

#काम करने का तरीका

React DevTools की तरह, एक्सटेंशन पेज चलने से पहले एक ग्लोबल हुक इंस्टॉल करता है:

globalThis.__TEXTJS_DEVTOOLS_HOOK__

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

मैसेज पेज → कॉन्टेंट स्क्रिप्ट → सर्विस वर्कर → पैनल के क्रम में जाते हैं। कॉन्टेंट स्क्रिप्ट हर पेज पर चलती हैं ताकि आपका ऐप बूट होने से पहले हुक मौजूद हो। एक्सटेंशन सिर्फ़ यही ऐक्सेस मांगता है। यह कोई रिमोट कोड लोड नहीं करता और मशीन से बाहर कुछ नहीं भेजता।

#निजता

एक्सटेंशन कोई डेटा इकट्ठा नहीं करता। यह कोई नेटवर्क रिक्वेस्ट नहीं करता, कुछ स्टोर नहीं करता और इसमें कोई ऐनलिटिक्स नहीं है। कंपोनेंट ट्री, फ़्रेम और समय की माप सिर्फ़ उसी ब्राउज़र में पेज और DevTools पैनल के बीच जाती हैं, और आपके DevTools बंद करने पर हटा दी जाती हैं। फ़्रेम कॉपी करें पर क्लिक करने से फ़्रेम का टेक्स्ट आपके क्लिपबोर्ड पर लिखा जाता है।

#सीमाएं

• Chrome और Chromium पर आधारित ब्राउज़र, वर्शन 111 या बाद का।
• एक्सटेंशन इंस्टॉल होने से पहले शुरू हुए ऐप को रीलोड करना ज़रूरी है।
• किसी टैब के सिर्फ़ सबसे ऊपर के फ़्रेम की जांच होती है।
• समय की माप performance.now() से मिलती है, जिसकी सटीकता ब्राउज़र घटाकर लगभग 0.1 ms कर देते हैं।