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

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

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

शुरुआती जानकारी

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

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

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

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

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

अपडेट किए गए मेमोरी इंस्पेक्टर का स्क्रीनशॉट, जिसमें तेज़ी से हाइलाइट किए गए कलेक्शन का इस्तेमाल किया गया है

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

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

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

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

  • आपके पास Chrome 107 या उसके बाद का वर्शन होना चाहिए.
  • C/C++ DWARF एक्सटेंशन इंस्टॉल करें.
  • DevTools > सेटिंग. DevTools > DevTools > DevTools में 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 होना चाहिए.

खोली गई मेमोरी इंस्पेक्टर का स्क्रीनशॉट, जिसमें हाइलाइट की गई मेमोरी को ‘lastNumber’ नाम के पॉइंटर से दिखाया गया है. हाइलाइट की गई मेमोरी पहले से हाइलाइट की गई श्रेणी के आखिरी बाइट के ठीक बाद में होती है.

हालांकि, यह खिलौनों का एक उदाहरण है, लेकिन इससे पता चलता है कि ऑब्जेक्ट हाइलाइट करने की सुविधा, मेमोरी ऑब्जेक्ट के साइज़ और पोज़िशन को बेहतर तरीके से कैसे बताती है. इससे, आपको बेहतर तरीके से यह समझने में मदद मिल सकती है कि आपके 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++ चलाने का तरीका नहीं जानते. Emscripten, C/C++ से WebAssembly कंपाइलर का धन्यवाद. 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++ ऐप्लिकेशन की मेमोरी को डीबग करना आसान हो जाएगा! अगर इस सुविधा को और बेहतर बनाने के लिए आपके पास कोई सुझाव है, तो गड़बड़ी की शिकायत करके हमें बताएं!

आगे क्या होगा

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