JavaScript सोर्स मैप के बारे में जानकारी

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

सोर्स मैप, किसी मिली-जुली/छोटी फ़ाइल को वापस किसी बिल्ट-इन स्थिति पर मैप करने का तरीका है. जब JavaScript फ़ाइलों को छोटा करने और एक साथ इस्तेमाल करने के साथ-साथ प्रोडक्शन के लिए तैयार किया जाता है, तब सोर्स मैप जनरेट होता है. इस मैप में, आपकी मूल फ़ाइलों के बारे में जानकारी होती है. जब जनरेट किए गए JavaScript में किसी लाइन और कॉलम के नंबर के बारे में क्वेरी की जाती है, तो सोर्स मैप में एक लुकअप किया जा सकता है. यह फ़ंक्शन, मूल जगह दिखाता है. डेवलपर टूल (मौजूदा समय में WebKit दूसरा बिल्ड, Google Chrome या Firefox 23+) सोर्स मैप को अपने-आप पार्स कर सकता है. साथ ही, इससे ऐसा लगता है कि मानो आप कम से कम फ़ाइल (बिना स्प्रेडशीट वाली फ़ाइलें) चला रहे हों.

डेमो की मदद से, जनरेट किए गए सोर्स वाले टेक्स्ट एरिया में कहीं भी राइट क्लिक किया जा सकता है. "मूल जगह पाएं" विकल्प चुनने पर, जनरेट की गई लाइन और कॉलम नंबर पास करके, सोर्स मैप पर क्वेरी चलाई जाएगी. इसके बाद, ओरिजनल कोड में पोज़िशन देखें. पक्का करें कि आपका कंसोल खुला हो, ताकि आप आउटपुट देख सकें.

असल दुनिया

Source Maps को लागू करने की ये प्रोसेस देखने से पहले, यह पक्का करें कि आपने सोर्स मैप की सुविधा को हर रात Chrome कैनरी या WebKit में चालू किया हो. इसके लिए, डेवलपर टूल पैनल में सेटिंग आइकॉन पर क्लिक करें और "सोर्स मैप चालू करें" विकल्प को चुनें.

Firefox 23+ में पहले से मौजूद डेव टूल में, सोर्स मैप डिफ़ॉल्ट रूप से चालू होते हैं.

मुझे सोर्स मैप पर ध्यान क्यों देना चाहिए?

अभी सोर्स मैपिंग सिर्फ़ कंप्रेस्ड/कॉम्बिन्ड JavaScript से कंप्रेस/अनकॉम्बिन्ड JavaScript के बीच काम कर रही है, लेकिन CoffeeScript जैसी कंपाइल की गई JavaScript भाषाओं और SASS या LESS जैसे सीएसएस प्रीप्रोसेसर के लिए सपोर्ट जोड़ने की संभावना से भविष्य काफ़ी उज्ज्वल है.

आने वाले समय में, किसी भी भाषा का इस्तेमाल आसानी से किया जा सकता है. जैसे, सोर्स मैप के साथ इसे ब्राउज़र में इस्तेमाल किया जा सकता हो:

• CoffeeScript
• ECMAScript 6 और उसके बाद के वर्शन
• SASS/कम और अन्य
• JavaScript को इकट्ठा करने वाली कोई भी भाषा

Firefox कंसोल के एक प्रयोगात्मक बिल्ड में डीबग किए जा रहे CoffeeScript के इस स्क्रीनकास्ट पर एक नज़र डालें:

Google Web Toolkit (GWT) ने हाल ही में Source Maps के लिए सहायता जोड़ी है. GWT टीम के रे क्रॉमवेल ने शानदार स्क्रीनकास्ट किया. इसमें उन्होंने सोर्स मैप से जुड़ी सहायता को इस्तेमाल करते हुए दिखाया.

एक और उदाहरण जिसे मैंने एक साथ रखा है वह Google की Traceur लाइब्रेरी का इस्तेमाल करता है, जो आपको ES6 (ECMAScript 6 या Next) लिखने और उसे ES3 के साथ काम करने वाले कोड में कंपाइल करने की सुविधा देती है. ट्रेसर कंपाइलर एक सोर्स मैप भी जनरेट करता है. सोर्स मैप की मदद से, ES6 के लक्षणों और क्लास के इस डेमो पर एक नज़र डालें. इसमें यह देखा जा सकता है कि ये सुविधाएं ब्राउज़र में कैसे काम करती हैं.

डेमो में टेक्स्ट एरिया आपको ES6 लिखने की सुविधा भी देता है, जिसे तुरंत कंपाइल किया जाता है और सोर्स मैप और उसके जैसा ES3 कोड जनरेट किया जाता है.

डेमोग्राफ़िक जानकारी: ES6 लिखें, इसे डीबग करें, और सोर्स मैपिंग को इस्तेमाल करें

सोर्स मैप कैसे काम करता है?

फ़िलहाल, सोर्स मैप बनाने के लिए जो JavaScript कंपाइलर/मिनीफ़ायर काम करता है वह क्लोज़र कंपाइलर है. (मैं बाद में आपको इसका इस्तेमाल करने का तरीका बताऊंगा.) अपनी JavaScript को जोड़ने और छोटा करने के बाद, इसके साथ-साथ एक सोर्स मैप फ़ाइल भी मौजूद होगी.

फ़िलहाल, Closure कंपाइलर के आखिर में वह खास टिप्पणी नहीं जोड़नी होती है जो ब्राउज़र डेवलपर टूल को यह बताने के लिए ज़रूरी होती है कि कोई सोर्स मैप उपलब्ध है:

//# sourceMappingURL=/path/to/file.js.map

इससे डेवलपर टूल, कॉल की जगह की जानकारी को ओरिजनल सोर्स फ़ाइलों में मैप कर सकते हैं. पहले, टिप्पणी की प्रग्मा वैल्यू //@ थी. हालांकि, इससे जुड़ी कुछ समस्याओं और आईई के शर्तों के साथ कंपाइलेशन टिप्पणियां करने की वजह से, इसे //# के तौर पर सेट करने का फ़ैसला लिया गया. फ़िलहाल, टिप्पणी करने की नई प्रक्रिया, Chrome कैनरी, WebKit Nightly, और Firefox 24+ के साथ काम करती है. सिंटैक्स में इस बदलाव से, sourceURL पर भी असर पड़ता है.

अगर आपको अजीब टिप्पणी का विचार पसंद नहीं है, तो आप वैकल्पिक रूप से अपनी कंपाइल की गई JavaScript फ़ाइल पर एक विशेष हेडर सेट कर सकते हैं:

X-SourceMap: /path/to/file.js.map

टिप्पणी की तरह, यह आपके सोर्स मैप के उपभोक्ता को यह बताएगा कि JavaScript फ़ाइल से जुड़ा सोर्स मैप कहां देखा जाए. यह हेडर, उन भाषाओं में सोर्स मैप का रेफ़रंस देने की समस्या के बारे में भी बताता है जिनमें सिंगल-लाइन टिप्पणियां करने की सुविधा उपलब्ध नहीं है.

सोर्स मैप फ़ाइल सिर्फ़ तब डाउनलोड की जाएगी, जब आपने सोर्स मैप की सुविधा चालू की हो और आपके डेव टूल चालू हों. आपको अपनी मूल फ़ाइलें भी अपलोड करनी होंगी, ताकि ज़रूरत पड़ने पर डेव टूल उनका संदर्भ दे सकें और उन्हें दिखा सकें.

मैं सोर्स मैप कैसे जनरेट करूं?

आपको अपनी JavaScript फ़ाइलों के लिए सोर्स मैप को छोटा करने, जोड़ने, और जनरेट करने के लिए क्लोज़र कंपाइलर का इस्तेमाल करना होगा. इसका निर्देश इस तरह का है:

java -jar compiler.jar \
--js script.js \
--create_source_map ./script-min.js.map \
--source_map_format=V3 \
--js_output_file script-min.js

दो ज़रूरी कमांड फ़्लैग --create_source_map और --source_map_format हैं. यह ज़रूरी है, क्योंकि इसका डिफ़ॉल्ट वर्शन वर्शन 2 है और हम सिर्फ़ वर्शन 3 के साथ काम करना चाहते हैं.

सोर्स मैप की बनावट

