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

Kayce Basques
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, आपके नए कोड को चलाने के लिए पेज को अपडेट करता है.

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

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

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

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

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

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

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

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

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

स्निपेट ऐसी स्क्रिप्ट होती हैं जिन्हें किसी भी पेज पर चलाया जा सकता है. मान लें कि किसी पेज में jQuery लाइब्रेरी जोड़ने के लिए, आप कंसोल में बार-बार नीचे दिया गया कोड टाइप करते हैं, ताकि आप कंसोल से 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 लाइब्रेरी डालता है.

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

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

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

JavaScript को डीबग करना

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

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

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

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

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

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

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

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

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

फ़ाइल फ़ोल्डर सेट अप करना

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

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