वेब कॉन्टेंट और एचटीटीपी रिस्पॉन्स हेडर को स्थानीय तौर पर बदलें

Sofia Emelianova

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

यह सुविधा कैसे काम करती है:

• DevTools में बदलाव करने पर, DevTools बदली गई फ़ाइल की एक कॉपी आपके तय किए गए फ़ोल्डर में सेव कर लेता है.
• पेज को फिर से लोड करने पर, DevTools नेटवर्क संसाधन के बजाय स्थानीय, बदली गई फ़ाइल दिखाता है.

अहम जानकारी: अपने बदलावों को सीधे सोर्स फ़ाइलों में भी सेव किया जा सकता है. फ़ाइल फ़ोल्डर की मदद से फ़ाइलों में बदलाव करना और उन्हें सेव करना देखें.

सीमाएं

लोकल ओवरराइड, नेटवर्क रिस्पॉन्स हेडर और ज़्यादातर फ़ाइल टाइप के लिए काम करते हैं. इनमें XHR और फ़ेच करने के अनुरोध शामिल हैं. हालांकि, इसके कुछ अपवाद हैं:

• स्थानीय बदलाव चालू होने पर कैश मेमोरी को बंद कर दिया जाता है.
• DevTools एलिमेंट पैनल के डीओएम ट्री में किए गए बदलावों को सेव नहीं करता.
• अगर स्टाइल पैनल में सीएसएस में बदलाव किया जाता है और उस सीएसएस का सोर्स एक एचटीएमएल फ़ाइल है, तो DevTools बदलाव को सेव नहीं करेगा.

इसके बजाय, सोर्स पैनल में एचटीएमएल फ़ाइलों में बदलाव किया जा सकता है.

स्थानीय बदलावों को सेट अप करना

नेटवर्क पैनल में जाकर, वेब कॉन्टेंट या रिस्पॉन्स हेडर को तुरंत बदला जा सकता है:

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

4. स्थानीय बदलावों के सेट अप और चालू होने के बाद, DevTools की मदद से यह तय करें कि आपको क्या बदलाव करना है:

   • सोर्स पैनल से, वेब कॉन्टेंट में बदलाव किए जा सकते हैं.
   • नेटवर्क > हेडर > रिस्पॉन्स हेडर के एडिटर की मदद से, रिस्पॉन्स हेडर में बदलाव करें.

लोकल ओवरराइड 'सेक्शन में बदलाव करें' को कुछ समय के लिए बंद करने या सभी बदली गई फ़ाइलों को मिटाने के लिए, सोर्स > बदलाव पर जाएं. इसके बाद, स्थानीय बदलाव चालू करें चेकबॉक्स से सही का निशान हटाएं या मिटाएं पर क्लिक करें.

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

सभी बदलाव तुरंत देखने के लिए, नेटवर्क पैनल में, किसी अनुरोध पर राइट क्लिक करें और सभी ओवरराइड दिखाएं को चुनें. DevTools आपको सोर्स > बदलाव पर ले जाएगा.

वेब कॉन्टेंट बदलें

वेब कॉन्टेंट बदलने के लिए:

1. स्थानीय बदलाव सेट अप करें.
2. फ़ाइलों में बदलाव करें और उन्हें DevTools में सेव करें.

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

उदाहरण के लिए, सोर्स में मौजूद फ़ाइलों या एलिमेंट > स्टाइल में सीएसएस में बदलाव किया जा सकता है. ऐसा तब तक किया जा सकता है, जब तक सीएसएस एचटीएमएल फ़ाइलों में मौजूद न हो.

DevTools बदली गई फ़ाइलों को सेव करता है और उन्हें सोर्स > बदलाव में लिस्ट करता है. साथ ही, काम के पैनल और पैनल में, ओवरराइड की गई फ़ाइलों के बगल में आइकॉन दिखाता है: एलिमेंट > स्टाइल, नेटवर्क, और सोर्स > बदलाव.

इसके अलावा, नेटवर्क पैनल, बदले हुए वेब कॉन्टेंट वाले अनुरोध के जवाब टैब के बगल में, टूलटिप के साथ बैंगनी रंग का बिंदु दिखाता है.

XHR को बदलें या रिमोट रिसॉर्स की नकल करने के लिए अनुरोध फ़ेच करें

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

1. स्थानीय बदलाव सेट अप करें.
2. नेटवर्क में जाकर, XHR/फ़ेच के अनुरोधों के लिए फ़िल्टर करें, आपको जिस अनुरोध की ज़रूरत हो उसे ढूंढें, उस पर राइट क्लिक करें, और कॉन्टेंट बदलें को चुनें.
3. फ़ेच किए गए डेटा में बदलाव करें और फ़ाइल सेव करें.
4. पेज रीफ़्रेश करें और देखें कि आपने क्या बदलाव किए हैं.

