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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

खास जानकारी

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

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

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

सीमाएं

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

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

    Chrome में खोला गया, लोकल होस्ट किया गया डेमो पेज.

DevTools सेट अप करना

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

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

    • फ़ोल्डर को सोर्स में मौजूद एडिटर में खींचें और छोड़ें.
    • फ़ोल्डर चुनें लिंक पर क्लिक करें और फ़ोल्डर चुनें.
    • जोड़ें फ़ोल्डर जोड़ें पर क्लिक करें और फ़ोल्डर चुनें. सोर्स टैब पर जाएं. इसके बाद, Workspace टैब पर जाएं.

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

    प्रॉम्प्ट में मौजूद 'अनुमति दें' बटन.

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

Workspace टैब में अब लोकल फ़ाइलों और नेटवर्क फ़ाइलों के बीच मैपिंग दिखती है.

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

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

    टेक्स्ट एडिटर में styles.css देखना.

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

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

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

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

    h1 एलिमेंट की कलर प्रॉपर्टी को हरे रंग पर सेट करना.

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

कम शब्दों में, 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. फ़ाइल खोलें डायलॉग बॉक्स खोलने के लिए, 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 का इस्तेमाल करने का तरीका जानें.