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

Kayce Basques

Sofia Emelianova

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

खास जानकारी

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

• आपके पास अपनी साइट का सोर्स कोड अपने डेस्कटॉप पर होता है.
• सोर्स कोड डायरेक्ट्री से लोकल वेब सर्वर चलाया जा रहा है, ताकि साइट को localhost:8080 पर ऐक्सेस किया जा सके.
• Google Chrome में आपके localhost:8080 ऐप्लिकेशन खुल गए हैं और साइट का सीएसएस बदलने के लिए DevTools का इस्तेमाल किया जा रहा है.

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

सीमाएं

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

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

मिलती-जुलती सुविधा: स्थानीय बदलाव

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

पहला चरण: सेटअप करना

वर्कस्पेस का इस्तेमाल करने का अनुभव पाने के लिए, यह ट्यूटोरियल पूरा करें.

डेमो सेट अप करें

1. अपने कंप्यूटर की किसी डायरेक्ट्री में, इस डेमो डेटा स्टोर करने की जगह का क्लोन बनाएं. उदाहरण के लिए, ~/Desktop के लिए.

2. ~/Desktop/devtools-workspace-demo में लोकल वेब सर्वर शुरू करें. यहां SimpleHTTPServer शुरू करने के लिए कुछ सैंपल कोड दिए गए हैं. हालांकि, आपके पास अपनी पसंद का सर्वर इस्तेमाल करने का विकल्प है.

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   इस ट्यूटोरियल के बाकी हिस्से में, इस डायरेक्ट्री को /devtools-workspace-demo कहा जाएगा.

3. Google Chrome में कोई टैब खोलें और साइट के लोकल तौर पर होस्ट किए गए वर्शन पर जाएं. आपको इसे localhost:8000 जैसे यूआरएल से ऐक्सेस करना होगा. सटीक पोर्ट नंबर अलग हो सकता है.

   

DevTools सेट अप करें

1. स्थानीय तौर पर होस्ट किए गए डेमो पेज पर DevTools खोलें.

2. सोर्स > फ़ाइल फ़ोल्डर पर जाएं और devtools-workspace-demo फ़ोल्डर में उस फ़ाइल फ़ोल्डर को सेट अप करें जिसे आपने क्लोन किया है. ऐसा कई तरीकों से किया जा सकता है:

   • फ़ोल्डर को खींचें और सोर्स सेक्शन में एडिटर में छोड़ें.
   • फ़ोल्डर चुनें लिंक पर क्लिक करें और फ़ोल्डर चुनें.
   • फ़ोल्डर जोड़ें पर क्लिक करें और फ़ोल्डर चुनें.

3. सबसे ऊपर मौजूद प्रॉम्प्ट में, DevTools को डायरेक्ट्री में पढ़ने और उसमें बदलाव करने की अनुमति देने के लिए, अनुमति दें पर क्लिक करें.

   

फ़ाइल फ़ोल्डर टैब में, अब index.html, script.js, और styles.css के बगल में हरे रंग का बिंदु दिखेगा. इन हरे बिंदुओं का मतलब है कि DevTools ने पेज के नेटवर्क संसाधनों और devtools-workspace-demo में मौजूद फ़ाइलों के बीच मैपिंग बनाई है.

दूसरा चरण: सीएसएस में किए गए बदलाव को डिस्क में सेव करना

1. /devtools-workspace-demo/styles.css को टेक्स्ट एडिटर में खोलें. ध्यान दें कि h1 एलिमेंट की color प्रॉपर्टी को fuchsia पर कैसे सेट किया जाता है.

   

2. टेक्स्ट एडिटर बंद करें.

3. DevTools में वापस जाकर, एलिमेंट टैब पर क्लिक करें.

4. <h1> एलिमेंट की color प्रॉपर्टी की वैल्यू को अपने पसंदीदा रंग में बदलें. इसके लिए:

   1. DOM ट्री में <h1> एलिमेंट पर क्लिक करें.
   2. स्टाइल पैनल में, h1 { color: fuchsia } सीएसएस नियम ढूंढें और रंग को अपने पसंदीदा रंग में बदलें. इस उदाहरण में, रंग को हरा पर सेट किया गया है.

   

   स्टाइल पैनल में, styles.css:1 के बगल में मौजूद हरे रंग के बिंदु का मतलब है कि आप जो भी बदलाव करेंगे उसे /devtools-workspace-demo/styles.css से मैप किया जाएगा.

5. /devtools-workspace-demo/styles.css को फिर से टेक्स्ट एडिटर में खोलें. color प्रॉपर्टी अब आपके पसंदीदा रंग पर सेट है.

6. पेज को फिर से लोड करें. <h1> एलिमेंट का रंग अब भी आपके पसंदीदा रंग पर सेट है. यह इसलिए काम करता है, क्योंकि जब आपने बदलाव किया था और DevTools ने बदलाव को डिस्क में सेव कर लिया था. और फिर, जब आपने पेज को फिर से लोड किया, तो आपके स्थानीय सर्वर ने डिस्क से फ़ाइल की बदली हुई कॉपी पेश की.

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

एलिमेंट पैनल में जाकर, एचटीएमएल बदलकर देखें

1. एलिमेंट टैब खोलें.

2. h1 एलिमेंट के टेक्स्ट कॉन्टेंट पर दो बार क्लिक करें, जिसमें Workspaces Demo लिखा है और उसे I ❤️ Cake से बदलें.

   

3. /devtools-workspace-demo/index.html को टेक्स्ट एडिटर में खोलें. आपने अभी जो बदलाव किया है वह मौजूद नहीं है.

4. पेज को फिर से लोड करें. यह पेज अपने मूल टाइटल पर वापस दिखने लगता है.

ज़रूरी नहीं: यह काम क्यों नहीं करता है

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

कम शब्दों में, DOM ट्री !== एचटीएमएल.

सोर्स पैनल से एचटीएमएल बदलें

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

1. स्रोत > पेज पर जाएं.
2. (इंडेक्स) पर क्लिक करें. पेज का एचटीएमएल खुलता है.
3. <h1>Workspaces Demo</h1> को <h1>I ❤️ Cake</h1> से बदलें.
4. बदलाव को सेव करने के लिए, Command+S (Mac) या Control+S (Windows, Linux, ChromeOS) दबाएं.

5. पेज को फिर से लोड करें. <h1> एलिमेंट अब भी नया टेक्स्ट दिखा रहा है.

   

6. /devtools-workspace-demo/index.html खोलें. <h1> एलिमेंट में नया टेक्स्ट शामिल है.

चौथा चरण: JavaScript में किए गए बदलाव को डिस्क में सेव करना

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

1. एलिमेंट टैब खोलें.
2. Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाएं. इससे कमांड मेन्यू खुलेगा.

3. QS टाइप करें, फिर क्विक सोर्स दिखाएं चुनें. आपकी DevTools विंडो में सबसे नीचे अब एक क्विक सोर्स टैब है.

   

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

4. फ़ाइल खोलें डायलॉग खोलने के लिए, Command+P (Mac) या Control+P (Windows, Linux, ChromeOS) दबाएं.

5. script टाइप करें और devtools-workspace-demo/script.js चुनें.

   

6. डेमो में Edit and save files in a workspace लिंक पर ध्यान दें. इसे नियमित तौर पर स्टाइल किया जाता है.

7. क्विक सोर्स टैब में script.js के नीचे नीचे दिया गया कोड जोड़ें.

   document.querySelector('a').style = 'font-style:italic';
   

8. बदलाव को सेव करने के लिए, Command+S (Mac) या Control+S (Windows, Linux, ChromeOS) दबाएं.

9. पेज को फिर से लोड करें. पेज पर मौजूद लिंक अब इटैलिक है.

अगले चरण

किसी वर्कस्पेस में एक से ज़्यादा फ़ोल्डर सेट अप किए जा सकते हैं. ऐसे सभी फ़ोल्डर की सूची, सेटिंग > फ़ाइल फ़ोल्डर में दी गई है.

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