मेमोरी इंस्पेक्टर: arrayBuffer, Typedarray, DataView, और Wasm M की जांच करें.

Jecelyn Yeen

Sofia Emelianova

JavaScript में ArrayBuffer, TypedArray, और DataView मेमोरी के साथ-साथ, C++ में लिखे गए Wasm ऐप्लिकेशन के WebAssembly.Memory की जांच करने के लिए, मेमोरी इंस्पेक्टर का इस्तेमाल करें.

खास जानकारी

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

मेमोरी इंस्पेक्टर खोलना

मेमोरी इंस्पेक्टर खोलने के कुछ तरीके हैं.

मेन्यू से खोलना

1. DevTools खोलें.
2. ज़्यादा विकल्प > ज़्यादा टूल > मेमोरी इंस्पेक्टर पर क्लिक करें.

डीबग करने के दौरान खोलें

1. JavaScript ArrayBuffer वाला कोई पेज खोलें. हम इस डेमो पेज का इस्तेमाल करेंगे.
2. DevTools खोलें.
3. सोर्स पैनल में demo-js.js फ़ाइल खोलें और 18वीं लाइन पर ब्रेकपॉइंट सेट करें.
4. पेज रीफ़्रेश करें.
5. दाईं ओर मौजूद डीबगर पैनल में, दायरा सेक्शन को बड़ा करें.

6. मेमोरी इंस्पेक्टर को खोलने के लिए:

   • आइकॉन से. buffer प्रॉपर्टी के बगल में मौजूद आइकॉन पर क्लिक करके या
   • कॉन्टेक्स्ट मेन्यू से. buffer प्रॉपर्टी पर राइट क्लिक करें और मेमोरी इंस्पेक्टर पैनल में दिखाएं को चुनें.

   

एक से ज़्यादा ऑब्जेक्ट की जांच करना

1. DataView या TypedArray की जांच भी की जा सकती है. उदाहरण के लिए, b2 एक TypedArray है. इसकी जांच करने के लिए, b2 प्रॉपर्टी पर राइट क्लिक करें और मेमोरी इंस्पेक्टर पैनल में दिखाएं को चुनें. फ़िलहाल, TypedArray या DataView के लिए कोई आइकॉन नहीं है.
2. मेमोरी इंस्पेक्टर में एक नया टैब खुलता है. कृपया ध्यान दें कि एक साथ कई ऑब्जेक्ट की जांच की जा सकती है.

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

मेमोरी इंस्पेक्टर में तीन मुख्य सेक्शन होते हैं:

नेविगेशन बार

1. पता इनपुट, हेक्स फ़ॉर्मैट में मौजूदा बाइट पता दिखाता है. मेमोरी बफ़र में किसी नई जगह पर जाने के लिए, नई वैल्यू डाली जा सकती है. उदाहरण के लिए, 0x00000008 टाइप करें.
2. मेमोरी बफ़र, पेज से ज़्यादा लंबे हो सकते हैं. स्क्रोल करने के बजाय, नेविगेट करने के लिए लेफ़्ट और राइट बटन का इस्तेमाल किया जा सकता है.
3. बाईं ओर मौजूद बटन की मदद से, आगे/पीछे नेविगेट किया जा सकता है.
4. डिफ़ॉल्ट रूप से, बफ़र, चरण बढ़ाने पर अपने-आप अपडेट हो जाता है. अगर ऐसा नहीं है, तो रीफ़्रेश करें बटन की मदद से, मेमोरी को रीफ़्रेश करके उसके कॉन्टेंट को अपडेट किया जा सकता है.

मेमोरी बफ़र

1. बाईं ओर, पता हेक्स फ़ॉर्मैट में दिखता है.
2. मेमोरी को भी हेक्स फ़ॉर्मैट में दिखाया जाता है. इसमें हर बाइट को स्पेस से अलग किया जाता है. फ़िलहाल चुना गया बाइट हाइलाइट हो जाता है. बाइट पर क्लिक करें या कीबोर्ड (लेफ़्ट, राइट, अप, डाउन) का इस्तेमाल करके नेविगेट करें.
3. मेमोरी का ASCII वर्शन दाईं ओर दिखाया गया है. हाइलाइट, बाइट पर चुने गए बिट की वैल्यू दिखाता है. मेमोरी की तरह ही, बाइट पर क्लिक किया जा सकता है या कीबोर्ड (बाएं, दाएं, ऊपर, नीचे) का इस्तेमाल करके नेविगेट किया जा सकता है.

वैल्यू इंस्पेक्टर