इस वर्कफ़्लो के बारे में जानने के लिए, यह वीडियो देखें:

अपने स्थानीय बदलावों को ट्रैक करें

वेब कॉन्टेंट में किए गए सभी बदलावों को बदलाव पैनल टैब में, एक ही जगह पर ट्रैक किया जा सकता है.

एचटीटीपी रिस्पॉन्स हेडर बदलें

नेटवर्क पैनल से, वेब सर्वर के ऐक्सेस के बिना एचटीटीपी रिस्पॉन्स हेडर को बदला जा सकता है.

रिस्पॉन्स हेडर में बदलाव करके, अलग-अलग हेडर के लिए स्थानीय तौर पर प्रोटोटाइप की गई गड़बड़ियां ठीक की जा सकती हैं. इनमें इनके अलावा, और भी चीज़ें शामिल हो सकती हैं:

• क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) हेडर
• अनुमतियों से जुड़ी नीति के हेडर
• क्रॉस-ऑरिजिन आइसोलेशन हेडर

रिस्पॉन्स हेडर को बदलने के लिए:

1. स्थानीय बदलाव सेट अप करें और जांच करें. उदाहरण के लिए, यह डेमो पेज.
2. नेटवर्क पर जाएं, कोई अनुरोध ढूंढें, उस पर राइट क्लिक करें, और हेडर बदलें को चुनें. DevTools आपको हेडर > रिस्पॉन्स हेडर एडिटर पर ले जाता है.

3. रिस्पॉन्स हेडर की वैल्यू पर कर्सर घुमाएं और कर्सर को उस पर रखें.

   

   इसके अलावा, रिस्पॉन्स हेडर एडिटर को चालू करने के लिए, रिस्पॉन्स हेडर की वैल्यू पर कर्सर घुमाएं और बदलाव करें पर क्लिक करें.

4. नए हेडर में बदलाव करें या उसे जोड़ें.

   ध्यान दें: इस उदाहरण में सीओआरएस गड़बड़ी से छुटकारा पाने के लिए Access-Control-Allow-Origin: * हेडर जोड़ा गया है.

   

   • हेडर की वैल्यू में बदलाव करने के लिए, उस पर क्लिक करें.
   • नया हेडर जोड़ने के लिए, हेडर जोड़ें पर क्लिक करें.
   • हेडर ओवरराइड को हटाने के लिए, उसके बगल में मौजूद पर क्लिक करें. ऐसा करने से, जोड़े गए हेडर हट जाते हैं या बदली गई वैल्यू वापस मूल वैल्यू में बदल जाती हैं.

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

5. इन बदलावों को लागू करने के लिए, पेज को रीफ़्रेश करें.

सभी रिस्पॉन्स हेडर में बदलाव करें

सभी हेडर ओवरराइड में एक ही जगह पर बदलाव करने के लिए:

1. रिस्पॉन्स हेडर सेक्शन के बगल में मौजूद, .headers पर क्लिक करें.

   

   DevTools आपको सोर्स > बदलाव में, इससे जुड़ी .headers फ़ाइल पर ले जाता है.

2. .headers फ़ाइल में बदलाव करें:

   

   • बदलाव का नया नियम जोड़ने के लिए, बदलाव का नया नियम जोड़ें पर क्लिक करें. यहां दिया गया नियम, हेडर और वैल्यू का एक सेट है. साथ ही, इसमें उन्हें लागू करने के लिए एक या एक से ज़्यादा अनुरोध किए गए हैं.

     ध्यान दें: एक साथ कई अनुरोधों के बारे में बताने के लिए, वाइल्डकार्ड का इस्तेमाल किया जा सकता है. * की मदद से कई वर्ण और ? की मदद से एक वर्ण तय करें.

   • किसी नियम में हेडर-वैल्यू पेयर जोड़ने के लिए, किसी दूसरे पेयर पर कर्सर घुमाएं और पर क्लिक करें.

   • हेडर की वैल्यू को पहले जैसा करने के लिए, जोड़े गए किसी हेडर या नियम को हटाएं. इसके बाद, उस पर कर्सर घुमाएं और पर क्लिक करें.

3. .headers फ़ाइल को Command / Control + S का इस्तेमाल करके सेव करें.

4. इन बदलावों को लागू करने के लिए, पेज को रीफ़्रेश करें.