जावास्क्रिप्ट में डिबगिंग: ब्राउज़र कंसोल में लॉगिंग

वेब ब्राउज़र कंसोल फ्रंट-एंड अनुप्रयोगों को डीबग करने के लिए सबसे व्यापक रूप से उपयोग किए जाने वाले टूल में से एक है। कंसोल एपीआई डेवलपर्स को त्रुटियों से निपटने और संदेशों को लॉग करने की क्षमता प्रदान करता है।

कंसोल.लॉग () कंसोल एपीआई में शायद सबसे अधिक इस्तेमाल की जाने वाली विधि है, लेकिन अन्य विधियां भी हैं जिनका उपयोग आप अपने वर्कफ़्लो में कर सकते हैं। यह मार्गदर्शिका आपको विभिन्न वेब ब्राउज़र कंसोल विधियों को दिखाती है जिनका उपयोग आप अपने डिबगिंग वर्कफ़्लो को बेहतर बनाने के लिए कर सकते हैं।

---

---

लॉगिंग क्यों महत्वपूर्ण है?

वेब ब्राउज़र कंसोल में लॉग इन करना फ्रंट-एंड या जावास्क्रिप्ट-आधारित अनुप्रयोगों को डीबग करने के सर्वोत्तम तरीकों में से एक है।

संबंधित: सीखने लायक 6 जावास्क्रिप्ट फ्रेमवर्क

अधिकांश आधुनिक वेब ब्राउज़र कंसोल एपीआई का समर्थन करते हैं, जिससे यह डेवलपर्स के लिए आसानी से उपलब्ध हो जाता है। कंसोल ऑब्जेक्ट ब्राउज़र के डिबगिंग कंसोल तक पहुंच प्रदान करने के लिए ज़िम्मेदार है। कार्यान्वयन सभी ब्राउज़रों में भिन्न हो सकता है लेकिन अधिकांश विधियां सभी आधुनिक ब्राउज़रों में काम करेंगी।

टिप : आपका ब्राउज़र कंसोल इस गाइड में चर्चा किए गए सभी कोड चला सकता है। दबाएँ F12 Chrome या Firefox में ब्राउज़र डेवलपर टूल खोलने के लिए अपने कीबोर्ड पर.

लॉगिंग स्ट्रिंग संदेश

सबसे आम कंसोल विधियों में से एक है कंसोल.लॉग () . यह केवल वेब कंसोल पर एक स्ट्रिंग संदेश या कुछ मान आउटपुट करता है। साधारण मानों या स्ट्रिंग संदेशों के लिए, कंसोल.लॉग () विधि शायद उपयोग करने का सबसे अच्छा विकल्प है।

---

---

भ्रष्ट वीडियो फ़ाइलों को कैसे ठीक करें mp4

आउटपुट करने के लिए a नमस्ते दुनिया संदेश, आप निम्न का उपयोग कर सकते हैं।

console.log(`Hello World`);

की एक और खास विशेषता कंसोल.लॉग () विधि DOM तत्वों के आउटपुट या किसी वेबसाइट के किसी भाग की संरचना को प्रिंट करने की क्षमता है, उदाहरण के लिए, बॉडी एलिमेंट की संरचना को आउटपुट करने के लिए और इसके अंदर की हर चीज़ निम्नलिखित का उपयोग करती है।

---

---

console.log(document.body)

आउटपुट HTML ट्री के रूप में DOM तत्वों का एक संग्रह है।

इंटरएक्टिव जावास्क्रिप्ट ऑब्जेक्ट लॉग करना

NS कंसोल.डीआईआर () जावास्क्रिप्ट ऑब्जेक्ट्स के इंटरेक्टिव गुणों को लॉग करने के लिए विधि का उपयोग किया जाता है। उदाहरण के लिए, आप इसका उपयोग किसी वेबपेज में DOM तत्वों को देखने के लिए कर सकते हैं।

का विशिष्ट आउटपुट कंसोल.डीआईआर () विधि JSON प्रारूप में निर्दिष्ट जावास्क्रिप्ट ऑब्जेक्ट के सभी गुणों से युक्त है। HTML पृष्ठ के मुख्य भाग में सभी तत्वों के गुणों को मुद्रित करने के लिए नीचे दी गई विधि का उपयोग करें:

