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