सोर्स मैप को बेहतर ढंग से समझने के लिए, हम सोर्स मैप फ़ाइल का एक छोटा उदाहरण लेंगे, जिसे क्लोज़्ड कंपाइलर जनरेट करेगा. साथ ही, हम "मैपिंग" सेक्शन के काम करने के तरीके के बारे में ज़्यादा जानकारी देंगे. नीचे दिया गया उदाहरण, V3 स्पेसिफ़िकेशन के उदाहरण से थोड़ा अलग है.

{
    version : 3,
    file: "out.js",
    sourceRoot : "",
    sources: ["foo.js", "bar.js"],
    names: ["src", "maps", "are", "fun"],
    mappings: "AAgBC,SAAQ,CAAEA"
}

ऊपर से देखा जा सकता है कि सोर्स मैप, एक लिटरल ऑब्जेक्ट है. इसमें बहुत सारी रस भरी जानकारी मौजूद है:

• वर्शन नंबर जिस पर सोर्स मैप आधारित है
• जनरेट किए गए कोड की फ़ाइल का नाम (आपकी छोटी की गई या मिली-जुली प्रोडक्शन फ़ाइल)
• सोर्स रूट की मदद से, सोर्स को फ़ोल्डर स्ट्रक्चर के साथ पहले जोड़ा जा सकता है - यह जगह बचाने वाली तकनीक भी है
• स्रोतों में वे सभी फ़ाइल नाम मौजूद हैं जिन्हें एक साथ जोड़ा गया है
• नामों में आपके पूरे कोड में दिखने वाले सभी वैरिएबल/तरीकों के नाम शामिल होते हैं.
• आखिर में, मैपिंग प्रॉपर्टी में Base64 VLQ वैल्यू का इस्तेमाल किया जाता है. असल में जगह बचाने का काम यहां किया जाता है.

Base64 VLQ और सोर्स मैप को छोटा रखना

मूल रूप से, सोर्स मैप की स्पेसिफ़िकेशन में, सभी मैपिंग के बारे में बहुत ज़्यादा जानकारी दी गई थी. इसकी वजह से, सोर्स मैप, जनरेट किए गए कोड के साइज़ से करीब 10 गुना ज़्यादा हो गया. वर्शन दो ने उसे करीब 50% कम कर दिया और वर्शन तीन में फिर से 50% की कमी हो गई. इसलिए, 133kB की फ़ाइल के लिए आपका आखिर ~300kB सोर्स मैप हुआ.

तो उन्होंने जटिल मैपिंग को बनाए रखते हुए आकार कैसे कम किया?

VLQ (वैरिएबल लंबाई की संख्या) का इस्तेमाल, वैल्यू को Base64 वैल्यू में कोड में बदलने के साथ किया जाता है. मैपिंग प्रॉपर्टी एक बहुत बड़ी स्ट्रिंग है. इस स्ट्रिंग में सेमीकोलन (;) होते हैं. ये जनरेट की गई फ़ाइल में मौजूद लाइन नंबर दिखाते हैं. हर लाइन में कॉमा (,) होते हैं, जो उस लाइन में मौजूद हर सेगमेंट के बारे में बताते हैं. वैरिएबल की लंबाई वाले फ़ील्ड में इनमें से हर सेगमेंट या तो 1, 4 या 5 है. इनमें से कुछ लंबे समय तक दिख सकती हैं, लेकिन इनमें कंटिन्युएशन बिट शामिल होती हैं. हर सेगमेंट पिछले सेगमेंट के आधार पर बनता है. इससे फ़ाइल का साइज़ कम किया जा सकता है, क्योंकि हर बिट पिछले सेगमेंट की तुलना में थोड़ा कम होता है.

जैसा कि ऊपर बताया गया है, हर सेगमेंट की लंबाई 1, 4 या 5 हो सकती है. इस डायग्राम को एक कंटिन्यूएशन बिट (g) के साथ चार की वैरिएबल लंबाई माना जाता है. हम इस सेगमेंट का विश्लेषण करेंगे और आपको दिखाएंगे कि सोर्स मैप, मूल जगह से कैसे काम करता है.

ऊपर दिखाई गई वैल्यू सिर्फ़ Base64 से डिकोड की गई वैल्यू हैं. इनकी सही वैल्यू पाने के लिए, थोड़ी और प्रोसेसिंग है. हर सेगमेंट से आम तौर पर पांच चीज़ें बनती हैं:

