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

Kayce Basques

Sofia Emelianova

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

चेतावनी: इस ट्यूटोरियल को शुरू करने से पहले, आपको इन कामों का तरीका पता होना चाहिए:

• वेब पेज बनाने के लिए, एचटीएमएल, सीएसएस, और JavaScript का इस्तेमाल करना.
• सीएसएस में बुनियादी बदलाव करने के लिए, DevTools का इस्तेमाल करना.
• लोकल एचटीटीपी वेब सर्वर चलाएं.

खास जानकारी

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

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

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

सीमाएं

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

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

ज़रूरी नहीं: यह सुविधा काम क्यों नहीं कर रही है

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

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

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

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

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

1. सोर्स > पेज पर जाएं.
2. (index) पर क्लिक करें. पेज का एचटीएमएल खुल जाएगा.
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. फ़ाइल खोलें डायलॉग बॉक्स खोलने के लिए, Mac पर Command+P या Windows, Linux, और ChromeOS पर Control+P दबाएं.

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. पेज को फिर से लोड करें. पेज पर मौजूद लिंक अब इटैलिक है.

अगले चरण

सफ़ल: बधाई हो! अब आपको पता है कि DevTools में किए गए बदलावों को, लोकल तौर पर होस्ट की गई वेबसाइट के सोर्स में कैसे सेव किया जाता है.

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

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