पेश है मेमोरी इंस्पेक्टर

Kim-Anh Tran

इस लेख में, Chrome 91 पर काम करने वाले मेमोरी इंस्पेक्टर के बारे में बताया गया है. इसकी मदद से, अपने arrayBuffer, TypedArray, DataView, और Wasm Memory की जांच की जा सकती है.

शुरुआती जानकारी

क्या आपको कभी अपने arrayBuffer के डेटा को समझना था? मेमोरी इंस्पेक्टर के पहले, DevTools की मदद से सिर्फ़ arrayBuffers के बारे में सीमित जानकारी दी जा सकती थी. डीबगिंग सेशन के दौरान, स्कोप व्यू की जांच में सिर्फ़ अरे बफ़र में एक वैल्यू की सूची देखी जा सकती थी. इस वजह से, पूरे डेटा को समझना मुश्किल हो गया था. उदाहरण के लिए, स्कोप व्यू, बफ़र को अरे की बड़ी रेंज के तौर पर दिखाता है. नीचे इसका उदाहरण दिया गया है:

बफ़र में किसी खास रेंज तक नेविगेट करना मुश्किल काम था. आखिर में, उपयोगकर्ता को उस इंडेक्स तक पहुंचने के लिए नीचे की ओर स्क्रोल करना पड़ता है. भले ही, किसी दूसरी जगह पर जाना आसान हो सकता है, लेकिन वैल्यू की inspecting का यह तरीका मुश्किल है: यह बताना मुश्किल है कि इन संख्याओं का क्या मतलब है. खास तौर पर, अगर उन्हें सिंगल बाइट के तौर पर नहीं, बल्कि 32-बिट पूर्णांक के रूप में इंटरप्रेट किया जाए, तो क्या होगा?

स्टोरेज इंस्पेक्टर की मदद से वैल्यू की जांच करना

Chrome 91 के साथ हम मेमोरी इंस्पेक्टर पेश कर रहे हैं, जो अरे बफ़र की जांच करने का एक टूल है. बाइनरी डेटा को देखने के लिए, आपने पहले मेमोरी जांचने वाले टूल देखे होंगे. इन टूल की मदद से, ग्रिड में बाइनरी कॉन्टेंट को उनके पतों के साथ देखा जा सकता है. इनकी मदद से, इनकी वैल्यू को अलग-अलग तरीके से समझा जा सकता है. मेमोरी इंस्पेक्टर आपके लिए यह सुविधा लेकर आ रहा है. मेमोरी इंस्पेक्टर की मदद से, अब कॉन्टेंट को देखा और नेविगेट किया जा सकता है. साथ ही, इस्तेमाल की जाने वाली वैल्यू को समझने के लिए टाइप चुने जा सकते हैं. यह सीधे बाइट के बगल में ASCII वैल्यू दिखाता है और यह उपयोगकर्ता को अलग-अलग एंडियननेस चुनने की सुविधा देता है. मेमोरी इंस्पेक्टर की भूमिका नीचे देखें:

क्या आप इसे आज़माना है? मेमोरी इंस्पेक्टर खोलने का तरीका और अरे बफ़र (या TypedArray, DataView या Wasm Memory) देखने का तरीका जानने के लिए, मेमोरी इंस्पेक्टर पर मौजूद हमारे दस्तावेज़ देखें. टॉय के इन उदाहरणों को आज़माकर देखें (JS, Wasm, और C++ के लिए).

स्टोरेज इंस्पेक्टर डिज़ाइन करना

इस हिस्से में, हम देखेंगे कि मेमोरी इंस्पेक्टर को वेब कॉम्पोनेंट का इस्तेमाल करके कैसे डिज़ाइन किया गया है. साथ ही, हम अपने डिज़ाइन के लक्ष्यों में से एक लक्ष्य दिखाएंगे और इसे लागू करने के तरीके के बारे में बताएंगे. अगर आपको इस बारे में और जानना है, तो मेमोरी इंस्पेक्टर के लिए हमारा डिज़ाइन दस्तावेज़ देखें.

आपने वेब कॉम्पोनेंट पर माइग्रेट करना पर हमारी ब्लॉग पोस्ट देखी होगी. इसमें जैक ने वेब कॉम्पोनेंट का इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट बनाने का तरीका बताने वाली हमारी इंटरनल गाइड पब्लिश की है. वेब कॉम्पोनेंट पर माइग्रेट होने और मेमोरी इंस्पेक्टर पर किए गए हमारे काम की वजह से, हमने नए सिस्टम को आज़माने का फ़ैसला लिया. नीचे एक डायग्राम दिया गया है, जिसमें वे कॉम्पोनेंट दिखाए गए हैं जिन्हें हमने मेमोरी इंस्पेक्टर बनाने के लिए बनाया है. ध्यान दें कि अंदरूनी तौर पर हम इसे लीनियर मेमोरी इंस्पेक्टर कहते हैं:

