WebAssembly में चलाने का तरीका जानें. उदाहरण के लिए, वेब पर JavaScript के साथ और उसी रफ़्तार के साथ C/C++ कोड का इस्तेमाल करें. इस दस्तावेज़ में ऐसे ऐप्लिकेशन को बेहतर ढंग से डीबग करने के लिए Chrome DevTools को सेट अप और इस्तेमाल करने का तरीका बताया गया है.
DevTools सेट अप करने के बाद, ये काम किए जा सकते हैं:
- सोर्स > एडिटर में अपने ओरिजनल कोड की जांच करें.
- कोड की लाइन वाले ब्रेकपॉइंट की मदद से एक्ज़ीक्यूशन रोकें. इसके बाद, कंपाइल की गई
.wasmबाइनरी फ़ाइल के बजाय, अपने ओरिजनल C/C++ सोर्स कोड में आगे बढ़ें.
इसके साथ ही, रोके गए पैसों की मदद से, ये काम किए जा सकते हैं:
- ओरिजनल सोर्स फ़ाइल में वैरिएबल पर कर्सर घुमाएं और उनकी वैल्यू देखें.
- कॉल स्टैक में फ़ंक्शन के नाम और स्कोप में वैरिएबल को समझें.
- पूरी तरह से नेस्ट की गई प्रॉपर्टी और जटिल ऑब्जेक्ट को कंसोल पर आउटपुट करें.
- मेमोरी इंस्पेक्टर की मदद से ऑब्जेक्ट मेमोरी की जांच करें.
सेट अप करें
DevTools में C/C++ WebAssembly डीबग करना चालू करने के लिए:
DWARF डीबग जानकारी के साथ अपने ऐप्लिकेशन को कंपाइल करें. सबसे नए Emscripten कंपाइलर को चलाएं और उसे
-gफ़्लैग पास करें. उदाहरण के लिए:emcc -g source.cc -o app.htmlज़्यादा जानकारी के लिए, डीबग की जानकारी के साथ प्रोजेक्ट बनाना लेख पढ़ें.
C/C++ DevTools सहायता (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 सहायता (DWARF) एक्सटेंशन ढूंढें और जानकारी > एक्सटेंशन के विकल्प पर क्लिक करें.- पुराने और नए फ़ाइल पाथ की जानकारी दें.
ज़्यादा जानें
WebAssembly डीबग करने के बारे में ज़्यादा जानकारी के लिए, Chrome DevTools इंजीनियरिंग ब्लॉग देखें: