जावास्क्रिप्ट स्रोत मानचित्र का परिचय

क्या आपने कभी सोचा है कि अगर कोड को एक एकल फ़ाइल में विलय कर दिया जाए और उत्पादन के माहौल में मिनिमाइज्ड जावास्क्रिप्ट को सुविधाजनक तरीके से पढ़ा जा सके और यहां तक ​​कि प्रदर्शन का त्याग किए बिना भी डीबग किया जा सके तो कितना अच्छा होगा? अब यह संभव है यदि आप स्रोत नक्शे नामक चीज़ का उपयोग करते हैं।

संक्षेप में, यह उन फ़ाइलों के साथ एक छोटा / मर्ज किए गए फ़ाइल को संबद्ध करने का एक तरीका है, जहाँ से यह आया था। असेंबली के दौरान, लड़ाकू वातावरण के लिए, फ़ाइलों को छोटा करने और संयोजन करने के अलावा, एक मैपर फ़ाइल भी उत्पन्न होती है जिसमें स्रोत फ़ाइलों के बारे में जानकारी होती है। जब किसी संदर्भ में एक निर्दिष्ट फ़ाइल में एक जगह बनाई जाती है, तो मैपर में एक खोज की जाती है, जो स्रोत फ़ाइल में लाइन और चरित्र की गणना करती है। डेवलपर टूल (WebKit नाइटली बिल्ड या Google Chrome कैनरी) इस फ़ाइल को स्वचालित रूप से पार्स कर सकता है और फ़ाइलों को पारदर्शी रूप से प्रतिस्थापित कर सकता है, जैसे कि स्रोत फ़ाइलों के साथ काम करना। लेखन के समय ( मूल लेख - लगभग अनुवाद। ), फ़ायरफ़ॉक्स ने सोर्स मैप के लिए समर्थन के विकास को अवरुद्ध कर दिया है। मोज़िलाविक स्रोत मानचित्र पर अधिक पढ़ें।

एक उदाहरण - स्रोत कोड में जगह का सही निर्धारण

इस उदाहरण में, आप textarea को कहीं भी राइट-क्लिक कर सकते हैं और "मूल स्थान प्राप्त करें" चुनें। इस स्थिति में, कीपर फाइल को लाइन और कैरेक्टर नंबर के ट्रांसफर के साथ मिनिफाइज्ड कोड में करने की अपील की जाएगी, और सोर्स फाइल से संबंधित कोड को दिखाया जाएगा। कंसोल स्रोत फ़ाइल और अन्य रोचक जानकारी में लाइन नंबर और प्रतीक संख्या प्रदर्शित करेगा।

वास्तविक उपयोग

निम्नलिखित उदाहरण को देखने से पहले, आपको क्रोम कैनरी या वेबकिट में स्रोत मानचित्र दृश्य को रात में सक्रिय करने की आवश्यकता है, इसके लिए गुणों में "स्रोत मानचित्र सक्षम करें" आइटम देखें (स्क्रीनशॉट देखें)


चलिए जारी रखते हैं। पिछला उदाहरण दिलचस्प था, लेकिन इसका उपयोग कैसे किया जा सकता है? अपने अनुकूलित Google Chrome ब्राउज़र के साथ dev.fontdragr.com पर जाएं और आप देखेंगे कि पृष्ठ पर मौजूद जावास्क्रिप्ट को संकलित नहीं किया गया है और आप व्यक्तिगत js फ़ाइलों को देख सकते हैं। यह मैपर के उपयोग के लिए सभी धन्यवाद है, लेकिन वास्तव में पृष्ठ पर कोड संकलित है। सभी त्रुटियों, लॉग प्रविष्टियों और ब्रेकप्वाइंट को स्रोत कोड पर मैप किया जाएगा, और कोड को डीबग करना बहुत सुविधाजनक होगा। नतीजतन, आप एक परीक्षण के रूप में उत्पादन साइट के साथ काम कर सकते हैं।

उदाहरण - fontdragr.com पर कंसोल देखें

हमें सोर्स मैप्स की आवश्यकता क्यों है?

मैपिंग अब केवल स्रोत फ़ाइलों और संपीड़ित / मर्ज किए गए संस्करण के बीच काम करता है, लेकिन जावास्क्रिप्ट (उदाहरण के लिए कॉफीस्क्रिप्ट) में संकलित भाषाओं के लिए मानचित्रण बनाने की बात है, और यहां तक ​​कि सीएसएस प्रीप्रोसेसर्स जैसे एसएएसएस और लेस के लिए भी समर्थन है।
भविष्य में, हम आसानी से लगभग किसी भी भाषा का उपयोग कर सकते हैं, जैसे कि यह मूल रूप से ब्राउज़र द्वारा समर्थित था:

• CoffeeScript
• ECMAScript 6 और इसके बाद के संस्करण
• SASS / LESS आदि।
• लगभग कोई भी भाषा जो जावास्क्रिप्ट में संकलित है

उस कॉफी की जांच करें जिसमें फ़ायरफ़ॉक्स कंसोल के एक प्रायोगिक बिल्ड में CoffeeScript डीबग किया गया है:


Google वेब टूलकिट (GWT) ने हाल ही में GWT से सोर्स मैप्स और रे क्रॉमवेल के लिए समर्थन जोड़ा, जिससे यह पता चलता है कि सोर्स मैप कैसे काम करता है।


एक अन्य उदाहरण Google ट्रेसुर लाइब्रेरी का उपयोग करता है, जो आपको ES6 (ECMAScript 6) में लिखने और ES3- संगत कोड में संकलन करने की अनुमति देता है। ट्रेसुर कंपाइलर एक स्रोत मानचित्र भी बनाता है। ES6 सुविधाओं (कक्षाओं और लक्षणों) का उपयोग करने का एक उदाहरण देखें , जैसे कि वे मूल रूप से ब्राउज़र द्वारा समर्थित थे। उदाहरण में Textarea भी आपको ES6 कोड लिखने की अनुमति देता है जो ES3 में मक्खी पर संकलन करेगा और एक फ़ाइल-मैपर भी बनाएगा।

उदाहरण - आप ES6 पर कोड लिख सकते हैं और तुरंत डिबगर में देख सकते हैं

यह कैसे काम करता है?

स्रोत मानचित्र समर्थन के साथ एकमात्र कंपाइलर / मिनीफ़िक्सर क्लोजर कंपाइलर है (संकलन के दौरान मैपर कैसे उत्पन्न किया जाए यह नीचे वर्णित है)। जावास्क्रिप्ट को छोटा करते समय, एक मैपर फ़ाइल भी बनाई जाएगी। जबकि क्लोजर कंपाइलर Google क्रोम कैनरी डे टूल्स के लिए एक विशेष टिप्पणी नहीं जोड़ता है जो फाइल मैपर उपलब्ध है, उस फाइल के अंत में:

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

ऐसी टिप्पणी ब्राउज़र को मैपर फ़ाइल का उपयोग करके स्रोत फ़ाइल में सही जगह की खोज करने की अनुमति देती है। यदि आपको अजीब टिप्पणियों का उपयोग करने का विचार पसंद नहीं है, तो आप संकलित फ़ाइल में एक विशेष शीर्षक जोड़ सकते हैं:

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

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

प्रॉपर्टी इनेबल होने और कंसोल ओपन होने पर ही मैपर फाइल डाउनलोड होगी। ठीक है, ज़ाहिर है, आपको स्रोत फ़ाइलों को भरने की आवश्यकता होगी ताकि वे मैपर में इंगित किए गए रास्तों में उपलब्ध हों।

फ़ाइल-मैपर कैसे उत्पन्न करें?

जैसा कि ऊपर उल्लेख किया गया है, आपको आवश्यक जावास्क्रिप्ट फ़ाइलों के लिए एक मैपर फ़ाइल को छोटा करने, चमकाने और उत्पन्न करने के लिए क्लोजर कंपाइलर की आवश्यकता होगी। ऐसा करने के लिए, कमांड चलाएँ:

 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 वे --create_source_map और --source_map_format । उत्तरार्द्ध की जरूरत है, क्योंकि डिफ़ॉल्ट रूप से, mapper V2 प्रारूप में बनाया गया है, और हमें V3 की आवश्यकता है।

स्रोत मानचित्र आंतरिक उपकरण