LinearMemoryInspector कॉम्पोनेंट, एक पैरंट कॉम्पोनेंट है, जो उन सबकॉम्पोनेंट को जोड़ता है जो मेमोरी इंस्पेक्टर में सभी एलिमेंट बनाते हैं. आम तौर पर, इसके लिए Uint8Array और address की ज़रूरत होती है. इनमें से हर एक बदलाव करने पर, यह डेटा अपने चाइल्ड में भेज देता है. इससे री-रेंडरिंग होती है. LinearMemoryInspector खुद ही तीन सबकॉम्पोनेंट को रेंडर करता है:

1. LinearMemoryViewer (वैल्यू दिखाता है),
2. LinearMemoryNavigator (नेविगेशन की अनुमति देकर) और
3. LinearMemoryValueInterpreter (बुनियादी डेटा के अलग-अलग तरीके दिखाता है).

बाद वाला कॉम्पोनेंट अपने-आप एक पैरंट कॉम्पोनेंट होता है, जो ValueInterpreterDisplay (वैल्यू दिखाने वाले) और ValueInterpreterSettings (डिसप्ले में किस टाइप को देखना है) को रेंडर करता है.

हर कॉम्पोनेंट को यूज़र इंटरफ़ेस (यूआई) के सिर्फ़ एक छोटे कॉम्पोनेंट को दिखाने के लिए डिज़ाइन किया गया है. इससे, ज़रूरत पड़ने पर कॉम्पोनेंट को फिर से इस्तेमाल किया जा सकता है. जब भी किसी कॉम्पोनेंट पर नया डेटा सेट किया जाता है, तो री-रेंडरिंग ट्रिगर होती है. इससे कॉम्पोनेंट पर सेट किए गए डेटा में बदलाव दिखता है. हमारे कॉम्पोनेंट वाले वर्कफ़्लो का एक उदाहरण नीचे दिखाया गया है. इसमें उपयोगकर्ता, पता बार में पता बदलता है. इससे नया डेटा सेट करके अपडेट ट्रिगर होता है. इस मामले में यह पता दिखेगा:

LinearMemoryInspector, खुद को LinearMemoryNavigator पर लिसनर के तौर पर जोड़ता है. addressChanged फ़ंक्शन को address-changed इवेंट पर ट्रिगर किया जाना है. जैसे ही उपयोगकर्ता अब पता इनपुट में बदलाव करता है, यह ऊपर बताए गए इवेंट को भेजता है. इस तरह, addressChanged फ़ंक्शन को कॉल किया जाता है. यह फ़ंक्शन अब पता को अंदरूनी तौर पर सेव करता है और data(address, ..) सेटर का इस्तेमाल करके, इसके सबकॉम्पोनेंट को अपडेट करता है. सबकॉम्पोनेंट, पता को अंदरूनी तौर पर सेव करते हैं और अपने व्यू को फिर से रेंडर करते हैं. इससे, उस पते पर मौजूद कॉन्टेंट दिखता है.

डिज़ाइन का लक्ष्य: परफ़ॉर्मेंस और मेमोरी के इस्तेमाल को बफ़र साइज़ के हिसाब से तय करना

मेमोरी इंस्पेक्टर के डिज़ाइन के दौरान, हमारे दिमाग में एक बात यह थी कि मेमोरी इंस्पेक्टर की परफ़ॉर्मेंस, बफ़र साइज़ से अलग होनी चाहिए.

जैसा कि आपने पिछले हिस्से में देखा है, वैल्यू को रेंडर करने के लिए LinearMemoryInspector कॉम्पोनेंट, UInt8Array का इस्तेमाल करता है. साथ ही, हम यह भी पक्का करना चाहते थे कि मेमोरी इंस्पेक्टर को पूरे डेटा को अपने पास रखने की ज़रूरत न पड़े, क्योंकि मेमोरी इंस्पेक्टर इसका सिर्फ़ एक हिस्सा दिखाता है (उदाहरण के लिए, Wasm मेमोरी 4 जीबी तक बड़ी हो सकती है और हम मेमोरी इंस्पेक्टर में 4 जीबी सेव नहीं करना चाहते).