• जनरेट किया गया कॉलम
• वह ओरिजनल फ़ाइल जिसमें यह कॉन्टेंट मौजूद था
• मूल लाइन नंबर
• मूल कॉलम
• और, अगर उपलब्ध हो, तो मूल नाम

हर सेगमेंट का कोई नाम, तरीका का नाम या आर्ग्युमेंट नहीं होता. इसलिए, पूरे सेगमेंट को चार से पांच अलग-अलग लंबाई के बीच स्विच किया जाएगा. ऊपर दिए गए सेगमेंट डायग्राम में g वैल्यू को कंटिन्यूएशन बिट कहा जाता है. इससे Base64 VLQ डिकोडिंग स्टेज को और भी ऑप्टिमाइज़ किया जा सकता है. कॉन्टिन्यूशन बिट की मदद से, सेगमेंट की वैल्यू बनाई जा सकती है. इससे, बड़ी संख्या को स्टोर किए बिना स्टोर किया जा सकता है. यह स्पेस बचाने वाली एक बेहतरीन तकनीक है, जिसकी शुरुआत मिडी फ़ॉर्मैट में है.

ऊपर दिए गए डायग्राम AAgBC को आगे प्रोसेस करने के बाद 0, 0, 32, 16, 1 दिखेगा - 32, कॉन्टिन्यूशन बिट है, जिससे नीचे दी गई वैल्यू 16 बनाने में मदद मिलती है. Base64 में पूरी तरह से डिकोड किया गया B 1 है. इसलिए, 0, 0, 16, 1 जैसी अहम वैल्यू इस्तेमाल की गई हैं. इसके बाद, इससे हमें पता चलता है कि जनरेट किए गए फ़ाइल मैप की लाइन 1 (लाइनों को सेमी कोलन से रखा जाता है) कॉलम 0 से फ़ाइल 0 (फ़ाइलों 0 का कलेक्शन foo.js है), कॉलम 1 पर लाइन 16 है.

सेगमेंट को डिकोड करने का तरीका दिखाने के लिए, मैं Mozilla की Source Maps JavaScript लाइब्रेरी का संदर्भ दूंगा. आप चाहें, तो WebKit dev टूल का सोर्स मैपिंग कोड भी देखें. यह कोड JavaScript में भी लिखा जाता है.

यह समझने के लिए कि हमें B से वैल्यू 16 कैसे मिलती है, हमें बिटवाइज़ ऑपरेटर के बारे में बुनियादी जानकारी होनी चाहिए. साथ ही, यह भी समझना ज़रूरी है कि सोर्स मैपिंग के लिए स्पेसिफ़िकेशन कैसे काम करता है. पिछले अंक, g को, बिटवाइस AND (&) ऑपरेटर का इस्तेमाल करके अंक (32) और VLQ_CONTINUATION_BIT (बाइनरी 100000 या 32) की तुलना करके कंटिन्यूएशन बिट के तौर पर फ़्लैग किया जाता है.

32 & 32 = 32
// or
100000
|
|
V
100000

यह हर उस बिट पोज़िशन पर 1 दिखाता है जहां दोनों जगह दिखती है. इसलिए, 33 & 32 की Base64 डिकोड की गई वैल्यू 32 दिखाएगी, क्योंकि वे सिर्फ़ 32 बिट की जगह शेयर करती हैं, जैसा कि ऊपर दिए गए डायग्राम में देखा जा सकता है. इसके बाद, पिछले कॉन्टिन्यूशन बिट के लिए, बिट की शिफ़्ट वैल्यू 5 बढ़ जाती है. ऊपर दिए गए मामले में, यह सिर्फ़ एक बार 5 से शिफ़्ट हुआ है, इसलिए 1 (B) को 5 से शिफ़्ट करना बाकी है.

1 <<../ 5 // 32

// Shift the bit by 5 spots
______
|    |
V    V
100001 = 100000 = 32

इसके बाद, संख्या (32) को एक जगह राइट शिफ़्ट करके, उस वैल्यू को VLQ से साइन की गई वैल्यू से बदला जाता है.

32 >> 1 // 16
//or
100000
|
 |
 V
