◐ Shell
reader mode source ↗
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
File filter
Conversations
Jump to
Diff view
Apply and reload
Show whitespace
Diff view
Apply and reload
60 changes: 30 additions & 30 deletions 1-js/01-getting-started/4-devtools/article.md
Original file line number Diff line number Diff line change
@@ -1,63 +1,63 @@
# डेवलपर कंसोल (Developer console)

कोड में त्रुटि की संभावना है। आप संभवतः त्रुटियां करेंगे। ओह, मैं किस बारे में बात कर रहा हूं? आप *बिल्कुल* त्रुटियां करेंगे, कम से कम यदि आप एक इंसान हैं और [रोबोट](https://en.wikipedia.org/wiki/Bender_(Futurama)) नहीं।

लेकिन ब्राउज़र में, उपयोगकर्ता सामान्य रूप से त्रुटियों को नहीं देखते हैं। इसलिए, अगर स्क्रिप्ट में कुछ गलत होता है, तो हम यह नहीं देखेंगे कि क्या टूटा है और इसलिए हम उसे ठीक नहीं कर सकते।

त्रुटियों को देखने और स्क्रिप्ट के बारे में अन्य उपयोगी जानकारी प्राप्त करने के लिए, "डेवलपर टूल" को ब्राउज़र में एम्बेड किया गया है।

अधिकांश डेवलपर विकास के लिए क्रोम या फ़ायरफ़ॉक्स की ओर झुकते हैं क्योंकि उन ब्राउज़र में सबसे अच्छा डेवलपर टूल होता है। अन्य ब्राउज़र भी डेवलपर उपकरण प्रदान करते हैं, कभी-कभी विशेष सुविधाओं के साथ, लेकिन आमतौर पर क्रोम या फ़ायरफ़ॉक्स के करीब नहीं होते हैं। इसलिए अधिकांश डेवलपर्स के पास "पसंदीदा" ब्राउज़र होता है और यदि कोई समस्या ब्राउज़र-विशिष्ट है तो ही दूसरों का उपयोग करता है।

डेवलपर उपकरण शक्तिशाली हैं; उनकी कई विशेषताएं हैं। शुरू करने के लिए, हम सीखेंगे कि उन्हें कैसे खोलें, त्रुटियों को देखें और जावास्क्रिप्ट कमांड चलाएं।

## गूगल क्रोम (Google Chrome)

इस पृष्ठ (page) को खोलें [bug.html](bug.html).

इस पर जावास्क्रिप्ट कोड में एक त्रुटि है। यह एक नियमित उपयोगकर्ता की आंखों से छिपा हुआ है, इसलिए इसे देखने के लिए डेवलपर टूल खोलें।

`key:F12` दबाएँ या, यदि आप Mac पर हैं, तो `key:Cmd+Opt+J` दबाएँ.

डेवलपर टूल डिफ़ॉल्ट रूप से कंसोल टैब पर खुलेगा।

यह कुछ इस तरह दिखता है:

![chrome](chrome.png)

डेवलपर टूल का सटीक रूप आपके Chrome के संस्करण पर निर्भर करता है। यह समय-समय पर बदलता रहता है लेकिन यह इस तरह ही होना चाहिए।

- यहां हम लाल रंग का एरर मैसेज (error message) देख सकते हैं। इस मामले में, स्क्रिप्ट में एक अज्ञात "lalala" कमांड है।
- दाईं ओर, लाइन नंबर के साथ स्रोत `Bug.html: 12` पर क्लिक करने योग्य लिंक है जहां त्रुटि हुई है।

त्रुटि संदेश के नीचे, एक नीला `>` प्रतीक है। यह एक "कमांड लाइन" (command line, console) है जहाँ हम जावास्क्रिप्ट कमांड टाइप कर सकते हैं। उन्हें चलाने के लिए `key:Enter` दबाएँ।

अब हम त्रुटियां देख सकते हैं, और यह शुरुआत के लिए पर्याप्त है। हम बाद में डेवलपर टूल पर वापस आएंगे और अध्याय <info:debugging-chrome> में अधिक गहराई से डिबगिंग को कवर करेंगे।

```smart header="Multi-line input"
आमतौर पर, जब हम कंसोल में कोड की एक पंक्ति डालते हैं, और फिर `key:Enter` दबाते हैं, यह निष्पादित होता है।

कई पंक्तियों को सम्मिलित करने के लिए, `key:Shift + Enter` दबाएँ। इस तरह से कोई भी लंबे जावास्क्रिप्ट कोड को लिख और निष्पादित कर सकता है।
```

## फ़ायरफ़ॉक्स, एज, और अन्य ब्राउज़र (Firefox, Edge, and others)

अधिकांश अन्य ब्राउज़र डेवलपर टूल खोलने के लिए `key:F12` का उपयोग करते हैं।

इनका लुक और फील काफी समान है। एक बार जब आप जानते हैं कि इनमें से किसी एक टूल का उपयोग कैसे करें (आप Chrome से शुरू कर सकते हैं), तो आप आसानी से दूसरे का उपयोग कर सकते हैं।

## सफारी (Safari)

सफारी (मैक ब्राउज़र, विंडोज/लिनक्स द्वारा समर्थित नहीं है) थोड़ा विशेष है। हमें पहले "Develop menu" को सक्रिय करने की आवश्यकता है।

Preferences खोलें और "Advanced" फलक पर जाएं। नीचे एक चेकबॉक्स है:

![safari](safari.png)

अब `key:Cmd + Opt + C` कंसोल को टॉगल कर सकता है। इसके अलावा, ध्यान दें कि "Develop" नाम का नया शीर्ष मेनू आइटम दिखाई दिया है। इसमें कई अन्य कमांड और विकल्प हैं।

## सारांश

- डेवलपर टूल हमें त्रुटियों को देखने, कमांड चलाने, variables की जांच करने और बहुत कुछ करने की अनुमति देते हैं।
- वे विंडोज पर अधिकांश ब्राउज़रों के लिए `key:F12` के साथ खोले जा सकते हैं। Mac पर Chrome को `key:Cmd + Opt + J`, Safari:` key:Cmd + Opt + C` (पहले सक्रिय करने की आवश्यकता है) की आवश्यकता है।

अब हमारे पास वातावरण तैयार है। अगले भाग में, हम जावास्क्रिप्ट लिखेंगे।
Loading
Toggle all file notes Toggle all file annotations