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

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 डीबग करें

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

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

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

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

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

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

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

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

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

वर्कस्पेस सेट अप करना

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

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