1. सबसे ऊपर मौजूद टूलबार में, बड़े और छोटे इंडियन के बीच स्विच करने और सेटिंग खोलने के लिए बटन होता है. सेटिंग खोलें और चुनें कि उन्हें इंस्पेक्टर में डिफ़ॉल्ट रूप से कौनसी वैल्यू टाइप देखनी हैं.
2. मुख्य सेक्शन में, सेटिंग के हिसाब से सभी वैल्यू के विश्लेषण दिखते हैं. डिफ़ॉल्ट रूप से, सभी विकल्प दिखते हैं.
3. कोड पर क्लिक किया जा सकता है. पूर्णांक के लिए दशमलव, हेक्स, और ऑक्टल के बीच और फ़्लोट के लिए साइंटिफ़िक और दशमलव के बीच स्विच किया जा सकता है.

मेमोरी की जांच करना

आइए, मेमोरी की जांच करते हैं.

1. डीबगिंग शुरू करने के लिए, यह तरीका अपनाएं.
2. पते के इनपुट में, पते को 0x00000027 में बदलें.
3. ASCII में वैल्यू दिखाने और वैल्यू के बारे में जानकारी देखें. फ़िलहाल, सभी वैल्यू खाली हैं.
4. Pointer 32-bit और Pointer 64-bit के बगल में मौजूद, नीले रंग के पते पर जाएं बटन पर ध्यान दें. पते पर जाने के लिए, उस पर क्लिक करें. अगर पते अमान्य हैं, तो बटन धूसर हो जाते हैं और उन पर क्लिक नहीं किया जा सकता.
5. कोड को सिलसिलेवार तरीके से देखने के लिए, स्क्रिप्ट एक्ज़ीक्यूशन फिर से शुरू करें पर क्लिक करें.
6. ध्यान दें कि ASCII के तौर पर दिखाया गया डेटा अब अपडेट हो गया है. वैल्यू के सभी इंटरप्रिटेशन भी अपडेट हो जाते हैं.
7. आइए, वैल्यू इंस्पेक्टर को पसंद के मुताबिक बनाकर, सिर्फ़ फ़्लोटिंग पॉइंट दिखाएं. सेटिंग बटन पर क्लिक करें और सिर्फ़ फ़्लोट 32-बिट और फ़्लोट 64-बिट को चुनें.
8. आइए, कोडिंग को dec से sci में बदलते हैं. ध्यान दें कि वैल्यू के तौर पर दिखाए गए डेटा को इसी हिसाब से अपडेट किया जाता है.
9. कीबोर्ड या नेविगेशन बार का इस्तेमाल करके, मेमोरी बफ़र पर जाएं. वैल्यू में हुए बदलावों को देखने के लिए, चौथा चरण दोहराएं.

WebAssembly मेमोरी की जांच

WebAssembly.Memory ऑब्जेक्ट एक ArrayBuffer है, जिसमें ऑब्जेक्ट मेमोरी के रॉ बाइट होते हैं. मेमोरी इंस्पेक्टर पैनल की मदद से, C++ में लिखे गए Wasm ऐप्लिकेशन में ऐसे ऑब्जेक्ट की जांच की जा सकती है.

WebAssembly.Memory की जांच का पूरा फ़ायदा पाने के लिए:

• Chrome 107 या इसके बाद के वर्शन का इस्तेमाल करें. chrome://version/ पर जाकर, अपना वर्शन देखें.
• C/C++ DevTools Support (DWARF) एक्सटेंशन इंस्टॉल करें. यह C/C++ WebAssembly ऐप्लिकेशन को डीबग करने के लिए एक प्लग इन है. इसमें DWARF डीबग की जानकारी का इस्तेमाल किया जाता है.

किसी ऑब्जेक्ट के WebAssembly.Memory की जांच करने के लिए:

1. इस डेमो पेज पर DevTools खोलें.
2. सोर्स पैनल में, demo-cpp.cc खोलें और main() फ़ंक्शन में 15वीं लाइन पर ब्रेकपॉइंट सेट करें: x[i] = n - i - 1;.
3. ऐप्लिकेशन चलाने के लिए, पेज को फिर से लोड करें. डीबगर, ब्रेकपॉइंट पर रुक जाता है.
4. डीबगर पैनल में, दायरा > लोकल को बड़ा करें.

5. x: int[10] कलेक्शन के बगल में मौजूद आइकॉन पर क्लिक करें.

   इसके अलावा, ऐरे पर राइट क्लिक करके, मेमोरी इंस्पेक्टर पैनल में दिखाएं को चुनें.

ऑब्जेक्ट मेमोरी को हाइलाइट करने की सुविधा बंद करने के लिए, मेमोरी इंस्पेक्टर पैनल में, ऑब्जेक्ट बैज पर कर्सर घुमाएं और x बटन पर क्लिक करें.

ज़्यादा जानने के लिए, ये देखें:

• C/C++ डीबगिंग के लिए, मेमोरी इंस्पेक्टर की सुविधा को बेहतर बनाना
• आधुनिक टूल की मदद से WebAssembly को डीबग करना.