Using the browser console to test code In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में वेब ब्राउज़र कंसोल का उपयोग कर जावास्क्रिप्ट प्रोग्राम सोर्स कोड को इमीडियेट टेस्टिंग और रियल टाइम में डायनामिक वेबसाइट वेबपेजों के साथ डायरेक्ट इंटरैक्ट या कम्यूनिकेट करने का एक बेस्ट मेथड है। जहा आप जावास्क्रिप्ट प्रोग्राम के छोटे-छोटे मॉड्यूल को एक्सेक्यूट कर सकते हैं, इमीडियेट प्रोग्राम रिजल्ट को प्रीव्यू कर सकते हैं, और सीधे वेब ब्राउज़र में अपने मौजूदा जावास्क्रिप्ट प्रोग्राम सोर्स कोड को डीबग कर एरर फ्री बना सकते हैं।
So, let’s learn how to operate the web browser console in JavaScript programming.
Opening the web browser console.
- Universal Chrome, Edge, and Brave web browsers – इन दिए गए वेब ब्राउज़र सॉफ्टवेयर में डेवलपर टूल को ओपन करने के लिए Ctrl + Shift + I विंडोज और लिनक्स ऑपरेटिंग सिस्टम में या Cmd + Option + I की को मैक ऑपरेटिग सिस्टम में दबाएँ। फिर, कंसोल टैब में मैन्युअल में क्लिक करें।
- Firefox web browser – फायरफॉक्स वेब ब्राउज़र में Ctrl + Shift + I विंडोज और लिनक्स ऑपरेटिंग सिस्टम या Cmd + Option + I की को मैक ऑपरेटिंग सिस्टम में दबाएँ और कंसोल टैब विकल्प पर मैन्युअल मूव करे।
- Apple Safari web browser – एप्पल मैक सफारी वेब ब्राउज़र में सफारी प्रैफरेंसेज → एडवांस्ड → डेवलप मेनू में जाए उसके बाद डेवलपर मेनू को इनेबल करें। फिर सफारी वेब ब्राउज़र कंसोल को ओपन करने के लिए Cmd + Option + I की को मैन्युअल दबाएँ।
Writing and testing JavaScript program code in the web browser console.
जरूरत पड़ने पर जब आप वेब ब्राउज़र कंसोल विंडो को ओपन करते हैं, तो जावास्क्रिप्ट प्रोग्रामर इमीडियेट जावास्क्रिप्ट प्रोग्राम सोर्स कोड टेस्टिंग को स्टार्ट कर सकते हैं।
So, let’s test JavaScript program source code in the web browser console.
JavaScript program basic code execution example.
console.log(“Welcome to, Javascript!”);
यह वेब ब्राउज़र कंसोल विंडो में Welcome to, Javascript! स्टेटमेंट प्रिंट करेगा।
Web browser console variable declaration and logging example.
let emp_name = “Mark”;
console.log(emp_name); // रिजल्ट इज – Mark
Basic console arithmetic example.
let mul = 4×2 ;
console.log(mul); // रिजल्ट इज – 8
Defining and calling a function in the console example.
function message(student) {
console.log(“Welcome to javascript, ” + student + “!”);
}
message(“Mark”); // रिजल्ट इज – Welcome to javascript Mark
Modifying the DOM in JavaScript example.
जब आप जावास्क्रिप्ट प्रोग्रामिंग में मौजूदा वेबपेज में डायनामिक टेस्टिंग कर रहे हैं, तब इसमें आप वेबपेज के HTML एलिमेंट के साथ भी इमीडियेट इंटरैक्ट या कम्यूनिकेट भी कर सकते हैं।
Example of changing the background color of a webpage in the console.
document.body.style.backgroundColor = “aqua”;
Or, change the content of a specific element in a particular webpage, for example, a header element with id=”header”.
document.getElementById(“header”).innerText = “Modify Heading!”;
Using the console for debugging JavaScript programs.
आप वेरिएबल का निरीक्षण करके और निष्पादन के प्रवाह की जाँच करके कोड को डिबग करने के लिए ब्राउज़र कंसोल का उपयोग कर सकते हैं।
Using the console for debugging JavaScript programs.
आप जावास्क्रिप्ट कंसोल विंडो में अपने प्रोग्राम कोड में अलग-अलग पॉइंट पर वैल्यूज को लॉग करके उनका टेस्टिंग कर सकते हैं।
let p = 3;
let q = 7;
let total = p + q;
console.log(“addtion is -“, total); // यह कंसोल विंडो में दोनों वेरिएबल का टोटल प्रीव्यू करता है
कंसोल में डेटा को टेबल फ़ॉर्मेट में देखने के लिए console.table() का उपयोग करना उदाहरण।
Example of using console.table() to view data in a table format in the console.
यदि आप जावास्क्रिप्ट प्रोग्राम में ऐरे या ऑब्जेक्ट डाटा टाइप के साथ काम कर रहे हैं, तो आप इन डाटा टाइप को अधिक रीडेबल टेबल फ़ॉर्मेट में प्रीव्यू करने के लिए console.table() फंक्शन का उपयोग कर सकते हैं।
let language = [“Javascript”, “Java”, “Python”, “Html”,];
console.table(language);
यहाँ जावास्क्रिप्ट प्रोग्राम में ऐरे को टेबल फ़ॉर्मेट में डिस्प्ले करेगा, जिससे अलग-अलग ऐरे एलिमेंट का टेस्टिंग करना आसान हो जाएगा।
Setting a breakpoint in the console in a JavaScript program example.
जावास्क्रिप्ट प्रोग्रामर अपने जावास्क्रिप्ट प्रोग्राम सोर्स कोड में ब्रेकपॉइंट सेट करने के लिए debugger; मेथड का उपयोग कर सकते हैं। जब जावास्क्रिप्ट प्रोग्राम में डीबगर डीबगर स्टेटमेंट को फेस करता है, तो यह जावास्क्रिप्ट प्रोग्राम कोड के एक्सेक्युशन को स्टॉप कर देता है, जिससे आप जावास्क्रिप्ट प्रोग्राम वेरिएबल का टेस्टिंग कर सकते हैं, और प्रोग्राम सोर्स कोड के माध्यम से नेक्स्ट मूव कर सकते हैं।
function checkDebugging() {
let p = 2;
let q = 4;
debugger; // here program Execution will pause here
let total = p + q;
console.log(total);
}
checkDebugging();
checkDebugging() – ऊपर दिए गए प्रोग्राम में जब कोड डीबगर; प्रोग्राम स्टेटमेंट तक पहुँचता है, तो यह checkDebugging() पर स्टॉप हो जाएगा, और आप मौजूदा प्रोग्राम वेरिएबल का टेस्टिंग कर सकते हैं, या प्रोग्राम कोड को लाइन बाय लाइन प्रीव्यू कर सकते हैं।
Testing code in the context of a JavaScript webpage.
यदि आप जावास्क्रिप्ट में किसी रियलटाइम वेबपेज के रेफ़्रेन्स में जावास्क्रिप्ट का डायनामिक टेस्टिंग कर रहे हैं, तो आप वेबपेज के एक्टिव एलिमेंट को एक्सेस कर सकते हैं, और उन्हें जरूरत के अनुसार मॉडिफाई भी कर सकते हैं।
Testing code in the context of a JavaScript webpage.
document.getElementById(“myElement”).innerText = “Welcome to the console window !”;
Testing code in the context of a JavaScript webpage.
document.body.style.backgroundColor = “yellow”;
Get information about the JavaScript webpage.
console.log(document.title); // यहाँ मौजूदा वर्तमान वेबपेज का शीर्षक लॉग करता है
Testing external libraries in a JavaScript program.
यदि आप जावास्क्रिप्ट प्रोग्राम में एक्सटर्नल लाइब्रेरी है, जैसे, jQuery, React लाइब्रेरी फ्रेमवर्क के साथ काम कर रहे हैं, तो आप उन्हें सीधे वेब ब्राउज़र कंसोल में भी टेस्ट कर सकते हैं।
जैसे, यदि आपने वेबपेज में jQuery लोड किया है, तो आप इसे जरूरत पड़ने पर डायरेक्ट कंसोल में उपयोग कर सकते हैं.
$(‘p’).css(‘color’, ‘lime’); // यह मौजूदा वेबपेज में सभी <p> पैराग्राफ एलिमेंट के टेक्स्ट कलर को लाइम कलर में चेंज कर देता है।
Clearing the JavaScript console.
जावास्क्रिप्ट प्रीवियस रन प्रोग्राम के आउटपुट या जब कंसोल विंडो अव्यवस्थित हो जाता है, तो आप इसे क्लियर कर सकते हैं.
console.clear();
यह जावास्क्रिप्ट प्रोग्राम में कंसोल से पहले से लॉग किए गए सभी मैसेज को रिमूव कर देगा।
JavaScript console screen Additional tips.
- Multi-line code – यदि आप जावास्क्रिप्ट कंसोल प्रोग्राम में मल्टी-लाइन कोड एंटर करना चाहते हैं, तो केवल Enter की दबाने के बजाय Shift + Enter की को दबाएँ। यह आपको मौजूदा प्रोग्राम एक्सेक्यूशन करने से पहले प्रोग्राम कोड की कई रौस को एंटर करने की परमिशन प्रोवाइड करता है।
- Code completion – आप जावास्क्रिप्ट प्रोग्राम कोड पूर्णता के लिए Tab की का उपयोग कर सकते हैं। यदि आप किसी प्रोग्राम वेरिएबल या फ़ंक्शन नाम का भाग टाइप करते हैं, और फिर Tab की को दबाते हैं, तो यह आपके लिए इसे पूरा करने का प्रयास करेगा।
JavaScript console completion.
वेब ब्राउज़र कंसोल जावास्क्रिप्ट के प्रोग्राम सोर्स कोड टेस्टिंग और डीबगिंग के लिए एक बहुत पॉवरफुल टूल है। यहाँ आप छोटे प्रोग्राम सोर्स कोड स्निपेट को एक्सेक्युट कर सकते हैं, रियलटाइम में वेबपेज के साथ कम्यूनिकेट कर सकते हैं, अपने मौजूदा प्रोग्राम सौर्से कोड को डीबग कर सकते हैं, और यहां तक कि कंसोल के भीतर से वेबपेज की कंटेंट को मॉडिफाई भी कर सकते हैं।
