Chrome DevTools में JavaScript सोर्स को लाइव तौर पर एडिट करने की सुविधा बंद की जा रही है

पब्लिश होने की तारीख: 22 अक्टूबर, 2025

Chrome, JavaScript सोर्स में लाइव एडिटिंग की सुविधा बंद कर रहा है. Chrome 142 में, इसे एक्सपेरिमेंट फ़्लैग के पीछे ले जाया जाएगा. हमारा प्लान है कि इसे Chrome 145 (फ़रवरी 2026) में पूरी तरह से हटा दिया जाए. हम सोर्स फ़ाइलों से जुड़ी अन्य बेहतरीन सुविधाओं को नहीं हटा रहे हैं. जैसे, लोकल ओवरराइड, वर्कस्पेस या स्निपेट. ये सुविधाएं पहले की तरह काम करती रहेंगी.

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

लाइव एडिटिंग क्या थी?

लाइव एडिटिंग की सुविधा की मदद से, स्क्रिप्ट फ़ाइल के कॉन्टेंट को रनटाइम में बदला जा सकता है. यह सुविधा, स्क्रिप्ट को ब्रेकपॉइंट पर रोकने पर भी काम करती है. सोर्स पैनल में JavaScript कोड में बदलाव किया जा सकता है. इसके बाद, फ़ाइल को सेव करके (Command+S / Ctrl+S) बदलाव लागू किया जा सकता है. इसके बाद, डीबगर उन फ़ंक्शन को पैच करेगा जिन्हें रनटाइम में पहले से ही तय किया गया था. अगर कॉल स्टैक में बदलाव किया गया फ़ंक्शन चालू था, तो उसे भी रीस्टार्ट कर दिया जाएगा.

इसका मकसद, पूरे पेज को फिर से लोड किए बिना छोटे बदलावों को टेस्ट करने का तरीका उपलब्ध कराना था. ऐसा न करने पर, ऐप्लिकेशन का स्टेटस मिट जाता. इस तरह, इसका मकसद मॉडर्न डेवलपमेंट स्टैक में हॉट मॉड्यूल रिप्लेसमेंट (एचएमआर) के जैसा ही था.

हम इसे क्यों हटा रहे हैं?

लाइव एडिटिंग की सुविधा के लिए, उपयोगकर्ता अनुभव को बेहतर बनाना हमेशा से ही एक चुनौती रही है. आम तौर पर, इससे जुड़ा शॉर्टकट (Command+S / Ctrl+S) किसी फ़ाइल को सेव करने के लिए इस्तेमाल किया जाता है. हालांकि, इससे कोई अन्य साइड इफ़ेक्ट नहीं होता. यह बात हैरान करने वाली हो सकती है. लाइव एडिट की सुविधा काम न करने पर, डेवलपर को मिलने वाला फ़ीडबैक साफ़ तौर पर नहीं बताया जाता: DevTools, डेवलपर को "लाइव एडिट की सुविधा काम नहीं कर रही है: स्टैक में मौजूद फ़ंक्शन (फ़िलहाल, जिन्हें लागू किया जा रहा है) में बदलाव नहीं किया जा सकता" जैसा चेतावनी वाला मैसेज दिखा सकता है. डेवलपर इस मैसेज को अनदेखा कर सकता है. इससे उसे यह पता नहीं चल पाता कि उसके बदलाव लागू हुए हैं या नहीं.

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

लाइव एडिटिंग की सुविधा को जिस समस्या को हल करने के लिए बनाया गया था उसे अब हॉट मॉड्यूल रिप्लेसमेंट (एचएमआर) की मदद से ज़्यादा असरदार तरीके से हल किया जा सकता है. इस सुविधा का इस्तेमाल करके, ऐप्लिकेशन की स्थिति में बदलाव किए बिना बदलाव किए जा सकते हैं. एचएमआर, React, Angular या Vue जैसे आधुनिक वेब डेवलपमेंट फ़्रेमवर्क में एक स्टैंडर्ड सुविधा है. यह यूज़रस्पेस में एक जैसा असर डालता है और ऐब्स्ट्रैक्शन के बेहतर लेवल पर काम करता है. DevTools में लाइव एडिटिंग की सुविधा चालू होने पर, इसमें रुकावट आ सकती है. इस वजह से, यह सुविधा ठीक से काम नहीं करती और अनचाहे नतीजे मिलते हैं.

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

रखरखाव का ज़्यादा खर्च और तकनीकी जटिलता

लाइव पेज पर कोड को बदलना आसान नहीं होता. ऐसा इसलिए, क्योंकि कोड को सही तरीके से लागू करने के साथ-साथ, उसके सिमैंटिक को भी सही तरीके से तय करना होता है. इससे V8 JavaScript इंजन और Chrome DevTools पर इंजीनियरिंग काफ़ी बढ़ जाती है. इसलिए, V8 के कई हिस्सों पर ध्यान से विचार करना ज़रूरी है. लाइव एडिटिंग के दौरान सावधानी न बरतने पर, ऐसे क्रैश हो सकते हैं जिन्हें ठीक करना मुश्किल होता है. उदाहरण के लिए, अगर किसी फ़ंक्शन के नए वर्शन में रेगुलर एक्सप्रेशन, ऑब्जेक्ट या फ़ंक्शन लिटरल की संख्या, पिछले वर्शन से अलग है, तो इन लिटरल को ट्रैक करने वाले डेटा स्ट्रक्चर को ध्यान से मिलाना होगा.

इस वजह से, JavaScript की नई सुविधाओं को लागू करने में समय लगता है. साथ ही, DevTools की ज़्यादातर इस्तेमाल की जाने वाली सुविधाओं को बेहतर बनाने के लिए, संसाधनों का इस्तेमाल नहीं किया जा पाता.

इस वजह से, कई ऐसे मामले भी सामने आए जिनमें सहायता नहीं दी जा सकती. जैसे:

  • कॉल स्टैक में मौजूद किसी ऐसे फ़ंक्शन में बदलाव करना जो सबसे ऊपर वाले फ़्रेम में नहीं है.
  • एसिंक फ़ंक्शन या जनरेटर में बदलाव करना.
  • ES मॉड्यूल के टॉप-लेवल कोड में बदलाव करना.

अन्य विकल्प

जैसा कि पहले बताया गया है, हॉट मॉड्यूल रिप्लेसमेंट (एचएमआर) एक ज़्यादा लोकप्रिय विकल्प है. साथ ही, यह कुछ अहम पहलुओं में लाइव एडिटिंग से बेहतर है:

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

लाइव एडिटिंग की सुविधा हटाने से, Chrome DevTools की दो अन्य सुविधाओं पर कोई असर नहीं पड़ता:

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

नतीजा

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

इस सुविधा को बंद करने से, हम Chrome DevTools के ज़्यादा असरदार हिस्सों पर इंजीनियरिंग से जुड़े काम पर ध्यान दे पाएंगे. वीडियो हटाने की टाइमलाइन यहां दी गई है:

  • आने वाले समय में: इस सुविधा को Chrome 142 में एक्सपेरिमेंट के तौर पर उपलब्ध कराया जाएगा. यह Chrome फ़्लैग (chrome://flags/#devtools-live-edit) के तौर पर उपलब्ध होगी.
  • Chrome 145 (फ़रवरी 2026): इस सुविधा और इससे जुड़े Chrome फ़्लैग को पूरी तरह से हटा दिया जाएगा.

इस बदलाव के बारे में अपने सुझाव/राय/शिकायत हमें बताएं. सुझाव/राय देने या शिकायत करने के लिए, अपनी टिप्पणियां जोड़ें.