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