लोकल ओवरराइड की मदद से, प्रोटोटाइप बनाकर और बदलावों और फ़िक्स की जांच करके, अपने वर्कफ़्लो को अनब्लॉक किया जा सकता है. इसके लिए, आपको बैकएंड, तीसरे पक्ष या एपीआई के सपोर्ट का इंतज़ार नहीं करना पड़ता.
स्थानीय ओवरराइड का इस्तेमाल करके, रिमोट रिसॉर्स की नकल करें. भले ही, आपके पास उनका ऐक्सेस न हो. अनुरोधों और अलग-अलग फ़ाइलों के लिए मॉक रिस्पॉन्स बनाए जा सकते हैं. उदाहरण के लिए, एचटीटीपी रिस्पॉन्स हेडर और वेब कॉन्टेंट. इनमें XHR और फ़ेच अनुरोध भी शामिल हैं.
उदाहरण के लिए, स्थानीय तौर पर बदले गए एट्रिब्यूट की वैल्यू इन मामलों में मदद कर सकती हैं:
- एपीआई को प्रोडक्शन में भेजने से पहले, मॉक एपीआई और टेस्ट एपीआई की गड़बड़ियों को ठीक करें.
- अगर आपको पहले से ही पता है कि बैकएंड कौनसे डेटा स्ट्रक्चर का इस्तेमाल करेगा, तो नए यूज़र इंटरफ़ेस (यूआई) डिज़ाइन का प्रोटोटाइप बनाएं.
- परफ़ॉर्मेंस से जुड़ी समस्याओं को ठीक करने के लिए, टेस्ट करें. उदाहरण के लिए, सीएलएस को कम करें. इससे आपको पहले से ही यह पक्का करने में मदद मिलेगी कि ये समस्याएं गंभीर हैं.
लोकल ओवरराइड की सुविधा की मदद से, DevTools में किए गए बदलावों को पेज लोड होने के दौरान भी बनाए रखा जा सकता है.
यह कैसे काम करता है
- DevTools में बदलाव करने पर, DevTools बदली गई फ़ाइल की एक कॉपी को आपके चुने गए फ़ोल्डर में सेव करता है.
- पेज को फिर से लोड करने पर, DevTools नेटवर्क रिसॉर्स के बजाय, स्थानीय तौर पर बदली गई फ़ाइल दिखाता है.
बदलावों को सीधे सोर्स फ़ाइलों में भी सेव किया जा सकता है. वर्कस्पेस की मदद से फ़ाइलों में बदलाव करना और उन्हें सेव करना लेख पढ़ें.
सीमाएं
लोकल ओवरराइड, नेटवर्क रिस्पॉन्स हेडर और ज़्यादातर फ़ाइल टाइप के लिए काम करते हैं. इनमें XHR और फ़ेच अनुरोध शामिल हैं. हालांकि, कुछ मामलों में ऐसा नहीं होता:
- स्थानीय बदलाव चालू होने पर, कैश मेमोरी बंद हो जाती है.
- DevTools, Elements पैनल के डीओएम ट्री में किए गए बदलावों को सेव नहीं करता.
- अगर स्टाइल पैनल में सीएसएस में बदलाव किया जाता है और उस सीएसएस का सोर्स कोई एचटीएमएल फ़ाइल है, तो DevTools बदलाव को सेव नहीं करेगा.
इसके बजाय, सोर्स पैनल में जाकर, एचटीएमएल फ़ाइलों में बदलाव किया जा सकता है.
स्थानीय बदलावों को सेट अप करना
नेटवर्क पैनल में जाकर, वेब कॉन्टेंट या रिस्पॉन्स हेडर को तुरंत बदला जा सकता है:
- DevTools खोलें. इसके बाद, Network पैनल पर जाएं. उस अनुरोध पर राइट क्लिक करें जिसे आपको बदलना है. ड्रॉप-डाउन मेन्यू से, Override headers या Override content चुनें.
- अगर आपने अब तक लोकल ओवरराइड सेट अप नहीं किया है, तो DevTools आपको सबसे ऊपर मौजूद ऐक्शन बार में यह सूचना देता है:
- जिन फ़ाइलों में बदलाव किया गया है उन्हें सेव करने के लिए, कोई फ़ोल्डर चुनें.
- DevTools को ऐक्सेस करने का अधिकार देने के लिए, अनुमति दें पर क्लिक करें.
- जिन फ़ाइलों में बदलाव किया गया है उन्हें सेव करने के लिए, कोई फ़ोल्डर चुनें.
- अगर आपने लोकल ओवरराइड सेट अप किए हैं, लेकिन उन्हें बंद कर दिया है, तो DevTools उन्हें अपने-आप चालू कर देता है.
स्थानीय तौर पर बदलाव करने की सुविधा सेट अप और चालू करने के बाद, DevTools आपको इन जगहों पर ले जाता है. यह इस बात पर निर्भर करता है कि आपको किस फ़ाइल में बदलाव करना है:
- सोर्स पैनल, ताकि वेब कॉन्टेंट में बदलाव किया जा सके.
- नेटवर्क > हेडर > जवाब के हेडर में मौजूद एडिटर की मदद से, जवाब के हेडर में बदलाव किया जा सकता है.
स्थानीय बदलावों को कुछ समय के लिए बंद करने या बदलाव वाली सभी फ़ाइलें मिटाने के लिए, सोर्स > बदलाव पर जाएं. इसके बाद, स्थानीय बदलावों को चालू करें चेकबॉक्स से सही का निशान हटाएं या मिटाएं पर क्लिक करें.
किसी एक ओवरराइड फ़ाइल या फ़ोल्डर में मौजूद सभी ओवरराइड को मिटाने के लिए, सोर्स > ओवरराइड में जाकर, फ़ाइल या फ़ोल्डर पर राइट क्लिक करें. इसके बाद, मिटाएं को चुनें. अब डायलॉग बॉक्स में, ठीक है पर क्लिक करें. इस कार्रवाई को पहले जैसा नहीं किया जा सकता. आपको मिटाए गए बदलावों को मैन्युअल तरीके से फिर से बनाना होगा.
सभी ओवरराइड तुरंत देखने के लिए, नेटवर्क पैनल में किसी अनुरोध पर राइट क्लिक करें. इसके बाद, सभी ओवरराइड दिखाएं को चुनें. DevTools आपको सोर्स > बदलाव पर ले जाएगा.
वेब कॉन्टेंट में बदलाव करना
वेब कॉन्टेंट को बदलने के लिए:
- स्थानीय तौर पर बदलाव लागू करना.
- फ़ाइलों में बदलाव करें और उन्हें DevTools में सेव करें.
उदाहरण के लिए, सोर्स में मौजूद फ़ाइलों या तत्व > स्टाइल में मौजूद सीएसएस में बदलाव किया जा सकता है. हालांकि, ऐसा तब तक किया जा सकता है, जब तक सीएसएस एचटीएमएल फ़ाइलों में मौजूद न हो.
DevTools, बदली गई फ़ाइलों को सेव करता है. साथ ही, उन्हें सोर्स > बदलाव में दिखाता है. इसके अलावा, यह आपको 
आइकॉन दिखाता है. यह आइकॉन, बदलाव की गई फ़ाइलों के बगल में मौजूद होता है. यह आइकॉन, इन पैनल और पैन में दिखता है: एलिमेंट > स्टाइल, नेटवर्क, और सोर्स > बदलाव.
इसके अलावा, नेटवर्क पैनल में, वेब कॉन्टेंट को बदलने के अनुरोध के जवाब टैब के बगल में, बैंगनी रंग का डॉट आइकॉन दिखता है. इस आइकॉन पर टूलटिप भी दिखती है.
रिमोट रिसॉर्स की नकल करने के लिए, XHR या फ़ेच अनुरोधों को बदलें
लोकल ओवरराइड की सुविधा का इस्तेमाल करने के लिए, आपको बैकएंड का ऐक्सेस नहीं चाहिए. साथ ही, आपको अपने बदलावों को लागू करने के लिए, बैकएंड के अपडेट होने का इंतज़ार भी नहीं करना पड़ता. मॉक और एक्सपेरिमेंट ऑन द फ़्लाय:
- स्थानीय बदलावों को सेट अप करें.
- नेटवर्क में, XHR/फ़ेच अनुरोधों के लिए फ़िल्टर करें. इसके बाद, अपनी ज़रूरत के हिसाब से अनुरोध ढूंढें, उस पर राइट क्लिक करें, और कॉन्टेंट बदलें को चुनें.
- फ़ेच किए गए डेटा में बदलाव करें और फ़ाइल सेव करें.
- पेज को रीफ़्रेश करें और देखें कि आपके बदलाव लागू हो गए हैं.
इस वर्कफ़्लो के बारे में जानने के लिए, यह वीडियो देखें:
ऑफ़लाइन रहते हुए किए गए बदलावों को ट्रैक करना
वेब कॉन्टेंट में किए गए सभी बदलावों को एक जगह पर ट्रैक किया जा सकता है. इसके लिए, बदलाव ड्रॉअर टैब का इस्तेमाल करें.
इसके अलावा, सोर्स > बदलाव में जाकर, सेव की गई फ़ाइल पर राइट क्लिक करें. इसके बाद, संदर्भ मेन्यू से फ़ाइल वाले फ़ोल्डर में खोलें को चुनें. इससे वह फ़ोल्डर खुलता है जिसे आपने ओवरराइड सेटअप के दौरान चुना था. यहां, अपने पसंदीदा कोड एडिटर की मदद से फ़ाइलों में बदलाव किया जा सकता है.
एचटीटीपी रिस्पॉन्स हेडर बदलना
नेटवर्क पैनल में जाकर, वेब सर्वर का ऐक्सेस न होने पर भी एचटीटीपी रिस्पॉन्स हेडर को बदला जा सकता है.
रिस्पॉन्स हेडर ओवरराइड की मदद से, अलग-अलग हेडर के लिए फ़िक्स किए गए प्रोटोटाइप को स्थानीय तौर पर बनाया जा सकता है. इसमें इनके अलावा, और भी चीज़ें शामिल हो सकती हैं:
किसी रिस्पॉन्स हेडर में बदलाव करने के लिए:
- स्थानीय बदलावों को सेट अप करें और वह पेज खोलें जिसे डीबग करना है.
- नेटवर्क पर जाएं. इसके बाद, कोई अनुरोध ढूंढें, उस पर राइट क्लिक करें, और हेडर बदलें को चुनें. DevTools आपको हेडर > रिस्पॉन्स हेडर एडिटर पर ले जाता है.
जवाब के हेडर की वैल्यू पर कर्सर घुमाएं और उसे वहां रखें.
इसके अलावा, रिस्पॉन्स हेडर एडिटर को चालू करने के लिए, रिस्पॉन्स हेडर की वैल्यू पर कर्सर घुमाएं. इसके बाद, बदलाव करें पर क्लिक करें.
हेडर में बदलाव करें या नया हेडर जोड़ें.
- हेडर की वैल्यू में बदलाव करने के लिए, उस पर क्लिक करें.
- नया हेडर जोड़ने के लिए, हेडर जोड़ें पर क्लिक करें.
- हेडर ओवरराइड हटाने के लिए, उसके बगल में मौजूद पर क्लिक करें. इससे जोड़े गए हेडर हट जाते हैं या बदली गई वैल्यू, ओरिजनल वैल्यू पर वापस आ जाती हैं.
नेटवर्क पैनल में, बदले गए हेडर हरे रंग में और हटाए गए ओवरराइड लाल रंग में और क्रॉस किए गए दिखते हैं. इसके अलावा, हेडर टैब में बैंगनी रंग का बिंदु वाला आइकॉन दिखता है. इस पर कर्सर घुमाने पर, टूलटिप दिखता है. इससे आपको पता चलता है कि हेडर को बदला गया है.
बदलावों को लागू करने के लिए, पेज को रीफ़्रेश करें.
बदले गए सभी रिस्पॉन्स हेडर में बदलाव करना
सभी हेडर ओवरराइड में एक साथ बदलाव करने के लिए:
Response Headers सेक्शन के बगल में मौजूद,
.headers पर क्लिक करें.
DevTools, आपको Sources > Overrides में मौजूद, इससे जुड़ी
.headersफ़ाइल पर ले जाता है..headersफ़ाइल में बदलाव करने के लिए:
बदलाव का नया नियम जोड़ने के लिए, बदलाव का नियम जोड़ें पर क्लिक करें. यहां नियम, हेडर और वैल्यू का एक सेट होता है. साथ ही, इसे लागू करने के लिए एक या एक से ज़्यादा अनुरोध किए जाते हैं.
किसी नियम में हेडर और वैल्यू का पेयर जोड़ने के लिए, किसी दूसरे पेयर पर कर्सर घुमाएं और पर क्लिक करें.
हेडर की वैल्यू को पहले जैसा करने के लिए, जोड़े गए हेडर या नियम को हटाएं. इसके लिए, उस पर कर्सर घुमाएं और पर क्लिक करें.
.headersफ़ाइल को Command / Control + S दबाकर सेव करें.बदलावों को लागू करने के लिए, पेज को रीफ़्रेश करें.