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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome DevTools के सोर्स पैनल का इस्तेमाल करके:

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

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

पेज पैनल.

पेज पैनल को व्यवस्थित करने का तरीका:

  • ऊपर दिए गए स्क्रीनशॉट में दिए गए 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 लाइब्रेरी डालता है.

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

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

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

JavaScript डीबग करना

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

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

इस कोड में आगे बढ़ने पर, तय किए गए सभी मौजूदा कोड की वैल्यू देखी जा सकती हैं और उनमें बदलाव किया जा सकता है प्रॉपर्टी और वैरिएबल के साथ-साथ, कंसोल में JavaScript चलाने के साथ-साथ और भी बहुत कुछ करें.

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

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

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

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

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

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

Workspace सेट अप करें

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

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