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