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