इस इंटरैक्टिव ट्यूटोरियल में, Chrome DevTools कंसोल में JavaScript चलाने का तरीका बताया गया है. कंसोल में मैसेज लॉग करने का तरीका जानने के लिए, मैसेज लॉग करना शुरू करना लेख पढ़ें. JavaScript कोड को रोकने और एक बार में एक लाइन करके उसे चलाने का तरीका जानने के लिए, JavaScript को डीबग करना शुरू करें लेख पढ़ें.
पहली इमेज. Console.
खास जानकारी
Console एक REPL है. इसका मतलब है कि यह Read, Evaluate, Print, और Loop करता है. यह आपके लिखे गए JavaScript को पढ़ता है, आपके कोड का आकलन करता है, आपके एक्सप्रेशन का नतीजा प्रिंट करता है, और फिर पहले चरण पर वापस चला जाता है.
DevTools सेट अप करना
इस ट्यूटोरियल को इस तरह से डिज़ाइन किया गया है कि आप डेमो खोलकर, सभी वर्कफ़्लो को खुद आज़मा सकें. जब आप निर्देशों के मुताबिक काम करते हैं, तो आपको बाद में वर्कफ़्लो याद रहने की संभावना ज़्यादा होती है.
कंसोल खोलने के लिए, Mac पर Command+Option+J या Windows, Linux, ChromeOS पर Control+Shift+J दबाएं.
दूसरी इमेज. बाईं ओर यह ट्यूटोरियल और दाईं ओर DevTools.
पेज के JavaScript या DOM को देखना और उसमें बदलाव करना
किसी पेज को बनाते या डीबग करते समय, अक्सर कंसोल में स्टेटमेंट चलाने से मदद मिलती है. इससे पेज के दिखने या चलने के तरीके में बदलाव किया जा सकता है.
नीचे दिए गए बटन में मौजूद टेक्स्ट पर ध्यान दें.
Console में
document.getElementById('hello').textContent = 'Hello, Console!'टाइप करें. इसके बाद, एक्सप्रेशन का आकलन करने के लिए Enter दबाएं. ध्यान दें कि बटन के अंदर मौजूद टेक्स्ट कैसे बदलता है.
तीसरी इमेज. ऊपर दिए गए एक्सप्रेशन का आकलन करने के बाद, Console कैसा दिखता है.
जिस कोड का आपने आकलन किया है उसके नीचे आपको
"Hello, Console!"दिखेगा. REPL के चार चरणों को याद करें: पढ़ना, आकलन करना, प्रिंट करना, लूप करना. आपके कोड का आकलन करने के बाद, REPL एक्सप्रेशन का नतीजा प्रिंट करता है. इसलिए,"Hello, Console!",document.getElementById('hello').textContent = 'Hello, Console!'का आकलन करने का नतीजा होना चाहिए.
पेज से जुड़ी न होने वाली आर्बिट्रेरी JavaScript चलाना
कभी-कभी, आपको सिर्फ़ एक कोड प्लेग्राउंड चाहिए होता है, जहां कुछ कोड की जांच की जा सके या JavaScript की उन नई सुविधाओं को आज़माया जा सके जिनके बारे में आपको जानकारी नहीं है. इस तरह के एक्सपेरिमेंट के लिए, Console सबसे सही जगह है.
- कंसोल में
5 + 15टाइप करें. नतीजा20, आपके एक्सप्रेशन के नीचे दिखेगा. हालांकि, अगर आपके एक्सप्रेशन का आकलन करने में ज़्यादा समय लगता है, तो ऐसा नहीं होगा. - एक्सप्रेशन का आकलन करने के लिए,
Enterदबाएं. Console, आपके कोड के नीचे एक्सप्रेशन का नतीजा प्रिंट करता है. नीचे चौथी इमेज में दिखाया गया है कि इस एक्सप्रेशन का आकलन करने के बाद, आपका कंसोल कैसा दिखना चाहिए. Console में यहां दिया गया कोड डालें. इसे कॉपी करके चिपकाने के बजाय, एक-एक वर्ण करके टाइप करें.
function add(a, b=20) { return a + b; }अब, उस फ़ंक्शन को कॉल करें जिसे आपने अभी तय किया है.
add(25);
चौथी इमेज. ऊपर दिए गए एक्सप्रेशन का आकलन करने के बाद, Console कैसा दिखता है.
add(25)की वैल्यू45होती है, क्योंकि जब दूसरे आर्ग्युमेंट के बिनाaddफ़ंक्शन को कॉल किया जाता है, तोbकी डिफ़ॉल्ट वैल्यू20होती है.
जब तक आपका फ़ंक्शन वापस नहीं आ जाता, तब तक इस कंसोल सेशन में कोई भी कोड नहीं चलाया जा सकेगा. अगर इसमें ज़्यादा समय लगता है, तो टास्क मैनेजर का इस्तेमाल करके, ज़्यादा समय लेने वाली प्रोसेस को रद्द किया जा सकता है. हालांकि, इससे मौजूदा पेज काम नहीं करेगा और आपने जो भी डेटा डाला है वह मिट जाएगा.
अगले चरण
कंसोल में JavaScript चलाने से जुड़ी ज़्यादा सुविधाओं के बारे में जानने के लिए, JavaScript चलाना लेख पढ़ें.
DevTools की मदद से, स्क्रिप्ट के बीच में उसे रोका जा सकता है. रोकने के दौरान, कंसोल का इस्तेमाल करके, पेज के window या DOM को देखा और बदला जा सकता है. इससे डीबग करने का वर्कफ़्लो बेहतर हो जाता है. इंटरैक्टिव ट्यूटोरियल के लिए, JavaScript को डीबग करना शुरू करें लेख पढ़ें.
Console में भी फ़ॉर्मैट स्पेसिफ़ायर का एक सेट काम करता है. Console में मैसेज को फ़ॉर्मैट और स्टाइल करने के सभी तरीके जानने के लिए, Console में मैसेज को फ़ॉर्मैट और स्टाइल करना लेख पढ़ें.
इसके अलावा, Console में कई ऐसे फ़ंक्शन भी होते हैं जिनसे पेज के साथ इंटरैक्ट करना आसान हो जाता है. उदाहरण के लिए:
- किसी एलिमेंट को चुनने के लिए,
document.querySelector()टाइप करने के बजाय,$()टाइप किया जा सकता है. यह सिंटैक्स, jQuery से मिलता-जुलता है. हालांकि, यह jQuery नहीं है. यह सिर्फ़document.querySelector()का अन्य नाम है. debug(function)उस फ़ंक्शन की पहली लाइन पर एक ब्रेकपॉइंट सेट करता है.keys(object), तय किए गए ऑब्जेक्ट की कुंजियों वाला एक कलेक्शन दिखाता है.
सभी सुविधाजनक फ़ंक्शन के बारे में जानने के लिए, Console Utilities API का रेफ़रंस देखें.