वेब ब्राउज़र कंसोल फ्रंट-एंड एप्लिकेशन डिबगिंग के लिए सबसे अधिक उपयोग किए जाने वाले टूल में से एक है। कंसोल एपीआई डेवलपर्स को त्रुटियों और लॉग संदेशों से निपटने की क्षमता प्रदान करता है।
कंसोल .log () शायद कंसोल एपीआई में सबसे अधिक इस्तेमाल किया जाने वाला तरीका है, लेकिन अन्य तरीके भी हैं जो आप अपने वर्कफ़्लो में उपयोग कर सकते हैं। यह मार्गदर्शिका आपको विभिन्न वेब ब्राउज़र कंसोल विधियों को दिखाती है जिनका उपयोग आप अपने डीबगिंग वर्कफ़्लो को बेहतर बनाने के लिए कर सकते हैं।
लॉगिंग क्यों महत्वपूर्ण है?
वेब ब्राउज़र कंसोल में प्रवेश करना फ्रंट-एंड या जावास्क्रिप्ट-आधारित एप्लिकेशन डीबग करने के सर्वोत्तम तरीकों में से एक है।
अधिकांश आधुनिक वेब ब्राउज़र कंसोल एपीआई का समर्थन करते हैं, जिससे यह डेवलपर्स के लिए आसानी से उपलब्ध हो जाता है। कंसोल ऑब्जेक्ट ब्राउज़र के डीबगिंग कंसोल तक पहुंच प्रदान करने के लिए जिम्मेदार है। कार्यान्वयन ब्राउज़रों में भिन्न हो सकता है लेकिन सभी आधुनिक ब्राउज़रों में अधिकांश विधियां काम करेंगी।
युक्ति : आपका ब्राउज़र कंसोल इस गाइड में चर्चा किए गए सभी कोड चला सकता है। Chrome या फ़ायरफ़ॉक्स में ब्राउज़र डेवलपर्स टूल खोलने के लिए अपने कीबोर्ड पर F12 दबाएं।
लॉगिंग स्ट्रिंग संदेश
सबसे सामान्य कंसोल विधियों में से एक कंसोल है। () । यह बस एक स्ट्रिंग संदेश या वेब कंसोल के लिए कुछ मूल्य प्रदान करता है। सरल मानों या स्ट्रिंग संदेशों के लिए, कंसोल.लॉग () विधि संभवतः उपयोग करने का सबसे अच्छा विकल्प है।
हैलो वर्ल्ड संदेश को आउटपुट करने के लिए, आप निम्न का उपयोग कर सकते हैं।
console.log(`Hello World`);
कंसोल.लॉग () विधि की एक और विशेष विशेषता डोम तत्वों के उत्पादन या वेबसाइट के एक हिस्से की संरचना को प्रिंट करने की क्षमता है, उदाहरण के लिए, शरीर के तत्व की संरचना और इसके अंदर सब कुछ का उपयोग करने के लिए।
console.log(document.body)आउटपुट HTML ट्री के रूप में DOM तत्वों का एक संग्रह है।
इंटरएक्टिव जावास्क्रिप्ट ऑब्जेक्ट लॉगिंग
कंसोल ऑब्जेक्ट्स के इंटरेक्टिव गुणों को लॉग करने के लिए कंसोल . dir () विधि का उपयोग किया जाता है। उदाहरण के लिए, आप इसका उपयोग किसी वेबपेज में DOM तत्वों को देखने के लिए कर सकते हैं।
कंसोल .ir () पद्धति का सामान्य आउटपुट 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');जानकारी
कंसोल पर सामान्य जानकारी प्रिंट करने के लिए, कंसोल. info () विधि का उपयोग करें:
console.info('general info message')जब वे ठीक से वर्गीकृत हो जाएं तो ब्राउज़र कंसोल में संदेशों को फ़िल्टर करना या ढूंढना आसान होता है।
ट्रेसिंग प्रोग्राम फ्लो
प्रोग्राम प्रवाह या निष्पादन के ढेर ट्रेस को प्रिंट करने के लिए कंसोल.ट्रेस () विधि का उपयोग करें। यह डिबगिंग के लिए एक बहुत ही उपयोगी विशेषता है क्योंकि यह उस क्रम को प्रिंट करता है जिसमें आपके प्रोग्राम में फ़ंक्शन निष्पादित होते हैं।
कंसोल ट्रेस () विधि को देखने के लिए, आप तीन फ़ंक्शन (नीचे के अनुसार) बना सकते हैं और एक फ़ंक्शन में एक स्टैक ट्रेस लगा सकते हैं।
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}
अपने ब्राउज़र कंसोल में, कॉल करें या फ़ंक्शनऑन को ट्रिगर करें () और आपको लास्ट इन फर्स्ट आउट ऑर्डर (LIFO) में मुद्रित फ़ंक्शन कॉल का एक स्टैक ट्रेस मिलेगा क्योंकि यह एक स्टैक है।
समय कार्यक्रम निष्पादन
आपके प्रोग्राम को निष्पादित करने में कितना समय लगता है, इसके लिए आप कंसोल.टाइम () विधि का उपयोग कर सकते हैं। कंसोल.टाइम () का उपयोग आमतौर पर कंसोल.टाइमईंड () पद्धति के साथ किया जाता है जहां बाद का उपयोग टाइमर को समाप्त करने के लिए किया जाता है।
आप प्रति वेबपेज पर 10,000 तक के टाइमर रख सकते हैं, जो आपके टाइमर को ठीक से लेबल करने के महत्व पर प्रकाश डालते हैं।
1 से 50,000 की संख्या के माध्यम से जाने के लिए लूप के लिए कितना समय लगता है, आप टाइमर का उपयोग निम्नानुसार कर सकते हैं।
console.time('loop timer 2');
for(i=1; i< 50001; i++){
}
console.timeEnd('loop timer 2');
गिनती
कंसोल.काउंट () विधि का उपयोग किसी फ़ंक्शन की संख्या या किसी कोड के किसी कोड को ट्रैक करने के लिए किया जाता है। उदाहरण के लिए, हम लूप के लिए निष्पादित की गई संख्या का ट्रैक निम्नानुसार रख सकते हैं:
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()आप ब्राउज़र कीबोर्ड शॉर्टकट का उपयोग करके ब्राउज़र कंसोल को भी साफ़ कर सकते हैं।
Google Chrome : Ctrl + L
फ़ायरफ़ॉक्स : Ctrl + Shift + L
पूरी तरह से ब्राउज़र कंसोल का
इस मार्गदर्शिका ने आपको कुछ अलग-अलग उपलब्ध वेब ब्राउज़र कंसोल विधियों को दिखाया है जो आपको फ्रंट-एंड एप्लिकेशन को डीबग करने में मदद करते हैं। कंसोल API बहुत हल्का है, सीखने में आसान है, और अधिकांश आधुनिक ब्राउज़रों में व्यापक रूप से समर्थित है।
कैप्चा सत्यापन को अपनी अगली परियोजना बनाएं और अपने नए डिबगिंग कौशल को परीक्षण में डालें!