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

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

1. JavaScript ArrayBuffer वाला कोई पेज खोलें. हम इस डेमो पेज का इस्तेमाल करेंगे.
2. DevTools खोलें.
3. Sources पैनल में 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. एन्कोडिंग पर क्लिक किया जा सकता है. पूर्णांक के लिए dec, हेक्स, ऑक्ट, और sci के बीच स्विच, और फ़्लोट के लिए dec के बीच स्विच किया जा सकता है.

मेमोरी की जाँच की जा रही है

आइए, यादें देखते हैं.

1. डीबग करने के लिए यह तरीका अपनाएं.
2. पता इनपुट में पते को 0x00000027 में बदलें.
3. ASCII (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 सहायता (DWARF) एक्सटेंशन इंस्टॉल करें. यह प्लगिन, DWARF डीबग की जानकारी का इस्तेमाल करके C/C++ WebAssembly ऐप्लिकेशन को डीबग करने के लिए है.

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

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

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

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

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

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

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