WebAssembly की मदद से आप वेब पर चला सकते हैं. उदाहरण के लिए, वेब पर C/C++ कोड को नेटिव स्पीड के आस-पास और JavaScript के साथ चलाया जा सकता है. इस दस्तावेज़ में, ऐसे ऐप्लिकेशन को बेहतर तरीके से डीबग करने के लिए, Chrome DevTools को सेट अप करने और इस्तेमाल करने का तरीका बताया गया है.
DevTools सेट अप करने के बाद, ये काम किए जा सकते हैं:
- सोर्स > एडिटर में जाकर, अपने ओरिजनल कोड की जांच करें.
- कोड की लाइन में ब्रेकपॉइंट लगाकर, प्रोग्राम के चलने को रोकें. इसके बाद, कंपाइल की गई
.wasmबाइनरी फ़ाइल के बजाय, अपने ओरिजनल C/C++ सोर्स कोड को सिलसिलेवार तरीके से देखें.
और रोके जाने पर, आप ये काम कर सकते हैं:
- ओरिजनल सोर्स फ़ाइल में वैरिएबल पर कर्सर घुमाएं और उनकी वैल्यू देखें.
- कॉल स्टैक में फ़ंक्शन के नाम और स्कोप में वैरिएबल को समझना.
- कंसोल में, नेस्ट की गई प्रॉपर्टी और जटिल ऑब्जेक्ट को आउटपुट करें.
- मेमोरी इंस्पेक्टर की मदद से, ऑब्जेक्ट की मेमोरी की जांच करें.
सेट अप करें
DevTools में C/C++ WebAssembly डीबग करने की सुविधा चालू करने के लिए:
DWARF डीबग की जानकारी के साथ अपने ऐप्लिकेशन को कंपाइल करें. Emscripten का नया कंपाइलर चलाएं और उसे
-gफ़्लैग पास करें. उदाहरण के लिए:emcc -g source.cc -o app.htmlज़्यादा जानकारी के लिए, डीबग की जानकारी के साथ प्रोजेक्ट बनाना देखें.
C/C++ DevTools Support (DWARF) Chrome एक्सटेंशन इंस्टॉल करें.
डीबग
DevTools सेट अप करने के बाद, अपना कोड डीबग करें:
- अपनी वेबसाइट की जांच करने के लिए, DevTools खोलें. इस ट्यूटोरियल के लिए, इस डेमो पेज पर इसे आज़माएं. इसे ज़रूरी
-gफ़्लैग के साथ कंपाइल किया गया था. - इसके अलावा, नेविगेट करने में आसानी के लिए, आपने जिन फ़ाइलों को लिखा है उन्हें ग्रुप में बांटें. सोर्स में,
> पेज > 
> लेखक/डिप्लॉय किए गए के हिसाब से ग्रुप करें 
को चुनें. - फ़ाइल ट्री से अपनी ओरिजनल सोर्स फ़ाइल चुनें. इस मामले में,
mandelbrot.cc. कोड की लाइन में ब्रेकपॉइंट सेट करने के लिए, एडिटर की बाईं ओर मौजूद कॉलम में किसी लाइन नंबर पर क्लिक करें. उदाहरण के लिए, लाइन 38 पर.
कोड फिर से चलाएं. ब्रेकपॉइंट वाली लाइन से पहले, प्रोग्राम का चलना रुक जाता है.
जब रोका गया हो, तब नीचे दिया गया तरीका आज़माएं:
- सोर्स > एडिटर में जाकर, किसी वैरिएबल पर कर्सर घुमाएं. इससे, टूलटिप में उसकी वैल्यू दिखेगी.
- सोर्स > कॉल स्टैक में, फ़ंक्शन के नाम उसी तरह देखें जैसे वे सोर्स में हों.
- सोर्स > दायरा में, लोकल और ग्लोबल वैरिएबल, उनके टाइप, और वैल्यू देखें.
कंसोल में, ऐसे आउटपुट वैरिएबल और ऑब्जेक्ट जिनमें स्कोप में नेविगेट करना मुश्किल होता है:
- डीप नेस्ट किए गए वैरिएबल. उदाहरण के लिए, बड़े अरे में इंडेक्स किए गए आइटम.
- जटिल ऑब्जेक्ट. इनमें वे ऑब्जेक्ट भी शामिल हैं जिन्हें पॉइंटर (
->) की मदद से ऐक्सेस किया जा सकता है. इनकी जांच करने के लिए, उन्हें बड़ा करें.
- सोर्स > स्कोप में,
आइकॉन पर क्लिक करके मेमोरी इंस्पेक्टर खोलें और ऑब्जेक्ट मेमोरी के रॉ बाइट की जांच करें. ज़्यादा जानकारी के लिए, WebAssembly मेमोरी की जांच लेख पढ़ें.
प्रोफ़ाइल की परफ़ॉर्मेंस
DevTools सेट अप करने और उसे खोलने पर, Chrome पर चलने वाला कोड ऑप्टिमाइज़ नहीं किया गया है. आपको डीबग करने के बेहतर अनुभव के लिए, इसे अलग-अलग लेवल पर दिखाया गया है.
इस मामले में, प्रोफ़ाइल की परफ़ॉर्मेंस के लिए अपने कोड में मौजूद console.time() और performance.now() पर भरोसा नहीं किया जा सकता. इसके बजाय, प्रोफ़ाइल बनाने के लिए परफ़ॉर्मेंस पैनल का इस्तेमाल करें.
इसके अलावा, DevTools खोले बिना प्रोफ़ाइलिंग कोड चलाया जा सकता है. इसके बाद, कंसोल में मैसेज की जांच करने के लिए इसे खोलें.
डीबग करने की जानकारी को अलग करना
लोड होने की स्पीड को बढ़ाने के साथ-साथ, डीबग करने का बेहतर अनुभव पाने के लिए, डीबग करने की जानकारी को अलग .wasm फ़ाइल में बांटा जा सकता है. ज़्यादा जानकारी के लिए, WebAssembly को तेज़ी से डीबग करना लेख पढ़ें.
इस फ़ाइल को डिवाइस में सेव किया जा सकता है या किसी दूसरे सर्वर पर होस्ट किया जा सकता है. Emscripten की मदद से ऐसा करने के लिए, -gseparate-dwarf=<filename> फ़्लैग पास करें और फ़ाइल का पाथ बताएं:
emcc -g source.cc -o app.html \
-gseparate-dwarf=temp.debug.wasm \
-s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]
अलग-अलग मशीनों पर बिल्ड और डीबग करना
अगर Chrome को चलाने वाली मशीन से अलग ऑपरेटिंग सिस्टम (कंटेनर, वीएम या रिमोट सर्वर) वाली मशीन पर बनाई जाती है, तो आपको डीबग फ़ाइल के पाथ को मैन्युअल तौर पर मैप करना पड़ सकता है.
उदाहरण के लिए, अगर आपका प्रोजेक्ट लोकल तौर पर C:\src\project पर है, लेकिन उसे /mnt/c/src/project पाथ वाले Docker कंटेनर में बनाया गया था, तो यह तरीका अपनाएं:
chrome://extensions/पर जाएं, C/C++ DevTools Support (DWARF) एक्सटेंशन ढूंढें. इसके बाद, जानकारी > एक्सटेंशन के विकल्प पर क्लिक करें.- फ़ाइल के पुराने और नए पाथ की जानकारी दें.
ज़्यादा जानें
WebAssembly को डीबग करने के बारे में ज़्यादा जानने के लिए, Chrome DevTools के इंजीनियरिंग ब्लॉग पर जाएं: