इस इंटरैक्टिव ट्यूटोरियल में, Chrome DevTools कंसोल में JavaScript को चलाने का तरीका बताया गया है. यहां जाएं: कंसोल में मैसेज को लॉग करने का तरीका जानने के लिए, मैसेज लॉग करने की सुविधा का इस्तेमाल शुरू करें. शुरू करें देखें JavaScript कोड को डिबग करने के साथ JavaScript कोड को रोकने और यहां दी गई एक लाइन में एक लाइन का इस्तेमाल करने के बारे में जानें एक समय.
पहली इमेज. कंसोल.
खास जानकारी
कंसोल एक REPL है. इसका मतलब है Read, evaluation, Print, और Loop. यह पढ़ता है JavaScript जिसे आप इसमें टाइप करते हैं, आपके कोड का मूल्यांकन करता है, expression और फिर पहले चरण पर वापस चला जाता है.
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 एक्सप्रेशन के नतीजे को प्रिंट करता है. इसलिए,"Hello, Console!"को आकलन करने का नतीजा होना चाहिएdocument.getElementById('hello').textContent = 'Hello, Console!'.
ऐसी आर्बिट्रेरी JavaScript चलाना जो पेज से जुड़ी हुई नहीं है
कभी-कभी, आपको सिर्फ़ एक कोड प्लेग्राउंड की ज़रूरत होती है, जहां कुछ कोड की जांच की जा सकती है या नई JavaScript आज़माई जा सकती है सुविधाएं इस्तेमाल करती हैं, जिनसे आप वाकिफ़ नहीं हैं. Console, इस तरह के एक्सपेरिमेंट के लिए बिलकुल सही जगह है.
- कंसोल में
5 + 15टाइप करें. आपके एक्सप्रेशन के नीचे, नतीजा20दिखेगा (बशर्ते आपके एक्सप्रेशन को आकलन करने में बहुत ज़्यादा समय न लगे). - एक्सप्रेशन का आकलन करने के लिए,
Enterदबाएं. Console प्रिंट करता है अपने कोड के नीचे दिए गए एक्सप्रेशन के नतीजे की वजह से मिला है. नीचे दी गई चौथी इमेज में बताया गया है कि आपके कंसोल को इस एक्सप्रेशन का आकलन करके देखें. कंसोल में यह कोड टाइप करें. इसे लिखने के बजाय, वर्ण-दर-वर्ण टाइप करने की कोशिश करें चिपकाने के लिए धन्यवाद.
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 एपीआई का संदर्भ लेख पढ़ें.