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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

लोकल ओवरराइड से आपको DevTools में किए गए बदलाव, पेज लोड के दौरान लागू करने की सुविधा मिलती है.

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

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

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

सीमाएं

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

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

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

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

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

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

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

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

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

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

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

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

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

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

सोर्स, नेटवर्क, और एलिमेंट में बदली गई फ़ाइलों के बगल में संबंधित आइकॉन और फिर स्टाइल

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

बैंगनी रंग का डॉट आइकॉन, जिसमें 'जवाब' टैब के बगल में टूलटिप है.

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

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

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

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

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

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

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

'इसमें शामिल फ़ोल्डर में खोलें' विकल्प.

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

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

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

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

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

    रिस्पॉन्स हेडर एडिटर.

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

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

    मौजूदा हेडर की वैल्यू में बदलाव करना, नई वैल्यू जोड़ना, और ओवरराइड की वैल्यू हटाना.

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

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

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

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

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

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

    हेडर, रिस्पॉन्स हेडर सेक्शन के बगल में मौजूद लिंक को बदल देता है.

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

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

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

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

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

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

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

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