बैकग्राउंड
कुछ समय पहले तक, Chrome DevTools में सिर्फ़ WebAssembly डीबग करने की सुविधा काम करती थी. वह रॉ WebAssembly स्टैक ट्रेस को देखना और अलग किए गए WebAssembly टेक्स्ट फ़ॉर्मैट में अलग-अलग निर्देशों को पूरा करना था.
यह सुविधा किसी भी WebAssembly मॉड्यूल के साथ काम करती है और छोटे और अलग किए गए फ़ंक्शन को डीबग करने में कुछ हद तक मदद करती है. हालांकि, बड़े ऐप्लिकेशन के लिए ऐसा करना मुमकिन नहीं है, क्योंकि अलग किए गए कोड और आपके सोर्स के बीच मैपिंग की जानकारी साफ़ तौर पर नहीं दिखती.
अस्थायी समाधान
इस समस्या को ठीक करने के लिए, Emscripten और DevTools ने कुछ समय के लिए, मौजूदा सोर्स मैप फ़ॉर्मैट को WebAssembly में बदल दिया है. इससे कंपाइल किए गए मॉड्यूल में बाइनरी ऑफ़सेट के बीच, सोर्स फ़ाइलों में मूल जगहों को मैप किया जा सकता है.
हालांकि, सोर्स मैप को टेक्स्ट फ़ॉर्मैट के लिए डिज़ाइन किया गया था. इन फ़ॉर्मैट में JavaScript के सिद्धांतों और वैल्यू की मैपिंग साफ़ तौर पर बताई गई थीं. इन्हें आर्बिट्रेरी सोर्स लैंग्वेज, टाइप सिस्टम, और लीनियर मेमोरी वाले WebAssembly जैसे बाइनरी फ़ॉर्मैट के लिए नहीं बनाया गया. इससे इंटिग्रेशन हैकी हो गया. साथ ही, यह सीमित और Emscripten के बाहर काम नहीं करता.
DWARF डालें
दूसरी ओर, कई स्थानीय भाषाओं में डीबग करने का एक सामान्य फ़ॉर्मैट DWARF पहले से होता है. यह डीबगर को जगहों, वैरिएबल के नाम, टाइप लेआउट वगैरह को ठीक करने से जुड़ी सभी ज़रूरी जानकारी देता है.
हालांकि, WebAssembly में अब भी कुछ खास सुविधाओं को जोड़ा जाना ज़रूरी है, ताकि वे दूसरी सुविधाओं के साथ काम कर सकें. हालांकि, Clang और Rust जैसे कंपाइलर पहले से ही WebAssembly मॉड्यूल में, DWARF जानकारी का उत्सर्जन करने की सुविधा देते हैं. इसकी वजह से, DevTools टीम इसे सीधे DevTools में इस्तेमाल कर पाई.
पहले चरण के तौर पर, DevTools अब इस जानकारी का इस्तेमाल करके नेटिव सोर्स मैपिंग की सुविधा देता है. इसलिए, अब इस जानकारी का इस्तेमाल करके, इनमें से किसी भी कंपाइलर के बनाए गए Wasm मॉड्यूल को डीबग करना शुरू किया जा सकता है. ऐसा करने के लिए, अलग किए गए फ़ॉर्मैट का इस्तेमाल किए बिना या किसी कस्टम स्क्रिप्ट का इस्तेमाल करने की ज़रूरत नहीं है.
इसके बजाय, आपको अपने कंपाइलर को डीबग की जानकारी शामिल करने के लिए कहना होगा, जैसा कि आप आम तौर पर किसी दूसरे प्लैटफ़ॉर्म पर करते हैं. उदाहरण के लिए, Clang और Emscripten में कंपाइल करने के दौरान -g फ़्लैग पास करके ऐसा किया जा सकता है:
clang -g …sources… -target wasm32 -o out.wasm
emcc -g …sources… -o out.js
Rust में एक ही -g फ़्लैग का इस्तेमाल किया जा सकता है:
rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm
इसके अलावा, कार्गो का इस्तेमाल करने पर, डीबग की जानकारी डिफ़ॉल्ट रूप से शामिल की जाएगी:
cargo build --target wasm32-unknown-unknown
DWARF के साथ नए DevTools इंटिग्रेशन में, पहले से ही कोड को बेहतर तरीके से इस्तेमाल करने, ब्रेकपॉइंट सेट करने, और सोर्स भाषाओं में स्टैक ट्रेस की समस्या को हल करने की सुविधा शामिल है.
आने वाला समय
हालांकि, हमें अभी काफ़ी काम करना है.
उदाहरण के लिए, टूल की ओर से देखा जाए, तो Emscripten (Binaryen) और Wasm-pack (vasm-bindgen) पर, अभी तक किए गए बदलावों के बारे में DWARF जानकारी को अपडेट नहीं किया जा सकता. फ़िलहाल, उन्हें इस इंटिग्रेशन का फ़ायदा नहीं मिलेगा.
Chrome DevTools की तरफ़, हम समय के साथ इंटिग्रेशन को बेहतर बनाते रहेंगे, ताकि डीबग करने का अनुभव बेहतर हो सके. इसमें ये शामिल हैं:
- वैरिएबल के नामों को ठीक करना
- प्रिटी-प्रिंटिंग प्रकार
- सोर्स भाषाओं में एक्सप्रेशन का आकलन करना
- ...और भी बहुत कुछ!
आगे मिलने वाले अपडेट के लिए हमारे साथ बने रहें!
झलक दिखाने वाले चैनलों को डाउनलोड करें
अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome के कैनरी, डेव या बीटा वर्शन का इस्तेमाल करें. झलक दिखाने वाले इन चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, सबसे नए वेब प्लैटफ़ॉर्म एपीआई टेस्ट करने और उपयोगकर्ताओं के ऐसा करने से पहले ही, अपनी साइट पर समस्याओं का पता लगाने में मदद मिलती है!
Chrome DevTools टीम से संपर्क करना
पोस्ट में मौजूद नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में बताने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
- DevTools में ज़्यादा विकल्प
> सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें पर जाकर, DevTools से जुड़ी समस्या की शिकायत करें. - @ChromeDevTool पर ट्वीट करें.
- DevTools YouTube वीडियो या DevTools सलाह वाले YouTube वीडियो में नया क्या है, इस बारे में टिप्पणियां करें.