C/C++ डीबग करने के लिए मेमोरी इंस्पेक्टर बढ़ाएं

Chrome 92 में, हमने मेमोरी इंस्पेक्टर की सुविधा दी है, जो लीनियर मेमोरी बफ़र की जांच करने वाला टूल है. इस लेख में, हम बात करेंगे कि हमने C/C++ डीबग करने की प्रोसेस के दौरान आने वाली तकनीकी चुनौतियों से जुड़े इंस्पेक्टर की सुविधा को कैसे बेहतर बनाया है.

अगर आपने C/C++ डीबगिंग और मेमोरी इंस्पेक्टर का काम पहली बार किया है, तो आपके लिए ये ब्लॉग पोस्ट काम की हैं:

परिचय

मेमोरी इंस्पेक्टर की मदद से, आपको लीनियर मेमोरी बफ़र के लिए, डीबग करने के ज़्यादा बेहतर विकल्प मिलते हैं. C/C++ के मामले में, WebAssembly Memory में C/C++ मेमोरी ऑब्जेक्ट की जांच की जा सकती है.

WebAssembly की मेमोरी में मौजूद अपने ऑब्जेक्ट के बाइट को पहचानना मुश्किल हो गया. आपको ऑब्जेक्ट का साइज़ पता होना चाहिए और ऑब्जेक्ट की शुरुआत से ही बाइट की गिनती करनी होगी. नीचे दिए गए स्क्रीनशॉट में, 10-एलिमेंट वाले int32 कलेक्शन का पहला बाइट चुना गया है. हालांकि, इससे तुरंत यह पता नहीं चलता कि कलेक्शन में कौनसे अन्य बाइट जुड़े हैं. क्या यह अच्छा नहीं होगा कि आप ऑब्जेक्ट से जुड़ी सभी बाइट तुरंत पहचान सकें?

हाइलाइट किए गए एक बाइट के साथ ओरिजनल मेमोरी इंस्पेक्टर का स्क्रीनशॉट

मेमोरी इंस्पेक्टर में हाइलाइट किया गया ऑब्जेक्ट

Chrome 107 और इसके बाद के वर्शन में, मेमोरी इंस्पेक्टर की मदद से C/C++ मेमोरी ऑब्जेक्ट की सभी बाइट हाइलाइट की जाती हैं. इससे आपको उन्हें आस-पास की 'यादें' से अलग करने में मदद मिलती है.

चमकीले रंगों से हाइलाइट किए गए कलेक्शन के साथ, अपडेट किए गए मेमोरी इंस्पेक्टर का स्क्रीनशॉट

मेमोरी इंस्पेक्टर को कैसे काम करता है, यह देखने के लिए यह वीडियो देखें. मेमोरी इंस्पेक्टर में x कलेक्शन को देखने पर, मेमोरी व्यूअर में हाइलाइट की गई मेमोरी दिखती है. साथ ही, इसके ठीक ऊपर एक नया चिप भी दिखता है. इस चिप से, आपको हाइलाइट की गई 'यादें' का नाम और टाइप याद रखने में मदद मिलती है. ऑब्जेक्ट की 'यादें' पर जाने के लिए, चिप पर क्लिक करें. चिप पर कर्सर घुमाने पर आपको एक क्रॉस आइकॉन दिखेगा. उस पर क्लिक करके, हाइलाइट को हटाएं.

जब निरीक्षण किए गए ऑब्जेक्ट के बाहर कोई बाइट चुना जाता है, तो हाइलाइट आपका ध्यान भटकने से रोकने के लिए डिफ़ोकस हो जाता है. फ़ोटो पर फिर से फ़ोकस करने के लिए, ऑब्जेक्ट की किसी भी बाइट या चिप पर फिर से क्लिक करें.

ऑब्जेक्ट हाइलाइट करने की सुविधा, कैटगरी तक ही सीमित नहीं है. स्ट्रक्चर, ऑब्जेक्ट, और पॉइंटर की भी जांच की जा सकती है. इन बदलावों से C/C++ ऐप्लिकेशन की मेमोरी को एक्सप्लोर करना, पहले से ज़्यादा आसान हो जाएगा!

