Chrome DevTools में WebAssembly डीबग करने की बेहतर सुविधा

Ingvar Stepanyan
Ingvar Stepanyan

बैकग्राउंड

हाल ही तक, Chrome DevTools में WebAssembly की गड़बड़ी को ठीक करने के लिए, सिर्फ़ कच्चे WebAssembly स्टैक ट्रेस को देखा जा सकता था. साथ ही, डिसअसेम्बल किए गए WebAssembly टेक्स्ट फ़ॉर्मैट में, अलग-अलग निर्देशों को 'स्टैप ओवर' किया जा सकता था.

Chrome DevTools में WebAssembly डीबग करने की सीमित सुविधा का स्क्रीनशॉट.

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

कुछ समय के लिए समस्या हल करने का तरीका

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

सोर्स मैप की मदद से डीबग करने की सुविधा का स्क्रीनशॉट.

हालांकि, सोर्स मैप, JavaScript कॉन्सेप्ट और वैल्यू को साफ़ तौर पर मैप करने वाले टेक्स्ट फ़ॉर्मैट के लिए डिज़ाइन किए गए थे. ये आर्बिट्रेरी सोर्स लैंग्वेज, टाइप सिस्टम, और लीनियर मेमोरी वाले WebAssembly जैसे बाइनरी फ़ॉर्मैट के लिए नहीं थे. इसकी वजह से, इंटिग्रेशन हैकिंग हो गया और यह सीमित हो गया. साथ ही, Emscripten के बाहर यह इंटिग्रेशन ज़्यादा काम नहीं करता.

DWARF जानकारी डालें

दूसरी ओर, कई नेटिव भाषाओं में पहले से ही एक सामान्य डीबगिंग फ़ॉर्मैट, DWARF मौजूद होता है. इससे डीबगर को जगहों, वैरिएबल के नामों, टाइप लेआउट वगैरह को हल करने के लिए सभी ज़रूरी जानकारी मिलती है.

पूरी तरह से काम करने के लिए, वेबअसेंबली से जुड़ी कुछ सुविधाओं को अब भी जोड़ना ज़रूरी है. हालांकि, Clang और Rust जैसे कंपाइलर पहले से ही वेबअसेंबली मॉड्यूल में 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 का इस्तेमाल किया जा रहा है, तो डिबग की जानकारी डिफ़ॉल्ट रूप से शामिल हो जाएगी:

  cargo build --target wasm32-unknown-unknown

DWARF के साथ इस नए DevTools इंटिग्रेशन में, कोड को आगे बढ़ाने, ब्रेकपॉइंट सेट करने, और आपकी सोर्स भाषाओं में स्टैक ट्रेस को ठीक करने की सुविधा पहले से ही मौजूद है.

DWARF की मदद से की जाने वाली नई डीबगिंग का स्क्रीनशॉट.

आने वाला समय

हालांकि, अभी बहुत काम करना बाकी है. उदाहरण के लिए, टूलिंग की बात करें, तो Emscripten (Binaryen) और Wasm-pack (vasm-bindgen) अभी तक किए गए बदलावों के बारे में DWARF जानकारी अपडेट नहीं कर सकते. फ़िलहाल, उन्हें इस इंटिग्रेशन का फ़ायदा नहीं मिलेगा.

Chrome DevTools की तरफ़ हम इंटिग्रेशन को बेहतर बनाने की दिशा में काम कर रहे हैं, ताकि डीबग करने की प्रोसेस को आसान बनाया जा सके. इसमें ये शामिल हैं:

  • वैरिएबल के नामों को हल करना
  • प्रिटी-प्रिंट के टाइप
  • सोर्स भाषाओं में एक्सप्रेशन का आकलन करना
  • …और ऐसी ही अन्य सुविधाएं!

आने वाले समय में अपडेट पाने के लिए हमारे साथ बने रहें!

झलक वाले चैनल डाउनलोड करना

Chrome Canary, Dev या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. इसके अलावा, इनकी मदद से उपयोगकर्ताओं से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!

Chrome DevTools की टीम से संपर्क करना

DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.