सोर्स फ़ाइलों में किए गए बदलावों को सेव करने के लिए, फ़ाइल फ़ोल्डर सेट अप करना

Kayce Basques

Sofia Emelianova

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

खास जानकारी

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

• आपके डेस्कटॉप पर आपकी साइट का सोर्स कोड मौजूद हो.
• सोर्स कोड डायरेक्ट्री से लोकल वेब सर्वर चलाया जा रहा है, ताकि साइट को localhost:PORT पर ऐक्सेस किया जा सके. साथ ही, मेटाडेटा वाली एक सामान्य JSON फ़ाइल भी उपलब्ध कराई जा सके. इसके बारे में बाद में बताया गया है.
• आपने Google Chrome में localhost:PORT खोला है और साइट की सीएसएस बदलने के लिए, DevTools का इस्तेमाल किया जा रहा है.

फ़ाइल फ़ोल्डर से कनेक्ट होने पर, सोर्स पैनल में सीएसएस, एचटीएमएल, और JavaScript फ़ाइलों में किए गए बदलाव, आपके कंप्यूटर पर मौजूद सोर्स कोड में सेव हो जाते हैं. हालांकि, DevTools आपके एलिमेंट पैनल में किए गए बदलावों को DOM में सेव नहीं करता.

इसके अलावा, DevTools आम तौर पर सोर्स मैप की मदद से, ऑप्टिमाइज़ किए गए कोड को आपके मूल सोर्स कोड पर वापस मैप कर सकता है.

किसी कनेक्शन के लिए मेटाडेटा जनरेट करना

DevTools को आपके फ़ोल्डर का अपने-आप पता लगाने की अनुमति देने के लिए, रैंडम वर्शन 4 यूयूआईडी जनरेट करें. इसके बाद, उसे इस JSON फ़ाइल में डालें:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

इसके बाद, JSON फ़ाइल को path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json में डालें.

आखिर में, अपना लोकल एचटीटीपी सर्वर चलाएं और पक्का करें कि JSON फ़ाइल भी उपलब्ध हो.

इसके अलावा, इस चरण को छोड़ा जा सकता है और मैन्युअल तरीके से फ़ोल्डर कनेक्शन सेट अप किया जा सकता है.

वर्कस्पेस फ़ोल्डर कनेक्ट करना

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

कोई फ़ोल्डर कनेक्ट करने के लिए:

1. Chrome में, स्थानीय तौर पर होस्ट किए गए पेज पर जाएं. इस उदाहरण में, localhost:8000 पर जाएं और DevTools खोलें.

2. सोर्स > फ़ाइल फ़ोल्डर में जाकर, अपने फ़ोल्डर के बगल में मौजूद, कनेक्ट करें पर क्लिक करें.

   

3. जब आपसे पूछा जाए, तब DevTools को अपने फ़ोल्डर का ऐक्सेस देने के लिए, फ़ाइलों में बदलाव करें पर क्लिक करें.

   

4. कनेक्ट होने के बाद, फ़ोल्डर को वर्कस्पेस टैब में खोला जा सकता है.

   

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

बदलाव को सोर्स फ़ोल्डर में सेव करना

कनेक्ट किए गए फ़ोल्डर में मौजूद किसी भी सीएसएस, एचटीएमएल, और JavaScript फ़ाइल में किए गए बदलावों को सेव किया जा सकता है.

सीएसएस में किए गए बदलावों को सेव करना

अहम जानकारी: कनेक्ट किए गए वर्कस्पेस फ़ोल्डर की मदद से, एआई असिस्टेंट पैनल, सीएसएस में किए गए बदलावों को आपके सोर्स में अपने-आप सेव कर सकता है.

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

1. सोर्स > वर्कस्पेस में जाकर, कनेक्ट किए गए वर्कस्पेस फ़ोल्डर से कोई सीएसएस फ़ाइल खोलें.

2. अपनी सीएसएस में बदलाव करना.

   ध्यान दें: कोई बदलाव, लाइव पेज पर लागू होता है, लेकिन सोर्स पर अभी तक लागू नहीं होता.

