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

रायन सेडन

Twitter होम पेज

चेतावनी: सोर्स मैप की खास बातें अपडेट कर दी गई हैं और यह लेख अब अप-टू-डेट नहीं है. नई जानकारी के लिए, सोर्स मैप क्या हैं? पढ़ें.

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

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

इसे आज़माएं: डेमो: मूल जगह की जानकारी पाएं.

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

असल दुनिया

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

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

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

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

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

• 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 को कंबाइंड और छोटा करने के बाद, उसके साथ एक सोर्स मैप फ़ाइल मौजूद रहेगी.

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

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

इससे डेवलपर टूल, ओरिजनल सोर्स फ़ाइलों में कॉल को वापस उनकी जगह पर मैप कर सकते हैं. पहले टिप्पणी //@ थी, लेकिन इसमें कुछ समस्याओं की वजह से और IE के शर्तों के साथ कंपाइलेशन उस पर टिप्पणी की गई है. टिप्पणी को //# में बदलने का फ़ैसला लिया गया. फ़िलहाल, 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"
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 <<../ 5 // 32

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

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

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 कार्रवाई में हैं: Eval और अनाम फ़ंक्शन

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

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

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

//# sourceURL=sqrt.coffee

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

इसे आज़माएं: डेमो: DisplayName की मदद से, नाम वाले ऐन फ़ंक्शन (सिर्फ़ Webkit Nightly)

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 nameing और displayName प्रॉपर्टी के बारे में कुछ और जानकारी
• सोर्स मैप बनाने के लिए, Closure Compilers का सोर्स देखा जा सकता है
• GWT के सोर्स मैप से जुड़े कुछ स्क्रीनशॉट और सहायता टीम यहां उपलब्ध है

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

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