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

Ingvar Stepanyan
Ingvar Stepanyan

बैकग्राउंड

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

Chrome DevTools में, पहले सीमित तौर पर उपलब्ध 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 का इस्तेमाल किया जा रहा है, तो डिबग की जानकारी डिफ़ॉल्ट रूप से शामिल हो जाएगी:

  cargo build --target wasm32-unknown-unknown

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

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

आने वाला समय

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

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

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

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

झलक दिखाने वाले चैनलों को डाउनलोड करें

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

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

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