console.dir(document.body)

भावों का मूल्यांकन

आप इकाई परीक्षण के मुखर तरीकों से परिचित हो सकते हैं—ठीक है कंसोल.जोर () विधि एक समान तरीके से काम करती है। उपयोग कंसोल.जोर () किसी अभिव्यक्ति या स्थिति का मूल्यांकन करने की विधि।

जब मुखर विधि विफल हो जाती है, तो कंसोल एक त्रुटि संदेश प्रिंट करता है; अन्यथा, यह कुछ भी प्रिंट नहीं करता है। किसी व्यक्ति की आयु 18 वर्ष से अधिक है या नहीं, इसका मूल्यांकन करने के लिए नीचे दिए गए कोड का उपयोग करें:

let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';

console.assert( yourAge > ageLimit, assertFailMessage);

उपरोक्त दावा विफल रहता है और एक त्रुटि संदेश तदनुसार प्रिंट करता है।

टेबल्स में लॉगिंग डेटा

उपयोग कंसोल मेज() तालिका प्रारूप में डेटा प्रदर्शित करने की विधि। तालिका के रूप में प्रदर्शित करने के लिए अच्छे उम्मीदवारों में सरणियाँ या वस्तु डेटा शामिल हैं।

ध्यान दें : कुछ ब्राउज़र, जैसे फ़ायरफ़ॉक्स, में 1,000 पंक्तियों की अधिकतम सीमा होती है जिसे के साथ प्रदर्शित किया जा सकता है कंसोल मेज() तरीका।

मान लें कि आपके पास कार ऑब्जेक्ट्स की निम्न सरणी है:

let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
]

आप नीचे दी गई विधि का उपयोग करके उपरोक्त सरणी को तालिका में प्रदर्शित कर सकते हैं:

console.table(cars);

श्रेणी के अनुसार लॉगिंग संदेश

वेब ब्राउज़र कंसोल संदेशों को मुख्य रूप से तीन समूहों में वर्गीकृत किया जाता है: त्रुटि, चेतावनी और जानकारी।

त्रुटियाँ

कंसोल में त्रुटि संदेशों को विशेष रूप से प्रिंट करने के लिए कंसोल.त्रुटि () विधि, त्रुटि से संबंधित संदेश लाल फ़ॉन्ट में प्रदर्शित होते हैं।

console.error('error message');

चेतावनी

चेतावनियां प्रिंट करने के लिए, निम्न का उपयोग करें। अधिकांश परिदृश्यों की तरह, चेतावनी संदेश नारंगी रंग में प्रदर्शित होते हैं:

console.warn('warning message');

जानकारी

सामान्य जानकारी को कंसोल पर प्रिंट करने के लिए, का उपयोग करें कंसोल.जानकारी () तरीका:

console.info('general info message')

ब्राउज़र कंसोल में संदेशों को ठीक से वर्गीकृत किए जाने पर उन्हें फ़िल्टर करना या ढूंढना आसान होता है।

अनुरेखण कार्यक्रम प्रवाह

उपयोग कंसोल.ट्रेस () प्रोग्राम प्रवाह या निष्पादन के स्टैक ट्रेस को प्रिंट करने की विधि। यह डिबगिंग के लिए एक बहुत ही उपयोगी विशेषता है क्योंकि यह उस क्रम को प्रिंट करता है जिसमें आपके प्रोग्राम में फ़ंक्शन निष्पादित होते हैं।

देखने के लिए कंसोल.ट्रेस () क्रिया में विधि, आप तीन फ़ंक्शन (नीचे के अनुसार) बना सकते हैं और किसी एक फ़ंक्शन में स्टैक ट्रेस रख सकते हैं।

function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}

अपने ब्राउज़र कंसोल में, कॉल करें या ट्रिगर करें फंक्शनवन () और आपको लास्ट इन फर्स्ट आउट ऑर्डर (एलआईएफओ) में मुद्रित फ़ंक्शन कॉल का स्टैक ट्रेस मिलेगा क्योंकि यह एक स्टैक है।

समय कार्यक्रम निष्पादन

