Chrome DevTools के सोर्स पैनल का इस्तेमाल करके:
- फ़ाइलें देखना.
- सीएसएस और JavaScript में बदलाव करें.
- JavaScript के स्निपेट बनाएं और सेव करें, जिन्हें किसी भी पेज पर चलाया जा सकता है. स्निपेट बुकमार्कलेट से मिलता-जुलता है.
- JavaScript डीबग करें.
- Workspace सेट अप करें, ताकि 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')
चलता है.
अगर बदलाव करने के बाद 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 लाइब्रेरी को शामिल करता है.
स्निपेट चलाने के लिए:
- फ़ाइल को स्निपेट पैनल में खोलें और सबसे नीचे मौजूद कार्रवाई बार में, Run
पर क्लिक करें.
- कमांड मेन्यू खोलें और
>
वर्ण मिटाएं. इसके बाद,!
टाइप करें और अपने स्निपेट, फिर Enter दबाएं.
ज़्यादा जानने के लिए, किसी भी पेज से कोड के स्निपेट चलाएं देखें.
JavaScript डीबग करना
console.log()
का इस्तेमाल करके यह पता लगाने के बजाय कि आपकी JavaScript की गलती कहां हो रही है,
इसके बजाय, Chrome DevTools डीबग करने के टूल का इस्तेमाल करें. आम तौर पर, ब्रेकपॉइंट सेट किया जाता है. यह
अपने कोड में जान-बूझकर रोके गए हैं और फिर अपने कोड के निष्पादन को आगे बढ़ाते हुए, एक लाइन में
समय.
इस कोड में आगे बढ़ने पर, तय किए गए सभी मौजूदा कोड की वैल्यू देखी जा सकती हैं और उनमें बदलाव किया जा सकता है प्रॉपर्टी और वैरिएबल के साथ-साथ, कंसोल में JavaScript चलाने के साथ-साथ और भी बहुत कुछ करें.
DevTools में डीबग करने की बुनियादी बातें जानने के लिए, JavaScript को डीबग करने का तरीका शुरू करना देखें.
सिर्फ़ अपने कोड पर फ़ोकस करें
Chrome DevTools आपको सिर्फ़ उस कोड पर फ़ोकस करने की सुविधा देता है जिसे आपने लिखा है. ऐसा करने के लिए, फ़्रेमवर्क और ऐसे टूल बनाएं जिनसे आपको वेब ऐप्लिकेशन बनाते समय फ़ायदा मिले.
आपको आधुनिक वेब डीबग करने का अनुभव देने के लिए, DevTools ये काम करता है:
- लिखे गए और डिप्लॉय किए गए कोड को अलग करता है. आपका कोड जल्दी ढूंढने में आपकी मदद करने के लिए, सोर्स पैनल उस कोड को अलग करता है जिसे आपने बंडल किए गए और छोटे किए गए कोड से बनाया है.
- तीसरे पक्ष के ऐसे कोड को अनदेखा करता है जिसके बारे में जानकारी मौजूद है:
इसके अलावा, अगर फ़्रेमवर्क के साथ काम करता है, तो डीबगर में कॉल स्टैक और कंसोल में स्टैक ट्रेस एसिंक्रोनस कार्रवाइयों का पूरा इतिहास दिखाते हैं.
ज़्यादा जानने के लिए, यहां देखें:
- Chrome DevTools में वेब डीबग करने का मॉडर्न तरीका
- केस स्टडी: DevTools की मदद से बेहतर ऐंग्युलर डीबगिंग करना
Workspace सेट अप करें
डिफ़ॉल्ट रूप से, जब सोर्स पैनल में किसी फ़ाइल में बदलाव किया जाता है, तो पेज को फिर से लोड करने पर वे बदलाव सेव नहीं होते हैं पेज. फ़ाइल फ़ोल्डर की मदद से, DevTools में किए गए बदलावों को अपनी फ़ाइल में सेव किया जा सकता है सिस्टम. असल में, इससे DevTools का इस्तेमाल कोड एडिटर के तौर पर किया जा सकता है.
इसे चालू करने के लिए, फ़ाइल फ़ोल्डर वाली Files में बदलाव करें लेख पढ़ें.