इसलिए, यह पक्का करने के लिए कि मेमोरी इंस्पेक्टर की रफ़्तार और मेमोरी इस्तेमाल, हमारे दिखाए गए असल बफ़र से अलग है, हम LinearMemoryInspector कॉम्पोनेंट को मूल बफ़र की सिर्फ़ सबरेंज रखने देते हैं.

यह काम करे, इसके लिए LinearMemoryInspector को पहले दो और आर्ग्युमेंट लेने होंगे: memoryOffset और outerMemoryLength. memoryOffset उस ऑफ़सेट को दिखाता है, जिस पर पास किया गया Uint8Array शुरू होता है. साथ ही, यह सही डेटा पतों को रेंडर करने के लिए ज़रूरी होता है. outerMemoryLength, ओरिजनल बफ़र की लंबाई होती है. इसकी ज़रूरत, यह समझने के लिए होती है कि हम कौनसी रेंज दिखा सकते हैं:

इस जानकारी की मदद से, हम यह पक्का कर सकते हैं कि हम अब भी पूरे डेटा की ज़रूरत के बिना ही पहले की तरह (address के आस-पास का कॉन्टेंट) व्यू को रेंडर कर सकते हैं. इसलिए, अगर किसी ऐसे दूसरे पते का अनुरोध किया जाता है जो अलग-अलग रेंज में आता है, तो क्या करना चाहिए? ऐसी स्थिति में, LinearMemoryInspector एक RequestMemoryEvent ट्रिगर करता है, जो रखी गई मौजूदा रेंज को अपडेट करता है. इसका एक उदाहरण नीचे दिखाया गया है:

इस उदाहरण में, उपयोगकर्ता मेमोरी पेज पर जाता है (मेमोरी इंस्पेक्टर, डेटा के अलग-अलग हिस्सों को दिखाने के लिए पेजिंग का इस्तेमाल कर रहा है), जिससे एक PageNavigationEvent ट्रिगर होता है. यह अपने-आप RequestMemoryEvent को ट्रिगर करता है. वह इवेंट, नई रेंज को फ़ेच करता है. इसके बाद, यह रेंज डेटा सेट करके LinearMemoryInspector कॉम्पोनेंट में लागू हो जाती है. इस वजह से, हम फ़ेच किया गया नया डेटा दिखाते हैं.

ओह, क्या आपको पता है? Wasm और C/C++ कोड की मदद से भी, मेमोरी की जांच की जा सकती है

मेमोरी इंस्पेक्टर JavaScript में ArrayBuffers के लिए ही उपलब्ध नहीं है, बल्कि C/C++ रेफ़रंस/पॉइंटर की ओर से बताई गई Wasm मेमोरी और मेमोरी की जांच करने के लिए भी इसका इस्तेमाल किया जा सकता है (हमारे DWARF-एक्सटेंशन का इस्तेमाल करके - अगर आपने अभी तक ऐसा नहीं किया है, तो इसे आज़माएं! आधुनिक टूल की मदद से WebAssembly को डीबग करने के बारे में यहां जानें. वेब पर C++ को नेटिव डीबग करने के लिए, मेमोरी इंस्पेक्टर के बारे में एक छोटा सा नज़रिया:

नतीजा

इस लेख में, मेमोरी इंस्पेक्टर के बारे में बताया गया है और इसके डिज़ाइन की झलक दिखाई गई है. हमें उम्मीद है कि मेमोरी इंस्पेक्टर यह समझने में आपकी मदद करेगा कि आपके ArrayBuffer :- में क्या हो रहा है. अगर आपके पास इसे बेहतर बनाने के सुझाव हैं, तो हमें बताएं और गड़बड़ी की शिकायत करें!

झलक दिखाने वाले चैनलों को डाउनलोड करें

अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome के कैनरी, डेव या बीटा वर्शन का इस्तेमाल करें. झलक दिखाने वाले इन चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, सबसे नए वेब प्लैटफ़ॉर्म एपीआई टेस्ट करने और उपयोगकर्ताओं के ऐसा करने से पहले ही, अपनी साइट पर समस्याओं का पता लगाने में मदद मिलती है!

Chrome DevTools टीम से संपर्क करना

पोस्ट में मौजूद नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में बताने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.

• crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
• DevTools में ज़्यादा विकल्प     > सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें पर जाकर, DevTools से जुड़ी समस्या की शिकायत करें.
• @ChromeDevTool पर ट्वीट करें.
• DevTools YouTube वीडियो या DevTools सलाह वाले YouTube वीडियो में नया क्या है, इस बारे में टिप्पणियां करें.