3. बदलाव को सेव करें. उदाहरण के लिए, Ctrl / Cmd + S दबाएं और अपनी सोर्स फ़ाइल में लागू किया गया बदलाव देखें. सोर्स पैनल में, फ़ाइल के नाम के बगल में हरे रंग का बिंदु दिखता है.

   ध्यान दें: सीएसएस में किए गए बदलावों को लागू करने और सेव करने के लिए, आपको पेज को फिर से लोड करने की ज़रूरत नहीं है.

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

एचटीएमएल में बदलाव सेव करना

एचटीएमएल में किए गए बदलावों को सेव करने के लिए:

1. सोर्स > फ़ाइल फ़ोल्डर में जाकर, कनेक्ट किए गए फ़ाइल फ़ोल्डर से कोई एचटीएमएल फ़ाइल खोलें.

2. अपने एचटीएमएल में बदलाव करें.

   ध्यान दें: कोई बदलाव, लाइव पेज या सोर्स पर लागू नहीं होता.

3. बदलाव को सेव करें. उदाहरण के लिए, Ctrl / Cmd + S दबाएं और अपनी सोर्स फ़ाइल में लागू किया गया बदलाव देखें. सोर्स पैनल में, फ़ाइल के नाम के बगल में हरे रंग का बिंदु दिखता है.

4. बदलाव लागू होने के बाद, उसे देखने के लिए पेज को फिर से लोड करें.

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

ध्यान दें: एचटीएमएल में किए गए बदलाव को सोर्स पैनल से लागू और सेव किया जा सकता है. हालांकि, एलिमेंट पैनल से ऐसा नहीं किया जा सकता.

एलिमेंट पैनल से एचटीएमएल में बदलाव क्यों नहीं किया जा सकता?

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

आसान शब्दों में कहें, तो डीओएम ट्री !== एचटीएमएल.

JavaScript में किए गए बदलावों को सेव करना

JavaScript में किए गए बदलावों को सेव करने के लिए:

1. सोर्स > फ़ाइल फ़ोल्डर में जाकर, कनेक्ट किए गए फ़ाइल फ़ोल्डर से कोई JavaScript फ़ाइल खोलें.

2. JavaScript में बदलाव करें.

   ध्यान दें: कोई बदलाव, लाइव पेज या सोर्स पर लागू नहीं होता.

3. बदलाव को सेव करें. उदाहरण के लिए, Ctrl / Cmd + S दबाएं और अपनी सोर्स फ़ाइल में लागू किया गया बदलाव देखें. सोर्स पैनल में, फ़ाइल के नाम के बगल में हरे रंग का बिंदु दिखता है.

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

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

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

वर्कस्पेस फ़ोल्डर का कनेक्शन हटाना

वर्कस्पेस फ़ोल्डर का कनेक्शन हटाने के लिए, सोर्स > वर्कस्पेस में जाकर, फ़ोल्डर पर राइट क्लिक करें. इसके बाद, ड्रॉप-डाउन मेन्यू से वर्कस्पेस से हटाएं को चुनें और हटाएं पर क्लिक करें.

ध्यान दें: मेटाडेटा JSON फ़ाइल में फ़ोल्डर का यूयूआईडी बदलने या मिटाने से भी फ़ोल्डर डिसकनेक्ट हो जाता है.

वर्कस्पेस फ़ोल्डर को मैन्युअल तरीके से कनेक्ट करना

1. लोकल तौर पर होस्ट किए गए पेज पर, DevTools खोलें.

2. सोर्स > फ़ाइल फ़ोल्डर में जाकर, मैन्युअल तरीके से फ़ोल्डर जोड़ें पर क्लिक करें. इसके बाद, अपनी सोर्स फ़ाइलों वाला फ़ोल्डर चुनें.

   

   ध्यान दें: फ़ोल्डर को खींचकर, सोर्स पैनल में भी छोड़ा जा सकता है.

3. इसके बाद, वर्कस्पेस फ़ोल्डर कनेक्ट करें में दिए गए तीसरे और चौथे चरण को पूरा करें.

सीमाएं

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

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

अगले चरण

पहले से सेट अप किए गए सभी फ़ोल्डर, सेटिंग > फ़ोल्डर में जाकर मैनेज किए जा सकते हैं.

इसके बाद, DevTools का इस्तेमाल करके सीएसएस बदलने और JavaScript को डीबग करने का तरीका जानें.

इन्हें भी देखें

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