आपके प्रोग्राम में किसी ऑपरेशन को निष्पादित करने में कितना समय लगता है, आप इसका उपयोग कर सकते हैं कंसोल.टाइम () तरीका। कंसोल.टाइम () आमतौर पर के साथ प्रयोग किया जाता है कंसोल.टाइमएंड () विधि जहां उत्तरार्द्ध का उपयोग टाइमर को समाप्त करने के लिए किया जाता है।

आपके टाइमर को ठीक से लेबल करने के महत्व पर प्रकाश डालते हुए, आपके पास प्रति वेबपेज १०,००० टाइमर तक चल सकते हैं।

1 से 50,000 तक की संख्या के माध्यम से जाने के लिए लूप के लिए कितना समय लगता है, आप टाइमर का उपयोग निम्नानुसार कर सकते हैं।

console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');


गिनती

NS कंसोल.काउंट () किसी फ़ंक्शन या कोड के कुछ टुकड़े को किसी प्रोग्राम में कितनी बार कॉल किया गया है, इस पर नज़र रखने के लिए विधि का उपयोग किया जाता है। उदाहरण के लिए, हम इस प्रकार ट्रैक कर सकते हैं कि लूप के लिए कितनी बार निष्पादित किया गया है:

for(i=0; i<4; i++ ){
console.count();
}

लॉग संदेशों को समूहीकृत करना

टाइमर विधि की तरह, कंसोल.ग्रुप () , तथा कंसोल.ग्रुपएंड () विधियों का उपयोग आमतौर पर जोड़े में किया जाता है।

समूह विधि आपको अपने लॉग संदेशों को बेहतर ढंग से व्यवस्थित करने में मदद करती है। उदाहरण के लिए, हम निम्न प्रकार से लेबल चेतावनियों के साथ चेतावनी संदेशों का एक समूह बना सकते हैं।

console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()

चेतावनी समूह के भीतर दो संदेशों को नेत्रहीन रूप से वर्गीकृत किया गया है जैसा कि नीचे दिए गए आउटपुट में देखा गया है।

कंसोल साफ़ करना

अंतिम लेकिन कम से कम, यहां कई तरीके हैं जिनसे आप अपने ब्राउज़र कंसोल में लॉग संदेशों को साफ़ कर सकते हैं।

उपयोग कंसोल.क्लियर () विधि इस प्रकार है।

console.clear()

आप ब्राउज़र कीबोर्ड शॉर्टकट का उपयोग करके ब्राउज़र कंसोल को भी साफ़ कर सकते हैं।

गूगल क्रोम : Ctrl + एल

फ़ायर्फ़ॉक्स : Ctrl + शिफ्ट + एल

ब्राउज़र कंसोल का पूरी तरह से उपयोग करना

इस गाइड ने आपको फ़्रंट-एंड अनुप्रयोगों को डीबग करने में मदद करने के लिए कुछ अलग उपलब्ध वेब ब्राउज़र कंसोल विधियों को दिखाया है। कंसोल एपीआई बहुत हल्का है, सीखने में आसान है, और अधिकांश आधुनिक ब्राउज़रों में व्यापक रूप से समर्थित है।

पिछले क्रोम सत्र को कैसे पुनर्स्थापित करें

कैप्चा सत्यापन को अपना अगला प्रोजेक्ट बनाएं और अपने नए डिबगिंग कौशल का परीक्षण करें!

साझा करना साझा करना कलरव ईमेल HTML, CSS और JavaScript का उपयोग करके एक CAPTCHA सत्यापन फॉर्म बनाएं

कैप्चा सत्यापन के साथ अपनी वेबसाइटों को सुरक्षित करें।

आगे पढ़िए संबंधित विषय

• प्रोग्रामिंग
• वेब विकास
• जावास्क्रिप्ट

लेखक के बारे में जाना अच्छा है(36 लेख प्रकाशित)

मविज़ा पेशे से सॉफ्टवेयर विकसित करता है और लिनक्स और फ्रंट-एंड प्रोग्रामिंग पर व्यापक रूप से लिखता है। उनके कुछ हितों में इतिहास, अर्थशास्त्र, राजनीति और उद्यम-वास्तुकला शामिल हैं।

मविज़ा कुमवेंडा . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें