सोर्स पैनल की खास जानकारी

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

सोर्स पैनल का इस्तेमाल करके, अपनी वेबसाइट के रिसॉर्स देखें और उनमें बदलाव करें. जैसे, स्टाइलशीट, JavaScript फ़ाइलें, और इमेज.

खास जानकारी

सोर्स पैनल की मदद से ये काम किए जा सकते हैं:

सोर्स पैनल खोलें

सोर्स पैनल खोलने के लिए, यह तरीका अपनाएं:

  1. DevTools खोलें.
  2. कमांड मेन्यू खोलने के लिए, यह बटन दबाएं:
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P
  3. sources टाइप करें, सोर्स पैनल दिखाएं को चुनें, और Enter दबाएं.

इसके अलावा, सबसे ऊपर दाएं कोने में मौजूद, more_vert ज़्यादा विकल्प > ज़्यादा टूल > सोर्स को चुनें.

फ़ाइलें देखें

पेज पर लोड किए गए सभी संसाधन देखने के लिए, पेज टैब पर क्लिक करें.

पेज टैब.

पेज टैब को इस तरह व्यवस्थित किया जाता है:

  • टॉप-लेवल, जैसे कि ऊपर दिए गए स्क्रीनशॉट में top, एक एचटीएमएल फ़्रेम को दिखाता है. आपको top, हर उस पेज पर दिखेगा जिसे आपने देखा है. top मुख्य दस्तावेज़ फ़्रेम को दिखाता है.
  • ऊपर दिए गए स्क्रीनशॉट में, developers.google.com जैसे दूसरे लेवल का मतलब ऑरिजिन है.
  • तीसरे लेवल, चौथे लेवल वगैरह में, उन डायरेक्ट्री और रिसॉर्स को दिखाया जाता है जिन्हें उस ऑरिजिन से लोड किया गया था. उदाहरण के लिए, ऊपर दिए गए स्क्रीनशॉट में, संसाधन devsite-googler-button का पूरा पाथ developers.google.com/_static/19aa27122b/css/devsite-googler-button है.

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

एडिटर टैब में किसी फ़ाइल को देखना.

सीएसएस और JavaScript में बदलाव करना

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

Editor की मदद से, गड़बड़ियों को ठीक भी किया जा सकता है. उदाहरण के लिए, यह सिंटैक्स से जुड़ी गड़बड़ियों और अन्य समस्याओं के बगल में, लाइन में मौजूद गड़बड़ी के टूलटिप दिखाता है और उन्हें अंडरलाइन करता है. जैसे, सीएसएस @import और url() स्टेटमेंट और अमान्य यूआरएल वाले एचटीएमएल href एट्रिब्यूट.

इनलाइन सिंटैक्स गड़बड़ी वाली टूलटिप.

किसी एलिमेंट के background-color में बदलाव करने पर, आपको दिखेगा कि बदलाव तुरंत लागू हो गया है.

एडिटर टैब में सीएसएस में बदलाव करना.

JavaScript में किए गए बदलावों को लागू करने के लिए, Command+S (Mac) या Control+S (Windows, Linux) दबाएं. DevTools, स्क्रिप्ट को फिर से नहीं चलाता. इसलिए, JavaScript में किए गए सिर्फ़ वे बदलाव लागू होते हैं जो आपने फ़ंक्शन में किए हैं. उदाहरण के लिए, ध्यान दें कि console.log('A') नहीं चलता, जबकि console.log('B') चलता है.

एडिटर टैब में JavaScript में बदलाव करना.

अगर DevTools ने बदलाव करने के बाद पूरी स्क्रिप्ट को फिर से चलाया है, तो A टेक्स्ट को Console में लॉग किया जाएगा.

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

स्निपेट बनाना, उन्हें सेव करना, और चलाना

स्निपेट, स्क्रिप्ट होते हैं. इन्हें किसी भी पेज पर चलाया जा सकता है. मान लें कि आपको किसी पेज में jQuery लाइब्रेरी को शामिल करने के लिए, Console में बार-बार यह कोड टाइप करना पड़ता है, ताकि Console से jQuery कमांड चलाई जा सकें:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

इसके बजाय, इस कोड को स्निपेट में सेव किया जा सकता है. इसके बाद, जब भी आपको इसकी ज़रूरत हो, तब बटन पर कुछ क्लिक करके इसे चलाया जा सकता है. DevTools, स्निपेट को आपके फ़ाइल सिस्टम में सेव करता है. उदाहरण के लिए, उस स्निपेट की जांच करें जो किसी पेज में jQuery लाइब्रेरी को जोड़ता है.

यह एक स्निपेट है, जो किसी पेज में jQuery लाइब्रेरी को जोड़ता है.

स्निपेट चलाने के लिए:

  • स्निपेट टैब में फ़ाइल खोलें. इसके बाद, सबसे नीचे मौजूद ऐक्शन बार में, चलाएं 'चलाएं' बटन. पर क्लिक करें.
  • कमांड मेन्यू खोलें. इसके बाद, > वर्ण मिटाएं, ! टाइप करें, अपने स्निपेट का नाम टाइप करें, और फिर Enter दबाएं.

ज़्यादा जानने के लिए, किसी भी पेज से कोड के स्निपेट चलाना लेख पढ़ें.

JavaScript को डीबग करना

यह पता लगाने के लिए कि आपकी JavaScript में कहां गड़बड़ी हो रही है, console.log() का इस्तेमाल करने के बजाय, Chrome DevTools के डीबगिंग टूल का इस्तेमाल करें. इसका सामान्य तरीका यह है कि एक ब्रेकपॉइंट सेट किया जाए. यह आपके कोड में एक ऐसी जगह होती है जहां कोड को जान-बूझकर रोका जाता है. इसके बाद, अपने कोड को एक-एक लाइन करके लागू किया जाता है.

ब्रेकपॉइंट पर रोकना.

कोड को चरण दर चरण देखते समय, आपको अभी तय की गई सभी प्रॉपर्टी और वैरिएबल की वैल्यू दिखेंगी. साथ ही, उनमें बदलाव करने का विकल्प भी मिलेगा. इसके अलावा, कंसोल में JavaScript चलाने और अन्य काम करने का विकल्प भी मिलेगा.

DevTools में डीबग करने के बारे में बुनियादी बातें जानने के लिए, JavaScript को डीबग करना शुरू करें लेख पढ़ें.

सिर्फ़ अपने कोड पर फ़ोकस करें

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

आपको वेब डीबग करने का बेहतर अनुभव देने के लिए, DevTools ये काम करता है:

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

ज़्यादा जानने के लिए, यह लेख पढ़ें:

Workspace सेट अप करना

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

शुरू करने के लिए, वर्कस्पेस की मदद से फ़ाइलों में बदलाव करना लेख पढ़ें.