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