स्रोत मानचित्र को बेहतर ढंग से समझने के लिए, उदाहरण के लिए एक छोटा फ़ाइल-मैपर लें और विस्तार से विश्लेषण करें कि "एड्रेसिंग" कैसे काम करता है। नीचे V3 कल्पना से थोड़ा संशोधित उदाहरण है:

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

आप देख सकते हैं कि यह एक नियमित वस्तु शाब्दिक है जिसमें सभी आवश्यक जानकारी हैं:

• मैपर संस्करण
• उत्पादन के लिए निर्धारित / विलय की गई फ़ाइल का नाम
• sourceRoot स्रोत फ़ाइलों के लिए sourceRoot उपसर्ग को sourceRoot अनुमति देता है
• sources में स्रोत फ़ाइलों के नाम शामिल हैं
• names परिणामी फ़ाइल से चर / कार्यों के सभी वास्तविक names शामिल हैं
• और mappings संबंधित नामांकित नाम हैं

BASE64 VLQ या सोर्स मैप को छोटा कैसे करें

प्रारंभ में, विनिर्देश में सभी निर्भरताओं का एक बहुत विस्तृत आउटपुट वर्णित किया गया था, जो फ़ाइल-मैपर को उत्पन्न फ़ाइल से 10 गुना बड़ा बनाता था। दूसरे संस्करण ने फ़ाइल का आकार आधे से कम कर दिया, और तीसरे संस्करण ने इसे फिर से आधा कर दिया। अब 133kB फाइल के लिए ~ 300kB फाइल-मैपर जेनरेट होता है। जटिल निर्भरता को ट्रैक करने में सक्षम होने पर आपने इस तरह की कमी को कैसे प्रबंधित किया?
इसमें वीएलक्यू (वैरिएबल लेंथ क्वांटिटी) और बेस 64 एनकोडिंग का उपयोग किया गया है। mappings संपत्ति एक बहुत बड़ी स्ट्रिंग है। इस लाइन के अंदर, उत्पन्न फ़ाइल में अर्धविराम (;) अलग लाइन नंबर होते हैं। परिणामी स्ट्रिंग के अंदर, कोड सेगमेंट को अलग करने के लिए अल्पविराम का उपयोग किया जाता है। प्रत्येक खंड 1, 4 या 5 वीएलक्यू क्षेत्रों का प्रतिनिधित्व करता है। कुछ निरंतरता बिट के कारण हो सकता है। प्रत्येक खंड पिछले एक के आधार पर बनाया गया है, जो फ़ाइल आकार को कम करने में मदद करता है।

जैसा कि पहले कहा गया है, प्रत्येक खंड 1, 4 या पांच वीएलक्यू हो सकता है। आरेख 4 वीएलक्यू को एक निरंतरता बिट के साथ दिखाता है। आइए इसे अधिक विस्तार से विश्लेषण करें और दिखाएं कि मैपर स्रोत फ़ाइल में स्थिति की गणना कैसे करता है। एक खंड में पाँच चीज़ें शामिल हैं:

• उत्पन्न फ़ाइल में वर्ण संख्या
• स्रोत फ़ाइल
• स्रोत फ़ाइल में पंक्ति संख्या
• स्रोत फ़ाइल में वर्ण संख्या
• मूल नाम (यदि कोई हो)

( टिप्पणी perev। मैंने लेख के इस भाग का पूरी तरह से अनुवाद करने का प्रबंधन नहीं किया है, इसे मूल रूप से पढ़ा जा सकता है; यदि आप मदद करना चाहते हैं, तो लिखना, मैं आभारी रहूंगा )

XSSI के साथ संभावित मुद्दे

स्रोत मानचित्र का उपयोग करते समय विनिर्देश XSS को लागू करने के साथ संभावित मुद्दों के बारे में बात करता है। आप इस js फ़ाइल को अमान्य बनाने और त्रुटि का कारण बनने के लिए अपनी मैप फ़ाइल की शुरुआत में " )]} " लिखकर इससे छुटकारा पा सकते हैं। WebKit dev टूल्स पहले से ही जानते हैं कि इसे कैसे फँसाना है:

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

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

