बैकग्राउंड
हाल तक, WebAssembly की मदद से, सिर्फ़ Chrome DevTools को डीबग करने की सुविधा काम कर रही थी रॉ 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 Canary, Dev या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. झलक दिखाने वाले इन चैनलों की मदद से, DevTools की नई सुविधाओं को ऐक्सेस किया जा सकता है और वेब प्लैटफ़ॉर्म के बेहतरीन एपीआई की जांच की जा सकती है. साथ ही, उपयोगकर्ताओं से पहले ही अपनी साइट की समस्याओं का पता लगाया जा सकता है!
Chrome DevTools की टीम से संपर्क करना
पोस्ट में नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
- ज़्यादा विकल्प
> का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें सहायता > DevTools में DevTools से जुड़ी समस्याओं की शिकायत करें. - @ChromeDevTools पर ट्वीट करें.
- DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.