इस गाइड में आपको वेब पेज के संसाधनों को देखने के लिए, Chrome DevTools का इस्तेमाल करने का तरीका बताया गया है. संसाधन ऐसी फ़ाइलें होती हैं जिन्हें किसी पेज को सही तरीके से दिखाने के लिए इसकी ज़रूरत होती है. सीएसएस, JavaScript, और एचटीएमएल फ़ाइलों के साथ-साथ इमेज, संसाधनों के उदाहरणों में शामिल हैं.
यह गाइड मानता है कि आपको वेब डेवलपमेंट और Chrome DevTools की बुनियादी बातों के बारे में पता है.
संसाधन खोलें
आपको जिस रिसॉर्स की जांच करनी है उसका नाम पता होने पर, Command मेन्यू की मदद से रिसॉर्स को तेज़ी से खोला जा सकता है.
Control+P या Command+P (Mac) दबाएं. फ़ाइल खोलें डायलॉग बॉक्स खुलता है.
पहली इमेज. फ़ाइल खोलें डायलॉग
ड्रॉपडाउन से फ़ाइल चुनें या फ़ाइल का नाम टाइप करना शुरू करें और ऑटोकंप्लीट बॉक्स में सही फ़ाइल हाइलाइट होने के बाद, Enter दबाएं.
दूसरी इमेज. फ़ाइल खोलें डायलॉग में फ़ाइल नाम टाइप करना
नेटवर्क पैनल में संसाधन खोलें
संसाधन की जानकारी की जांच करना देखें.
तीसरी इमेज. नेटवर्क पैनल में किसी संसाधन की जांच करना
अन्य पैनल से नेटवर्क पैनल में संसाधन दिखाएं
नीचे दिए गए संसाधन ब्राउज़ करें सेक्शन में, DevTools यूज़र इंटरफ़ेस (यूआई) के अलग-अलग हिस्सों के संसाधनों को देखने का तरीका बताया गया है. अगर आपको कभी भी नेटवर्क पैनल में किसी संसाधन की जांच करनी है, तो संसाधन पर राइट क्लिक करें. इसके बाद, नेटवर्क पैनल में दिखाएं को चुनें.
चौथी इमेज. नेटवर्क पैनल में दिखाएं विकल्प
संसाधन ब्राउज़ करें
नेटवर्क पैनल में संसाधन ब्राउज़ करें
नेटवर्क गतिविधि लॉग करना देखें.
पांचवी इमेज. नेटवर्क लॉग में मौजूद पेज संसाधन
डायरेक्ट्री के हिसाब से ब्राउज़ करें
डायरेक्ट्री के हिसाब से व्यवस्थित किए गए किसी पेज के संसाधनों को देखने के लिए:
- Sources पैनल खोलने के लिए Sources टैब पर क्लिक करें.
पेज के संसाधन देखने के लिए, पेज टैब पर क्लिक करें. पेज पैनल खुलता है.
छठी इमेज. पेज पैनल
यहां इमेज 6 में, विषय से जुड़ी जानकारी नहीं दी गई है:
- top, ब्राउज़िंग संदर्भ का मुख्य दस्तावेज़ होता है.
- airhorner.com एक डोमेन दिखाता है. इसमें नेस्ट किए गए सभी संसाधन उसी डोमेन से आते हैं.
उदाहरण के लिए, शायद comlink.global.js फ़ाइल का पूरा यूआरएल
https://airhorner.com/scripts/comlink.global.jsहै. - scripts एक डायरेक्ट्री है.
- (index) मुख्य एचटीएमएल दस्तावेज़ है.
- iu3 भी एक और विकल्प है. शायद इस कॉन्टेक्स्ट को मुख्य दस्तावेज़ के एचटीएमएल में एम्बेड किए गए किसी
<iframe>एलिमेंट से बनाया गया है. - sw.js सर्विस वर्कर को लागू करने का कॉन्टेक्स्ट है.
किसी संसाधन को एडिटर में देखने के लिए, उस पर क्लिक करें.
सातवीं इमेज. एडिटर में फ़ाइल देखना
फ़ाइल नाम से ब्राउज़ करें
डिफ़ॉल्ट रूप से, पेज पैनल, संसाधनों को डायरेक्ट्री के हिसाब से ग्रुप करता है. इस ग्रुप को बंद करने और हर डोमेन के रिसॉर्स को फ़्लैट सूची के तौर पर देखने के लिए:
- पेज पैनल खोलें. डायरेक्ट्री के हिसाब से ब्राउज़ करना देखें.
ज़्यादा विकल्प
पर क्लिक करें और फ़ोल्डर के हिसाब से ग्रुप करें को बंद करें.
आठवीं इमेज. फ़ोल्डर के हिसाब से ग्रुप करें विकल्प
संसाधनों को फ़ाइल टाइप के हिसाब से व्यवस्थित किया गया है. हर एक फ़ाइल टाइप में रिसॉर्स, वर्णमाला के क्रम में व्यवस्थित किए जाते हैं.
नौवीं इमेज. फ़ोल्डर के हिसाब से ग्रुप करें को बंद करने के बाद, पेज पैनल
फ़ाइल टाइप के हिसाब से ब्राउज़ करें
फ़ाइल टाइप के आधार पर संसाधनों का एक ग्रुप बनाने के लिए:
ऐप्लिकेशन टैब पर क्लिक करें. ऐप्लिकेशन पैनल खुलता है. डिफ़ॉल्ट रूप से, मेनिफ़ेस्ट पैनल आम तौर पर पहले खुलता है.
आकृति 10. ऐप्लिकेशन पैनल
नीचे की ओर स्क्रोल करके, फ़्रेम पैनल पर जाएं.
आकृति 11. फ़्रेम पैनल
अपनी पसंद के सेक्शन को बड़ा करें.
किसी संसाधन को देखने के लिए उस पर क्लिक करें.
आकृति 11. ऐप्लिकेशन पैनल में कोई संसाधन देखना
नेटवर्क पैनल में टाइप के हिसाब से फ़ाइलों को ब्राउज़ करें
संसाधन टाइप के हिसाब से फ़िल्टर करना लेख पढ़ें.
12वीं इमेज. नेटवर्क लॉग में सीएसएस के लिए फ़िल्टर करना