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

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

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

उदाहरण के लिए, स्थानीय बदलावों से इन कामों में मदद मिल सकती है:

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

स्थानीय बदलावों की मदद से, DevTools में किए गए बदलावों को पेज लोड में सेव रखा जा सकता है.

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

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

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

सीमाएं

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

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

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

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

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

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

4. लोकल ओवरराइड को सेट अप और चालू करने के बाद, जो बदलाव करने वाले हैं उनके आधार पर DevTools आपको इन जगहों पर ले जाएगा:

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

लोकल बदलाव की सुविधा को कुछ समय के लिए बंद करने या सभी ओवरराइड फ़ाइलों को मिटाने के लिए सोर्स > ओवरराइड करके check_box_outline_blank स्थानीय बदलाव चालू करें चेकबॉक्स को हटा दें या क्रम से block मिटाएं पर क्लिक करें.

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

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

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

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

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

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

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

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

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

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

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

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

डिवाइस में किए गए बदलावों को ट्रैक करें

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

   

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

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

   

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

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

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

3. .headers फ़ाइल को सेव करने के लिए, Command / Control + S दबाएं.

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