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