क्या आपको इसे आज़माना है? आपको ये काम करने होंगे:

  • आपके पास Chrome 107 या उसके बाद का वर्शन होना चाहिए.
  • C/C++ DWARF एक्सटेंशन इंस्टॉल करें.
  • DevTools में DWARF डीबगिंग चालू करें > सेटिंग पर टैप करें. सेटिंग > एक्सपेरिमेंट > WebAssemble डीबगिंग: DWARF सहायता चालू करें.
  • यह डेमो पेज खोलें.
  • पेज पर दिए गए निर्देशों का पालन करें.

डीबग करने का उदाहरण

चलिए, खिलौनों के एक बग के बारे में देखते हैं. इससे यह समझने में मदद मिलेगी कि C/C++ डीबग करने के लिए, मेमोरी इंस्पेक्टर का इस्तेमाल कैसे किया जा सकता है. नीचे दिए गए कोड सैंपल में, प्रोग्रामर एक पूर्णांक अरे बनाता है और आखिरी एलिमेंट को चुनने के लिए पॉइंटर अंकगणित का इस्तेमाल करने का फ़ैसला करता है. बदकिस्मती से, प्रोग्रामर से उसके पॉइंटर की गणना करने में गलती हुई और अब प्रोग्राम आखिरी एलिमेंट को प्रिंट करने के बजाय, बिना जानकारी वाली वैल्यू प्रिंट करता है.

#include <iostream>

int main()
{
    int numbers[] = {1, 2, 3, 4};
    int *ptr = numbers;
    int arraySize = sizeof(numbers)/sizeof(int);
    int* lastNumber = ptr + arraySize;  // Can you notice the bug here?
    std::cout <<../ *lastNumber <<../ '\n';
    return 0;
}

प्रोग्रामर, समस्या को डीबग करने के लिए, मेमोरी इंस्पेक्टर की मदद लेता है. इस डेमो को फ़ॉलो किया जा सकता है! टीम सबसे पहले मेमोरी इंस्पेक्टर में अरे की जांच करती है और numbers अरे में उम्मीद के मुताबिक सिर्फ़ पूर्णांक 1, 2, 3, और 4 शामिल होते हैं.

जांचे गए int32 कलेक्शन के साथ खोले गए मेमोरी इंस्पेक्टर का स्क्रीनशॉट. अरे के सभी एलिमेंट हाइलाइट किए गए हैं.

इसके बाद, वे स्कोप पैनल से lastNumber वैरिएबल दिखाते हैं और देखते हैं कि पॉइंटर, अरे के बाहर किसी पूर्णांक पर ले जाता है! इस जानकारी की मदद से, प्रोग्रामर को पता चलता है कि उन्होंने लाइन 8 पर पॉइंटर ऑफ़सेट की गिनती गलत की थी. इसे ptr + arraySize - 1 होना चाहिए था.

खोले गए मेमोरी इंस्पेक्टर का स्क्रीनशॉट, जिसमें &#39;lastNumber&#39; नाम के पॉइंटर से हाइलाइट की गई मेमोरी दिख रही है. हाइलाइट की गई मेमोरी, पहले हाइलाइट की गई श्रेणी के आखिरी बाइट के ठीक बाद मौजूद होती है.

हालांकि, यह खिलौने का उदाहरण है, फिर भी यह दिखाता है कि ऑब्जेक्ट हाइलाइट करने की सुविधा, मेमोरी ऑब्जेक्ट के साइज़ और पोज़िशन को कैसे असरदार तरीके से दिखाती है. इससे आपको बेहतर तरीके से यह समझने में मदद मिलेगी कि आपके C/C++ ऐप्लिकेशन की मेमोरी में क्या हो रहा है.

DevTools यह कैसे पता करता है कि कौनसी जानकारी हाइलाइट करनी है

इस सेक्शन में, हम C/C++ डीबग करने की सुविधा को चालू करने वाले टूल के नेटवर्क के बारे में जानेंगे. खास तौर पर, आपको यह जानकारी मिलेगी कि DevTools, V8, C/C++ DWARF एक्सटेंशन, और Emscripten, Chrome में C/C++ डीबग करने की प्रक्रिया को कैसे संभव बनाते हैं.

DevTools में C/C++ डीबग करने की पूरी सुविधा पाने के लिए, आपको दो चीज़ों की ज़रूरत है:

  • Chrome में इंस्टॉल किया गया C/C++ DWARF एक्सटेंशन
  • इस ब्लॉग पोस्ट में दिए गए निर्देशों के मुताबिक, नए Emscripten कंपाइलर के साथ WebAssembly में कंपाइल की गई C/C++ सोर्स फ़ाइलें