010000 = 16

हमारे पास यह है: इस तरह आप 1 को 16 में बदल देते हैं. यह काफ़ी जटिल प्रक्रिया लग सकती है, लेकिन जब संख्या बढ़ने लगती है, तब इसका सही फ़ैसला बढ़ जाता है.

संभावित XSSI समस्याएं

इस स्पेसिफ़िकेशन में, क्रॉस साइट स्क्रिप्ट शामिल करने से जुड़ी उन समस्याओं के बारे में बताया गया है जो सोर्स मैप के इस्तेमाल की वजह से हो सकती हैं. इसे कम करने के लिए, हमारा सुझाव है कि आप सोर्स मैप की पहली लाइन की शुरुआत में ")]}" जोड़ें, ताकि JavaScript को जान-बूझकर अमान्य किया जा सके. इससे सिंटैक्स में गड़बड़ी पैदा होगी. WebKit डेवलपर टूल पहले ही इसे प्रबंधित कर सकते हैं.

if (response.slice(0, 3) === ")]}") {
    response = response.substring(response.indexOf('\n'));
}

जैसा कि ऊपर दिखाया गया है, पहले तीन वर्णों को स्लाइस किया जाता है, ताकि यह जांच की जा सके कि वे निर्देश में सिंटैक्स की गड़बड़ी से मेल खाते हैं या नहीं. अगर ऐसा है, तो पहली नई लाइन की इकाई (\n) तक ले जाने वाले सभी वर्ण हटा दिए जाते हैं.

sourceURL और displayName इस्तेमाल किए जा रहे हैं: बराबर और पहचान छिपाने वाले फ़ंक्शन

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

पहला सहायक, //# sourceMappingURL प्रॉपर्टी से बहुत मिलता-जुलता दिखता है और असल में उसका सोर्स मैप V3 की खास बातों में बताया गया है. नीचे दी गई खास टिप्पणी को अपने कोड में शामिल करके, उसका आकलन किया जाएगा. इन टिप्पणियों को नाम दिया जा सकता है, ताकि वे आपके डेव टूल में ज़्यादा लॉजिकल नामों के तौर पर दिखें. CoffeeScript कंपाइलर का इस्तेमाल करके एक सामान्य डेमो देखें:

डेमोग्राफ़िक जानकारी: देखें कि eval() का कोड, sourceURL के ज़रिए स्क्रिप्ट के तौर पर किस तरह दिखता है

//# sourceURL=sqrt.coffee

अन्य हेल्पर, आपको पहचान छिपाने वाले फ़ंक्शन के मौजूदा कॉन्टेक्स्ट पर उपलब्ध displayName प्रॉपर्टी का इस्तेमाल करके, फ़ंक्शन को नाम देने की सुविधा देता है. displayName प्रॉपर्टी को काम करते देखने के लिए, नीचे दिए गए डेमो को प्रोफ़ाइल बनाएं.

btns[0].addEventListener("click", function(e) {
    var fn = function() {
        console.log("You clicked button number: 1");
    };

    fn.displayName = "Anonymous function of button 1";

    return fn();
}, false);

डेव टूल में अपने कोड की प्रोफ़ाइल बनाते समय, (anonymous) जैसी चीज़ के बजाय displayName प्रॉपर्टी दिखेगी. हालांकि, DisplayName अब पानी में खत्म हो गया है और इसे Chrome में इस्तेमाल नहीं किया जा सकेगा. हालांकि, सारी उम्मीद अभी खत्म नहीं हुई है और debugName नाम के एक बेहतर प्रस्ताव का सुझाव दिया गया है.

लिखने के समय तक eval नाम सिर्फ़ Firefox और WebKit ब्राउज़र में उपलब्ध है. displayName प्रॉपर्टी सिर्फ़ WebKit नाइटलीज़ में उपलब्ध है.

आइए एक साथ मिलकर काम करें

फ़िलहाल, CoffeeScript में सोर्स मैप सहायता जोड़े जाने पर बहुत लंबी चर्चा चल रही है. इस समस्या को देखें और CoffeeScript कंपाइलर में सोर्स मैप जनरेट करने के लिए, अपना सपोर्ट जोड़ें. यह CoffeeScript और इसके फ़ॉलोअर के लिए एक बड़ी जीत होगी.

