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

Kayce Basques

Sofia Emelianova

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

खास जानकारी

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

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

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

सीमाएं

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

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 में मौजूद फ़ाइलों के बीच मैपिंग की है.

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

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

   

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

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

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. Elements टैब खोलें.

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

   

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

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

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

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

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

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

1. Elements टैब खोलें.
2. Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाएं. Command मेन्यू खोलें.

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 का इस्तेमाल करने का तरीका जानें.