अपने कोड को ऑनलाइन खोलें और पढ़ने लायक बनाएँ

किसी खास फ़ॉर्मैट को अनमिनिफ़ाई करें

हर फ़ॉर्मैट का अपना पेज है, जहाँ उस भाषा से जुड़ी ज़रूरी जानकारी दी गई है:

• JavaScript अनमिनिफ़ाई करेंJavaScript
• CSS अनमिनिफ़ाई करेंCSS
• HTML अनमिनिफ़ाई करेंHTML
• XML अनमिनिफ़ाई करेंXML
• JSON अनमिनिफ़ाई करेंJSON

कोड मिनिफ़िकेशन क्या है?

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

इससे वास्तविक लाभ मिलता है। मिनिफ़ाई किया JavaScript बंडल अक्सर अपने स्रोत से 30 से 70 प्रतिशत छोटा होता है। यानी नेटवर्क पर कम बाइट भेजे जाते हैं, पेज का शुरुआती रेंडर तेज़ होता है और Core Web Vitals बेहतर होते हैं। इसलिए लगभग हर प्रोडक्शन वेबसाइट मिनिफ़ाई किए JS, CSS और HTML भेजती है। इसकी कीमत यह है कि लाइव वेबसाइट से मिली फ़ाइल अक्सर एक घनी पंक्ति होती है जिसे पढ़ना मुश्किल है। उसे समझने, डीबग करने या उसके असली काम की जाँच करने के लिए पहले अनमिनिफ़ाई करना उपयोगी होता है।

यह अनमिनिफ़ाई टूल क्या करता है?

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

अंदर से यह Prettier चलाता है, वही फ़ॉर्मैटर जिसका अधिकांश JavaScript टीमें पहले से उपयोग करती हैं, और यह सीधे आपके ब्राउज़र में चलता है। इसलिए नतीजा वैसा होता है जैसा आपके अपने एडिटर में सामान्य स्रोत फ़ाइल फ़ॉर्मैट करने पर मिलता। फ़ॉर्मैट अपने आप पहचाना जाता है: आप कोड पेस्ट करें, टूल तय करता है कि वह JavaScript, CSS, HTML, XML या JSON है और उसी के अनुसार उसे व्यवस्थित करता है।

इसकी एक सीमा साफ़ समझना ज़रूरी है। अनमिनिफ़ाई करना डीकंपाइल करना नहीं है। टिप्पणियाँ, मूल वेरिएबल नाम और डेवलपर के नोट बिल्ड के समय हटा दिए गए थे; कोई टूल उन्हें वापस नहीं ला सकता। आपको व्यवस्थित, पठनीय कोड मिलता है जिसमें मिनिफ़ायर के छोटे नाम बने रहते हैं। व्यवहार में इतना काफ़ी होता है कि आप तर्क समझें, कोई फ़ंक्शन खोजें या देखें कि स्क्रिप्ट कौन-सा डेटा कहाँ भेज रही है।

समर्थित कोड फ़ॉर्मैट

एक एडिटर, पाँच भाषाएँ। LFUnminify आपके पेस्ट किए कंटेंट को पढ़ता है, उसकी भाषा पहचानता है और उसे उस सिंटैक्स के लिए बने पार्सर को सौंपता है। आपको मेन्यू से फ़ॉर्मैट नहीं चुनना पड़ता। फ़ाइल का एक्सटेंशन ग़लत हो, तब भी पहचान कंटेंट से होती है:

• JavaScript, जिसमें ES6 और बाद का सिंटैक्स, मॉड्यूल, एसिंक्रोनस कोड और JSX शामिल हैं। आम उपयोग: webpack, Vite, esbuild या Terser से बना बंडल।
• CSS, जिसमें आधुनिक सिंटैक्स, कस्टम प्रॉपर्टी, मीडिया क्वेरी और नेस्टेड नियम शामिल हैं। Tailwind, Sass या PostCSS से बनी स्टाइलशीट पढ़ने के लिए उपयोगी।
• HTML, जिसमें इनलाइन script और style ब्लॉक भी शामिल हैं। इन्हें एक लंबी पंक्ति में छोड़ने के बजाय मार्कअप के साथ फ़ॉर्मैट किया जाता है।
• XML, जिसमें साइटमैप, RSS फ़ीड, SVG फ़ाइलें, SOAP एनवेलप और बिना किसी नई पंक्ति के मिली कॉन्फ़िगरेशन फ़ाइलें शामिल हैं।
• JSON, जिसमें गहराई तक नेस्ट किए API रिस्पॉन्स, पैकेज मैनिफ़ेस्ट, कॉन्फ़िगरेशन फ़ाइलें और लॉग डेटा शामिल हैं।

कोड अनमिनिफ़ायर कब काम आता है?

अनमिनिफ़ाई करने की ज़रूरत अक्सर किसी ठोस सवाल का जवाब खोजते समय पड़ती है। यह ऐसे कोड को समझने का तेज़ तरीका है जिसे किसी और ने लिखा हो, या जिसे आपने लिखा हो लेकिन अब पढ़ना मुश्किल हो:

• प्रोडक्शन की बग डीबग करना। स्टैक ट्रेस बंडल की पंक्ति 1, कॉलम 24815 दिखाता है। फ़ाइल फ़ॉर्मैट करने पर वास्तविक पंक्ति संख्याएँ मिलती हैं और त्रुटि देने वाला फ़ंक्शन खोजना आसान होता है।
• तीसरे पक्ष की स्क्रिप्ट की जाँच करना। अपनी साइट में एनालिटिक्स टैग, चैट विजेट या अफ़िलिएट स्क्रिप्ट जोड़ने से पहले उसे अनमिनिफ़ाई करें। देखें कि वह क्या इकट्ठा करती है, किन डोमेन से संपर्क करती है और स्टोरेज में क्या लिखती है।
• कंपाइल की गई स्टाइलशीट पढ़ना। यूटिलिटी फ़्रेमवर्क विशाल, एक पंक्ति वाली CSS फ़ाइलें बनाते हैं। फ़ॉर्मैट करने पर कैस्केड समझ में आता है, लागू होने वाला नियम दिखता है और पता चलता है कि आपका ओवरराइड क्यों नहीं चल रहा।
• API रिस्पॉन्स की जाँच करना। नेटवर्क टैब से कॉपी किया JSON डेटा फ़ॉर्मैट किए बिना पढ़ना कठिन हो सकता है। व्यवस्थित होते ही उसकी संरचना, नेस्टिंग और ग़ायब फ़ील्ड कुछ ही सेकंड में दिखने लगते हैं।
• वास्तविक कोड से सीखना। कोई अच्छी लाइब्रेरी समस्या कैसे सुलझाती है, यह पढ़ना कौशल बढ़ाने का तेज़ तरीका है। फ़ॉर्मैट की गई फ़ाइल को ही आराम से पढ़ा और समझा जा सकता है।

LFUnminify कैसे इस्तेमाल करें

एडिटर में कोड लाने के तीन तरीके हैं। उसे सीधे बाएँ पैनल में पेस्ट करें, अपने कंप्यूटर से फ़ाइल खोलने के लिए फ़ाइल चुनें पर क्लिक करें, या फ़ाइल खींचकर इनपुट क्षेत्र में छोड़ें। किसी लाइव साइट की फ़ाइल जाँचने के लिए उसे view-source या ब्राउज़र DevTools में खोलें, कॉपी करें और यहाँ पेस्ट करें। चाहें तो .js, .css, .html, .xml या .json फ़ाइल सहेजकर फ़ाइल चुनें के ज़रिए खोल सकते हैं।

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

लंबी फ़ाइलों में दो छोटी सुविधाएँ काम आती हैं। किसी निश्चित स्थान का संदर्भ देना हो या दो संस्करण साथ रखकर देखने हों, तो पंक्ति संख्याएँ चालू करें। आपकी पसंद अगली बार के लिए याद रखी जाती है। और यदि पहचाना गया फ़ॉर्मैट अपेक्षा से अलग हो, तो वह भी एक संकेत है: जिसे आप JSON समझ रहे थे, उसका JavaScript के रूप में पहचाना जाना अक्सर बताता है कि वह JSONP रिस्पॉन्स है या असाइनमेंट में लिपटी कॉन्फ़िगरेशन है।

आपका कोड आपके कंप्यूटर से बाहर नहीं जाता

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

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

LFUnminify मुफ़्त क्यों है?

LFUnminify, Ludovic Frank के बनाए मुफ़्त टूलों के परिवार का हिस्सा है। इनमें पासवर्ड जनरेटर, फ़ेविकॉन जनरेटर, रंग पैलेट बनाने वाला टूल और दूसरे उपयोगी साधन हैं। सोच सीधी है: डेवलपर जिन छोटी उपयोगिताओं को हफ़्ते में कई बार खोलते हैं, उनके लिए पंजीकरण, विज्ञापनों की दीवार या क्रेडिट सीमा नहीं होनी चाहिए। इस टूल में न खाता है, न कोटा और न ही भीतर से कोई महँगा प्लान बेचने की कोशिश।

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

अक्सर पूछे जाने वाले सवाल