@sourceURL और प्रदर्शननाम में कार्रवाई: eval और अनाम फ़ंक्शन

हालाँकि इन दोनों सम्मेलनों को अभी तक स्रोत मानचित्र विनिर्देश में शामिल नहीं किया गया है, फिर भी वे eval और अनाम कार्यों के साथ काम को सरल बना सकते हैं।
पहला सहायक //@ sourceMappingURL समान है और वास्तव में विनिर्देश (V3) में उल्लिखित है। कोड में इस विशेष टिप्पणी को शामिल करके, जिसे तब eval माध्यम से निष्पादित किया जाएगा, आप eval s कह सकते हैं, जो कंसोल में काम करने पर उन्हें अधिक तार्किक नाम देगा। निम्नलिखित कॉफीस्क्रिप्ट कंपाइलर का उपयोग करने वाला एक सरल उदाहरण है:

उदाहरण - उत्पन्न नाम के साथ कोड eval से होकर गुजरा


एक अन्य सहायक आपको इस फ़ंक्शन के संदर्भ में निर्दिष्ट प्रदर्शननाम संपत्ति का उपयोग करके अनाम कार्यों का नाम देने की अनुमति देता है। प्रदर्शन को देखने के लिए इस उदाहरण को देखें क्रिया में नाम।

उदाहरण - प्रदर्शननाम के माध्यम से अनाम कार्यों के लिए नाम (केवल WebKit NIII)

जब प्रोफाइलिंग, (anonymous function) बजाय सुंदर नाम प्रदर्शित किए जाएंगे। लेकिन सबसे अधिक संभावना है displayName Google क्रोम के अंतिम निर्माण में शामिल नहीं होगा। हालाँकि अभी भी उम्मीद है, वे भी नाम बदलने के लिए संपत्ति का नाम बदलने का सुझाव देते हैं।
लेखन के समय, eval माध्यम से बनाया गया नामकरण कोड केवल Firefox और Google Chrome द्वारा समर्थित है। displayName प्रॉपर्टी केवल Google Chrome में ही रात में बनती है।

में डालो

CoffeeScript में सोर्स मैप को सपोर्ट करने पर बहुत लंबी चर्चा है ।
UglifyJS के पास सोर्स मैप को सपोर्ट करने वाला टिकट भी है।
यदि आप चर्चा में भाग लेते हैं और स्रोत मानचित्र समर्थन की आवश्यकता पर अपनी राय देते हैं तो आप मदद कर सकते हैं। जितने अधिक उपकरण इस तकनीक का समर्थन करते हैं, यह काम करना उतना ही आसान होगा, इसलिए अपने पसंदीदा ओपनसोर्स प्रोजेक्ट में इसका समर्थन मांगें।

स्रोत का नक्शा सही नहीं है

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

उपकरण और संसाधन

• Nick Fitzgerald ने सोर्स मैप सपोर्ट के साथ UglifyJS को फोर्क किया
• पॉल आयरिश ने एक सरल स्रोत मानचित्र डेमो बनाया
• कॉनराड इरविन ने रूबी डेवलपर्स के लिए एक आसान स्रोत मैप रत्न लिखा
• Eval नामकरण और डिस्प्लेनाम संपत्ति के बारे में और क्या पढ़ें
• आप स्रोत मानचित्र बनाने वाले क्लोजर कंपाइलर के स्रोत कोड को देख सकते हैं
• कुछ स्क्रीनशॉट और GWT स्रोत मानचित्र का समर्थन करने के बारे में बात करते हैं

सोर्स मैप एक शक्तिशाली डेवलपर टूल है। यह आपको उत्पादन कोड को यथासंभव संपीड़ित रखने की अनुमति देता है, लेकिन साथ ही आपको इसे डीबग करने की अनुमति देता है। नौसिखिया डेवलपर्स के लिए यह भी उपयोगी है कि वे अनुभवी डेवलपर्स द्वारा लिखे गए कोड को देखें कि वे किस तरह से संरचना करना और उनका कोड सही ढंग से लिखना सीखते हैं, बिना मिनिफाइज्ड कोड के माध्यम से। तो आप किसका इंतजार कर रहे हैं? अपनी परियोजना के लिए एक स्रोत मानचित्र बनाएँ!