कोड में त्रुटि की संभावना है। आप संभवतः त्रुटियां करेंगे। ओह, मैं किस बारे में बात कर रहा हूं? आप बिल्कुल त्रुटियां करेंगे, कम से कम यदि आप एक इंसान हैं और रोबोट नहीं।
लेकिन ब्राउज़र में, उपयोगकर्ता सामान्य रूप से त्रुटियों को नहीं देखते हैं। इसलिए, अगर स्क्रिप्ट में कुछ गलत होता है, तो हम यह नहीं देखेंगे कि क्या टूटा है और इसलिए हम उसे ठीक नहीं कर सकते।
त्रुटियों को देखने और स्क्रिप्ट के बारे में अन्य उपयोगी जानकारी प्राप्त करने के लिए, "डेवलपर टूल" को ब्राउज़र में एम्बेड किया गया है।
अधिकांश डेवलपर विकास के लिए क्रोम या फ़ायरफ़ॉक्स की ओर झुकते हैं क्योंकि उन ब्राउज़र में सबसे अच्छा डेवलपर टूल होता है। अन्य ब्राउज़र भी डेवलपर उपकरण प्रदान करते हैं, कभी-कभी विशेष सुविधाओं के साथ, लेकिन आमतौर पर क्रोम या फ़ायरफ़ॉक्स के करीब नहीं होते हैं। इसलिए अधिकांश डेवलपर्स के पास "पसंदीदा" ब्राउज़र होता है और यदि कोई समस्या ब्राउज़र-विशिष्ट है तो ही दूसरों का उपयोग करता है।
डेवलपर उपकरण शक्तिशाली हैं; उनकी कई विशेषताएं हैं। शुरू करने के लिए, हम सीखेंगे कि उन्हें कैसे खोलें, त्रुटियों को देखें और जावास्क्रिप्ट कमांड चलाएं।
इस पृष्ठ (page) को खोलें bug.html.
इस पर जावास्क्रिप्ट कोड में एक त्रुटि है। यह एक नियमित उपयोगकर्ता की आंखों से छिपा हुआ है, इसलिए इसे देखने के लिए डेवलपर टूल खोलें।
key:F12 दबाएँ या, यदि आप Mac पर हैं, तो key:Cmd+Opt+J दबाएँ.
डेवलपर टूल डिफ़ॉल्ट रूप से कंसोल टैब पर खुलेगा।
यह कुछ इस तरह दिखता है:
डेवलपर टूल का सटीक रूप आपके Chrome के संस्करण पर निर्भर करता है। यह समय-समय पर बदलता रहता है लेकिन यह इस तरह ही होना चाहिए।
- यहां हम लाल रंग का एरर मैसेज (error message) देख सकते हैं। इस मामले में, स्क्रिप्ट में एक अज्ञात "lalala" कमांड है।
- दाईं ओर, लाइन नंबर के साथ स्रोत
Bug.html: 12पर क्लिक करने योग्य लिंक है जहां त्रुटि हुई है।
त्रुटि संदेश के नीचे, एक नीला > प्रतीक है। यह एक "कमांड लाइन" (command line, console) है जहाँ हम जावास्क्रिप्ट कमांड टाइप कर सकते हैं। उन्हें चलाने के लिए key:Enter दबाएँ।
अब हम त्रुटियां देख सकते हैं, और यह शुरुआत के लिए पर्याप्त है। हम बाद में डेवलपर टूल पर वापस आएंगे और अध्याय info:debugging-chrome में अधिक गहराई से डिबगिंग को कवर करेंगे।
आमतौर पर, जब हम कंसोल में कोड की एक पंक्ति डालते हैं, और फिर `key:Enter` दबाते हैं, यह निष्पादित होता है।
कई पंक्तियों को सम्मिलित करने के लिए, `key:Shift + Enter` दबाएँ। इस तरह से कोई भी लंबे जावास्क्रिप्ट कोड को लिख और निष्पादित कर सकता है।
अधिकांश अन्य ब्राउज़र डेवलपर टूल खोलने के लिए key:F12 का उपयोग करते हैं।
इनका लुक और फील काफी समान है। एक बार जब आप जानते हैं कि इनमें से किसी एक टूल का उपयोग कैसे करें (आप Chrome से शुरू कर सकते हैं), तो आप आसानी से दूसरे का उपयोग कर सकते हैं।
सफारी (मैक ब्राउज़र, विंडोज/लिनक्स द्वारा समर्थित नहीं है) थोड़ा विशेष है। हमें पहले "Develop menu" को सक्रिय करने की आवश्यकता है।
Open Settings and go to the "Advanced" pane. There's a checkbox at the bottom:
52c1e61915bc8970a950a3f59bd845827e49b4bf
अब key:Cmd + Opt + C कंसोल को टॉगल कर सकता है। इसके अलावा, ध्यान दें कि "Develop" नाम का नया शीर्ष मेनू आइटम दिखाई दिया है। इसमें कई अन्य कमांड और विकल्प हैं।
- डेवलपर टूल हमें त्रुटियों को देखने, कमांड चलाने, variables की जांच करने और बहुत कुछ करने की अनुमति देते हैं।
- वे विंडोज पर अधिकांश ब्राउज़रों के लिए
key:F12के साथ खोले जा सकते हैं। Mac पर Chrome कोkey:Cmd + Opt + J, Safari:key:Cmd + Opt + C(पहले सक्रिय करने की आवश्यकता है) की आवश्यकता है।
अब हमारे पास वातावरण तैयार है। अगले भाग में, हम जावास्क्रिप्ट लिखेंगे।