लेकिन क्यों? V8 , Chrome का JavaScript और WebAssembly इंजन, C या C++ को एक्ज़ीक्यूट करने का तरीका नहीं जानता. C/C++ से WebAssembly कंपाइलर, Emscripten की बदौलत, C या C++ में बनाए गए ऐप्लिकेशन को WebAssembly के तौर पर कंपाइल किया जा सकता है और उन्हें ब्राउज़र में एक्ज़ीक्यूट किया जा सकता है!

कंपाइलेशन के दौरान, emscripten, DWARF डीबग डेटा को आपकी बाइनरी में एम्बेड कर देगा. हाई लेवल पर इस डेटा से, एक्सटेंशन को यह पता लगाने में मदद मिलती है कि आपके C/C++ वैरिएबल से कौनसे WebAssembly वैरिएबल मेल खाते हैं. इस तरह, DevTools आपको आपके C++ वैरिएबल दिखा सकता है, भले ही V8 असल में WebAssembly चला रहा हो. अगर आपको इस बारे में जानना है, तो DWARF डीबग डेटा के उदाहरण के लिए, यह ब्लॉग पोस्ट देखें.

आइए जानते हैं कि lastNumber के बारे में बताने पर क्या होता है? जैसे ही आप मेमोरी आइकॉन पर क्लिक करते हैं, DevTools यह जांच करता है कि आपको किस वैरिएबल की जांच करनी है. इसके बाद, यह lastNumber के डेटा टाइप और जगह के आधार पर एक्सटेंशन के बारे में क्वेरी करता है. जैसे ही एक्सटेंशन उस जानकारी के साथ जवाब देता है, तो मेमोरी इंस्पेक्टर, मेमोरी का वह हिस्सा दिखा सकता है जो काम का है और उसके टाइप की जानकारी होने पर आपको ऑब्जेक्ट का साइज़ भी दिखा सकता है.

अगर पहले के उदाहरण में lastNumber को देखा जाए, तो आपने ध्यान दिया होगा कि हमने lastNumber: int * की जांच की थी, लेकिन मेमोरी इंस्पेक्टर के चिप में *lastNumber: int बताया गया है कि इससे क्या मिलता है? इंस्पेक्टर, आपको दिखाए गए ऑब्जेक्ट के टाइप को दिखाने के लिए, C++-स्टाइल पॉइंटर का इस्तेमाल करता है! किसी पॉइंटर की जांच करने पर, इंस्पेक्टर आपको दिखाएगा कि वह पॉइंट क्या है.

डीबगर के कदमों पर हाइलाइट बने रहना

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

जब डीबगर किसी नए ब्रेकपॉइंट पर हिट करता है, तो मेमोरी इंस्पेक्टर फिर से V8 और पिछले हाइलाइट से जुड़े वैरिएबल के एक्सटेंशन पर क्वेरी करता है. इसके बाद यह ऑब्जेक्ट की जगह की जानकारी और उनके टाइप की तुलना करता है. अगर ये मेल खाते हैं, तो हाइलाइट बनी रहती है. ऊपर दिए गए वीडियो में, x कलेक्शन में एक फॉर-लूप टेक्स्ट दिखाया गया है. इन कार्रवाइयों से कलेक्शन का टाइप या पोज़िशन नहीं बदलती. इसलिए, यह हाइलाइट बनी रहती है.

आपको लग सकता है कि इसका पॉइंटर पर क्या असर होगा. अगर आपके पास हाइलाइट किया गया कोई पॉइंटर है और उसे किसी दूसरे ऑब्जेक्ट को फिर से असाइन किया जाता है, तो हाइलाइट किए गए ऑब्जेक्ट की पुरानी और नई जगहें अलग हो जाती हैं और हाइलाइट गायब हो जाती है. पॉइंट किया गया नया ऑब्जेक्ट, WebAssembly में कहीं भी मौजूद हो सकता है. ऐसा हो सकता है कि इसका संबंध पिछली मेमोरी की जगह से कम हो. इसलिए, हाइलाइट को हटाने से, मेमोरी की नई जगह पर जाने की तुलना में ज़्यादा साफ़ तौर पर जानकारी मिलती है. स्कोप पैनल में, पॉइंटर के मेमोरी आइकॉन पर क्लिक करके, उसे फिर से हाइलाइट किया जा सकता है.

नतीजा

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

आगे क्या होगा

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