जेसेलिन येन
सोफ़िया इमेलियानोवा
नए मेमोरी इंस्पेक्टर का इस्तेमाल करके, JavaScript में ArrayBuffer, TypedArray, और DataView मेमोरी के साथ-साथ C++ में लिखे गए Wasm ऐप्लिकेशन के WebAssembly.Memory की जांच करें.
स्टोरेज इंस्पेक्टर खोलें
मेमोरी इंस्पेक्टर को खोलने के कुछ तरीके दिए गए हैं.
मेन्यू से खोलें
- DevTools खोलें.
- ज़्यादा विकल्प
> ज़्यादा टूल > मेमोरी इंस्पेक्टर पर क्लिक करें.
डीबग करने के दौरान खोलें
- JavaScript
ArrayBufferवाला पेज खोलें. हम इस डेमो पेज का इस्तेमाल करेंगे. - DevTools खोलें.
- सोर्स पैनल में demo-js.js फ़ाइल खोलें और लाइन 18 पर ब्रेकपॉइंट सेट करें.
- पेज रीफ़्रेश करें.
- दाएं डीबगर पैनल पर, दायरा सेक्शन को बड़ा करें.
मेमोरी इंस्पेक्टर को खोला जा सकता है:
- आइकॉन से.
bufferप्रॉपर्टी के बगल में मौजूद आइकॉन पर क्लिक करें या - संदर्भ मेन्यू से.
bufferप्रॉपर्टी पर राइट क्लिक करें और मेमोरी इंस्पेक्टर पैनल में दिखाएं को चुनें.
- आइकॉन से.
एक से ज़्यादा ऑब्जेक्ट की जांच करें
- आपके पास DataView या TypedArray की भी जांच करने का विकल्प है. उदाहरण के लिए,
b2एकTypedArrayहै. इसकी जांच करने के लिए,b2प्रॉपर्टी पर राइट क्लिक करें और मेमोरी इंस्पेक्टर पैनल में दिखाएं को चुनें. फ़िलहाल,TypedArrayयाDataViewके लिए कोई आइकॉन मौजूद नहीं है. - मेमोरी इंस्पेक्टर में एक नया टैब खुलता है. कृपया ध्यान दें कि एक साथ कई ऑब्जेक्ट की जांच की जा सकती है.
मेमोरी जांचने वाला टूल
मेमोरी इंस्पेक्टर में तीन मुख्य हिस्से होते हैं:
नेविगेशन बार
- पता इनपुट मौजूदा बाइट पता हेक्स फ़ॉर्मैट में दिखाता है. मेमोरी बफ़र में किसी नई जगह पर जाने के लिए, आपके पास कोई नई वैल्यू डालने का विकल्प होता है. उदाहरण के लिए,
0x00000008टाइप करके देखें. - मेमोरी बफ़र की अवधि एक पेज से ज़्यादा हो सकती है. स्क्रोल करने के बजाय, बाएं और राइट बटन का इस्तेमाल करके नेविगेट करें.
- बाईं ओर दिए गए बटन से आगे/पीछे नेविगेट किया जा सकता है.
- डिफ़ॉल्ट रूप से, बफ़र होने पर वह अपने-आप अपडेट हो जाता है. अगर ऐसा नहीं है, तो रीफ़्रेश करें बटन आपको मेमोरी को रीफ़्रेश करने और उसका कॉन्टेंट अपडेट करने का विकल्प देता है.
मेमोरी बफ़र
- बाईं ओर, पता हेक्स फ़ॉर्मैट में दिखता है.
- मेमोरी को हेक्स फ़ॉर्मैट में भी दिखाया जाता है, जिसमें हर बाइट को एक स्पेस से अलग किया जाता है. मौजूदा बाइट को हाइलाइट किया गया है. आपके पास बाइट पर क्लिक करने या कीबोर्ड की मदद से नेविगेट करने का विकल्प है. जैसे, बाएं, दाएं, ऊपर, नीचे.
- दाईं ओर, मेमोरी का ASCII (एएससीआईआई) प्रज़ेंटेशन दिखाया जाता है. हाइलाइट, बाइट पर चुने गए बिट से संबंधित वैल्यू दिखाता है. मेमोरी की तरह ही, बाइट पर क्लिक किया जा सकता है या कीबोर्ड की मदद से नेविगेट किया जा सकता है. जैसे, बाएं, दाएं, ऊपर, नीचे.
वैल्यू जांचने वाला टूल
- सबसे ऊपर मौजूद टूलबार में बड़े और छोटे एंडियन के बीच स्विच करने और सेटिंग खोलने का बटन होता है. सेटिंग में जाकर चुनें कि उन्हें इंस्पेक्टर में डिफ़ॉल्ट रूप से किस तरह की वैल्यू देखनी हैं.
- मुख्य सेक्शन, सेटिंग के हिसाब से सभी वैल्यू की जानकारी दिखाता है. डिफ़ॉल्ट रूप से, सभी दिखाए जाते हैं.
- एन्कोडिंग पर क्लिक किया जा सकता है. पूर्णांक के लिए dec, हेक्स, ऑक्टोट और sci के बीच स्विच किया जा सकता है. फ़्लोट के लिए dec के बीच स्विच किया जा सकता है.
मेमोरी की जांच की जा रही है
आइए, साथ मिलकर मेमोरी की जांच करें.
- डीबग शुरू करने के लिए यह तरीका अपनाएं.
- पता इनपुट में पता बदलकर
0x00000027करें.
- ASCII (एएससीआईआई) तरीके और वैल्यू की व्याख्या को देखें. इस समय सभी वैल्यू खाली हैं.
Pointer 32-bitऔरPointer 64-bitके बगल में मौजूद नीले रंग के पते पर जाएं बटन को देखें. पते पर जाने के लिए, इस पर क्लिक करें. पता मान्य न होने पर, बटन धूसर हो जाते हैं और उन पर क्लिक नहीं किया जा सकता.
- कोड पर जाने के लिए, स्क्रिप्ट को लागू करना फिर से शुरू करें पर क्लिक करें.
- ध्यान दें कि ASCII (एएससीआईआई) प्रज़ेंटेशन को अब अपडेट कर दिया गया है. सभी वैल्यू इंटरप्रेटेशन भी अपडेट किए जाते हैं.
- वैल्यू इंस्पेक्टर को अपनी पसंद के मुताबिक बनाएं, ताकि सिर्फ़ फ़्लोटिंग पॉइंट दिखाया जा सके. सेटिंग बटन पर क्लिक करें और सिर्फ़ फ़्लोट 32-बिट और फ़्लोट 64-बिट को चुनें.
- कोड में बदलने के तरीके को
decसेsciमें बदलें. ध्यान दें कि वैल्यू के प्रतिनिधित्व अपडेट कर दिए जाते हैं.
- अपने कीबोर्ड या नेविगेशन बार का इस्तेमाल करके, मेमोरी बफ़र पर जाने की कोशिश करें. वैल्यू में हुए बदलावों पर नज़र रखने के लिए, चौथा चरण दोहराएं.
WebAssembly मेमोरी की जांच करना
WebAssembly.Memory ऑब्जेक्ट एक ArrayBuffer है, जो ऑब्जेक्ट मेमोरी के रॉ बाइट रखता है. मेमोरी इंस्पेक्टर पैनल की मदद से, C++ में लिखे गए Wasm ऐप्लिकेशन में मौजूद ऐसे ऑब्जेक्ट की जांच की जा सकती है.
WebAssembly.Memory की जांच का पूरा फ़ायदा पाने के लिए:
- Chrome 107 या इसके बाद के वर्शन का इस्तेमाल करें. अपना वर्शन
chrome://version/पर देखें. - C/C++ DevTools सपोर्ट (DWARF) एक्सटेंशन इंस्टॉल करें. यह प्लगिन, DWARF डीबग की जानकारी का इस्तेमाल करके, C/C++ WebAssembly ऐप्लिकेशन डीबग करने के लिए है.
किसी ऑब्जेक्ट के WebAssembly.Memory की जांच करने के लिए:
- इस डेमो पेज पर DevTools खोलें.
- सोर्स पैनल में,
demo-cpp.ccखोलें और लाइन 15:x[i] = n - i - 1;परmain()फ़ंक्शन में ब्रेकपॉइंट सेट करें. - ऐप्लिकेशन चलाने के लिए, पेज को फिर से लोड करें. डीबगर ब्रेकपॉइंट पर रुक जाता है.
- डीबगर पैनल में, दायरा > लोकल को बड़ा करें.
x: int[10]कलेक्शन के बगल में मौजूद,
आइकॉन पर क्लिक करें.इसके अलावा, अरे पर दायां क्लिक करके मेमोरी इंस्पेक्टर पैनल में रिवील करें चुनें.
ऑब्जेक्ट मेमोरी को हाइलाइट करना बंद करने के लिए, मेमोरी इंस्पेक्टर पैनल में, ऑब्जेक्ट बैज पर कर्सर घुमाएं और x बटन पर क्लिक करें.
ज़्यादा जानकारी के लिए, देखें: