डीबग जावास्क्रिप्ट क्रोम

| | | | | | | | | | | | | | | | | | | | | | |

पेशेवरों के लिए भी, कोडिंग आसान नहीं है। शायद यही कारण है कि डेवलपर्स अपने कोड में बग की तलाश में बहुत समय बिताते हैं। कभी-कभी एक बग स्पष्ट होता है, जिससे पूरा प्रोग्राम एक ही बार में क्रैश हो जाता है। दूसरी बार बग बहुत सूक्ष्म होता है, अच्छे दिखने वाले आउटपुट का उत्पादन करता है जिसमें हमेशा खामियां होती हैं।

जितना उल्टा लग सकता है, स्पष्ट बग बेहतर होते हैं क्योंकि उन्हें ढूंढना आसान होता है। एक डरपोक बग सालों तक रोज़मर्रा के सॉफ़्टवेयर में छिपा रह सकता है।

इसे इस तरह से सोचें: यदि आप एक ऐसी इमारत में होते जो धीरे-धीरे जहरीली गैस से भर रही होती, तो आप चाहते कि गैस गंधहीन हो। , बेस्वाद और रंगहीन, या चमकीले बैंगनी और पाउडर की तरह महक। cannon?

डिबगिंग विकास प्रक्रिया में एक महत्वपूर्ण कदम है , ऐसा करने के लिए कई टूल उपलब्ध हैं। आज हम क्रोम में जावास्क्रिप्ट डीबग करने के बारे में बात करने जा रहे हैं। जावास्क्रिप्ट अब तक की सबसे लोकप्रिय भाषाओं में से एक है - समग्र रूप से और यकीनन वेब विकास के लिए सबसे लोकप्रिय भाषा है। इसी तरह, क्रोम सबसे अधिक उपयोग किए जाने वाले वेब ब्राउज़रों में से एक है।

एक ऐसे व्यक्ति के रूप में जो जल्द ही इन-डिमांड वेब डेवलपर , Chrome के साथ JavaScript डीबगिंग से स्वयं को परिचित करना एक अच्छा विचार है। मैं आपको इस शानदार उदाहरण वेबपेज का अनुसरण करने के लिए प्रोत्साहित करता हूं डिबगिंग का अभ्यास करने के लिए विशेष रूप से बनाया गया है। ऊंचाई = "667" alt = "फ़ोटो 1453576109701 Aef2d431a8a4" डेटा-srcset = "https://744025.smushcdn.com/1245953/wp-content/uploads/2019/09/photo-1453576109701aef2d431a8a4. Jpg? & बैंड = 1 और वेबप = 1 1000w https: // 744025. smushcdn.com/1245953/wp-content/uploads/2019/09/photo-1453576109701-aef2d431a8a4.jpg?size=468x312&lossy=1&strip=1&webp=1 468w, https: //744025.smushcdn / COMP / 1245-सामग्री wushcdn. / अपलोड / 2019/09 / photo-1453576109701-aef2d431a8a4.jpg? आकार = 702x468 और हानिपूर्ण = 1 और पट्टी = 1 और वेबपी = 1 702w, ht tps: //744025.smushcdn.com/1245953/wp-cont ent / uploads / 2019/09 / photo-1453576109701- aef2d431a8a4.jpg? आकार = 936x624 और हानिपूर्ण = 1 और पट्टी = 1 और वेबपी = 1 936w "डेटा-src =" https://744025.smushcdn.com/12 45953 / wp-content / अपलोड / 2019/09 / photo-1453576109701-aef2d431a8a4 जेपीजी? हानिपूर्ण = 1 और स्ट्रिप पी = 1 और वेबपी = 1 "डेटा-आकार =" (अधिकतम चौड़ाई: 1000 पीएक्स) 100 वीडब्ल्यू, 1000 पीएक्स "वर्ग =" wp-छवि -6149 आलसी लोड "src =" डेटा: छवि / gif; base64, R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAAAAAAICTAO = " तस्वीरें 1453576109701 Aef2d431a8a4

कई ट्रेडों में नियंत्रण कक्ष के बराबर होता है और इसे वेब डेवलपर के समकक्ष का उपयोग करना सीखना चाहिए।

Chrome शक्तिशाली टूल के एक सेट के साथ आता है जो डेवलपर्स को HTML सहित किसी वेबसाइट के स्रोत कोड का निरीक्षण करने की अनुमति देता है, CSS, और Javascript.

यह उन वेबसाइटों के कोड को पढ़ने और उन्हें डिबग करने का तरीका सीखने का एक शानदार तरीका है।

टूर

2019 और क्रोम के नवीनतम संस्करण के अनुसार, डेवलपर टूल तक पहुंचना उतना ही आसान है जितना कि स्क्रीन के शीर्ष ब्राउज़र मेनू में व्यू -> डेवलपर -> टूल्स डेवलपमेंट पर जाना। यह क्रोम डेवलपर पैनल को इसके कई उपयोगी टैब के साथ खोलता है।

"तत्व" टैब आपको वेब पेज बनाने वाले HTML और जावास्क्रिप्ट को ब्राउज़ करने की अनुमति देता है। "कंसोल" टैब आपको जावास्क्रिप्ट के साथ छेड़छाड़ करने के लिए जगह देता है। पिछले अनुभाग में लिंक उदाहरण पृष्ठ के लिए कंसोल खोलें और कंसोल.लॉग (`हैलो`) टाइप करें। यह JavaScript कमांड आपके ब्राउज़र में चलना चाहिए।

`स्रोत` टैब आपको पृष्ठ की स्रोत फ़ाइलों की वास्तविक सामग्री दिखाता है और आपको ब्रेकप्वाइंट सेट करने और कॉल स्टैक का निरीक्षण करने का एक तरीका देता है।

विघटन बिंदु और डिबगर ;

मुद्रण निर्देशों के साथ-साथ, ब्रेकप्वाइंट डिबगिंग के लिए डेवलपर्स द्वारा उपयोग की जाने वाली बुनियादी तकनीकों में से एक हैं।

Chrome कंसोल में ब्रेकपॉइंट शटडाउन को परिभाषित करना सरल है - बस संख्या पर क्लिक करें © ro मैं उस पंक्ति से था जिसमें आपकी रुचि है एक ब्रेकपॉइंट एक ऐसा स्थान है जहां कोड अपने निष्पादन में स्वचालित रूप से रुक जाता है। यह आपको अब तक हुई हर चीज का निरीक्षण करने की अनुमति देता है, जिसमें प्रत्येक चर के वर्तमान मूल्य और होने वाले किसी भी परिवर्तन जैसी चीजें शामिल हैं।

ब्रेकप्वाइंट आपकी प्रगति की जांच करने का एक शानदार तरीका है। कोड यह देखने के लिए कि क्या कुछ गलत हुआ है।

हम डिबगर लगाकर मैन्युअल रूप से समान प्रभाव प्राप्त कर सकते हैं; हमारे कोड में जहां हम डिबगिंग प्रक्रिया शुरू करना चाहते हैं।

हालांकि डिबगिंग की कला में महारत हासिल करने के लिए आपको केवल इतना ही नहीं चाहिए, लेकिन यह एक अच्छा प्लस है। सबसे सही कोड सुधार यह है कि आप अपने कोड के साथ आप क्या चाहते हैं के बारे में बहुत धैर्यपूर्वक और बहुत स्पष्ट रूप से सोचें और जो आपने वास्तव में कहा से उसकी तुलना करें। . ;

उपरोक्त जानकारी के साथ, आप Chrome के साथ JavaScript डीबगिंग चलाने की राह पर हैं।