UglifyJS में सोर्स मैप से जुड़ी एक समस्या भी है, जिस पर आपको भी ध्यान देना चाहिए.

कई tools सोर्स मैप जनरेट करते हैं, जिनमें कॉफ़ीस्क्रिप्ट कंपाइलर भी शामिल है. मेरे हिसाब से यह एक मूट पॉइंट है.

हमारे लिए जितने ज़्यादा टूल उपलब्ध होंगे वे सोर्स मैप को बेहतर बना पाएंगे. इसलिए, आगे बढ़ें और अपने पसंदीदा ओपन सोर्स प्रोजेक्ट में सोर्स मैप का इस्तेमाल करने को कहें या जोड़ें.

यह सटीक नहीं है

एक चीज़ जो सोर्स मैप में अभी उपलब्ध नहीं है वह है स्मार्टवॉच के एक्सप्रेशन. समस्या यह है कि मौजूदा एक्ज़ीक्यूशन कॉन्टेक्स्ट में, किसी आर्ग्युमेंट या वैरिएबल के नाम की जांच करने की कोशिश करने पर कुछ भी नहीं दिखेगा, क्योंकि यह असल में मौजूद ही नहीं होता. इसके लिए, आपको उस आर्ग्युमेंट/वैरिएबल का असली नाम खोजना होगा जिसकी जांच करनी है. यह नाम, आपके कंपाइल किए गए JavaScript कोड में मौजूद असली आर्ग्युमेंट/वैरिएबल के नाम की तुलना में खोजा जा सकता है.

बेशक यह एक ऐसी समस्या है जिसे सुलझाया जा सकता है और सोर्स मैप पर ज़्यादा ध्यान देने से हमें कुछ शानदार सुविधाएं और बेहतर स्थिरता देखने को मिल सकती हैं.

समस्याएंं

हाल ही में, jQuery 1.9 ने ऑफ़िकल सीडीएन से दिखाए जाने पर सोर्स मैप के लिए सहायता जोड़ी है. jQuery लोड होने से पहले, IE कंडिशनल कंपाइलेशन टिप्पणियों (//@cc_on) का इस्तेमाल किए जाने पर, यह एक खास गड़बड़ी के बारे में भी बताता है. इसके बाद से, sourceMappingURL को मल्टी-लाइन टिप्पणी में रैप करके इसे कम करने की प्रतिसाद हुई है. सीखी जाने वाली सीखने की प्रक्रिया के दौरान, शर्त के साथ टिप्पणी करने की सुविधा का इस्तेमाल न करें.

तब से इस समस्या को ठीक कर दिया गया है. ऐसा इसलिए किया गया है, क्योंकि सिंटैक्स में बदलाव करके इसे //# किया गया है.

टूल और संसाधन

यहां कुछ और संसाधन और टूल दिए गए हैं, जिन्हें आपको देखना चाहिए:

• निक फ़िट्ज़गेराल्ड के पास सोर्स मैप सहायता के साथ UglifyJS का एक फ़ोर्क है
• पॉल आयरिश के पास सोर्स मैप दिखाने वाला एक छोटा डेमो है
• WebKit के ज़रिए इस टूल को कब लॉन्च किया गया है, इसके बारे में जानें
• इस बदलाव में एक लेआउट टेस्ट भी शामिल था, जिससे यह पूरा लेख शुरू हुआ
• Mozilla में एक गड़बड़ी है. आपको इसके बिल्ट-इन कंसोल में सोर्स मैप की स्थिति के बारे में जानना चाहिए
• कॉनराड इरविन ने Ruby उपयोगकर्ताओं के लिए एक बेहद काम का सोर्स मैप जेम लिखा है
• eval नामिंग और displayName प्रॉपर्टी के बारे में और पढ़ें
• सोर्स मैप बनाने के लिए, Cloज़र कंपाइलर सोर्स देखा जा सकता है
• यहां कुछ स्क्रीनशॉट हैं और GWT सोर्स मैप के साथ काम करने की बात की जा रही है

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

अब इंतज़ार किस बात का? अब सभी प्रोजेक्ट के लिए सोर्स मैप जनरेट करना शुरू करें!