क्रोम DevTools का उपयोग करके अतुल्यकालिक जावास्क्रिप्ट को डीबग करना

प्रविष्टि

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

सौभाग्य से, अब क्रोम कैनरी DevTools में आप जावास्क्रिप्ट में अतुल्यकालिक फ़ंक्शन कॉल के पूरे स्टैक को ट्रैक कर सकते हैं!


एसिंक्रोनस कॉल स्टैक की एक छोटी प्रस्तुति।

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

इस तथ्य के अलावा कि आप कॉल स्टैक देख सकते हैं, आप फ़ंक्शन के निष्पादन के दौरान किसी भी समय किसी भी चर के मूल्यों का विश्लेषण कर सकते हैं। यह भावों को देखने की टाइम मशीन की तरह है।

आइए इस कार्यक्षमता के लिए समर्थन चालू करें और कई परिदृश्यों पर जाएं।

क्रोम कैनरी में अतुल्यकालिक कोड डिबगिंग समर्थन को सक्षम करना

क्रोम कैनरी (निर्माण 35 और उच्चतर) में इसके समर्थन को सक्षम करके नई कार्यक्षमता का प्रयास करें। Chrome कैनरी DevTools में स्रोत पृष्ठ खोलें।

Async चेकबॉक्स दाईं ओर कॉल स्टैक पैनल के बगल वाले पैनल पर स्थित है। इस चेकबॉक्स की स्थिति के आधार पर, अतुल्यकालिक कार्यों को डीबग करने की क्षमता चालू या बंद हो जाएगी (हालांकि एक बार जब आप इसे चालू करते हैं, तो सबसे अधिक संभावना है कि आप इसे बंद नहीं करना चाहेंगे)।

लंबित घटनाओं और XHR प्रतिक्रियाओं का अवरोधन

जीमेल में आपने इससे पहले देखा होगा:



यदि रिक्वेस्ट भेजने में कोई त्रुटि होती है (सर्वर साइड में समस्या होगी या क्लाइंट साइड से कनेक्शन की समस्या होगी), जीमेल मैसेज को थोड़ी-थोड़ी देर में फॉरवर्ड करने की कोशिश करेगा।

यह दिखाने के लिए कि कैसे अतुल्यकालिक कॉल का ढेर हमें लंबित घटनाओं और XHR प्रतिक्रियाओं का विश्लेषण करने में मदद कर सकता है, मैंने ऊपर वर्णित स्थिति को जीमेल स्टब के उदाहरण के साथ फिर से बनाया। सभी जावास्क्रिप्ट उदाहरण कोड ऊपर दिए गए लिंक पर पाए जा सकते हैं। उनके कार्य का एल्गोरिथ्म इस प्रकार है:


ऊपर दिए गए आरेख में, देवताओ की नई विशेषताओं को लागू करने के लिए नीले रंग में हाइलाइट किए गए तरीके मुख्य स्थान हैं, क्योंकि इन विधियों को अतुल्यकालिक रूप से निष्पादित किया जाता है।

केवल DevTools के पिछले संस्करणों में कॉल स्टैक पैनल को देखते हुए, पोस्टऑनफेल () फ़ंक्शन में ब्रेकपॉइंट आपको केवल थोड़ी सी जानकारी देगा जहां पोस्टऑनफेल () फ़ंक्शन कहा जाता था। अब, जब हम अतुल्यकालिक कॉल को डीबग करने के लिए सक्षम विकल्प के साथ काम करते हैं, तो इस मामले के अंतर पर एक नज़र डालते हैं:

को	के बाद
एसिंक्रोनस अनुरोध समर्थन के बिना स्टैक पैनल को कॉल करें यहां आप देख सकते हैं कि पोस्टऑनफेल () फ़ंक्शन पर कॉल लौटे AJAX फ़ंक्शन से आया था, लेकिन अधिक कुछ नहीं।	अतुल्यकालिक अनुरोध समर्थन के साथ स्टैक पैनल को बुलाओ यहां आप देख सकते हैं कि एक्सएचआर को सबमिटहैंडलर () से बुलाया गया था, जिसे स्क्रिप्ट्स.जेएस में घोषित क्लिक इवेंट हैंडलर द्वारा बुलाया गया था। कूल!

अतुल्यकालिक कॉल स्टैक का उपयोग करके, हम आसानी से सभी कॉल चेन देख सकते हैं। उदाहरण के लिए, हम यह निर्धारित कर सकते हैं कि सबमिटहैंडलर () विधि के लिए एक कॉल ऊपर वर्णित के रूप में शुरू किया गया था, या फिर रिट्रीसुमिट () के रूप में नीचे वर्णित है:



कॉल स्टैक पैनल का उपयोग करके, आप यह भी बता सकते हैं कि क्या यूआई इवेंट (उदाहरण के लिए, एक क्लिक), एक सेटटाइमआउट () देरी, या एक अतुल्यकालिक रिटर्न फ़ंक्शन ने काम किया, जिससे एक ब्रेकपॉइंट हुआ।

एसिंक्रोनस रूप से भाव देखें

जब आप अपने कॉल स्टैक को देखते हैं, तो ट्रैकिंग में जोड़े गए आपके भावों को उस स्थिति को प्रतिबिंबित करने के लिए अपडेट किया जाएगा जो वे किसी दिए गए बिंदु पर थे!

पिछले राज्यों से कोड निष्पादित करें

केवल अभिव्यक्ति का अवलोकन करने के अलावा, आप अपने कोड के साथ पिछले राज्यों से सीधे DevTools JavaScript कंसोल में भी बातचीत कर सकते हैं।

कल्पना कीजिए कि आप डॉ। हू हैं, और आपको टार्डिस में और अब से पहले के घंटों की तुलना में थोड़ी मदद की आवश्यकता है। DevTools कंसोल से, आप आसानी से विभिन्न निष्पादन बिंदुओं से मानों पर गणना, बचत और प्रदर्शन कर सकते हैं।


अपने कोड के एसिंक्रोनस कॉल स्टैक को डीबग करने के लिए जावास्क्रिप्ट कंसोल का उपयोग करें।
ऊपर एक उदाहरण यहां पाया जा सकता है।

अपने भावों में हेरफेर करने के लिए DevTools में रहकर, आप समय की बचत करते हैं कि यह आपको पिछले कोड स्टेट्स में वापस लौटाए, परिवर्तन करे और आपके ब्राउज़र पृष्ठ को ताज़ा करे।

रास्ते में: डिबगिंग वादा चेन (वादा)

यदि जीमेल के साथ अंतिम उदाहरण में आपके लिए नई DevTools सुविधा के बिना अतुल्यकालिक कॉल के ढेर को खोलना मुश्किल था, तो आप शायद कल्पना कर सकते हैं कि अधिक जटिल एसिंक्रोनस कतारों के साथ कितना कठिन होगा, उदाहरण के लिए, एक वादा श्रृंखला के साथ? आइए जावास्क्रिप्ट में जेक आर्चीबाल्ड के प्रॉमिस ट्रेनिंग के नवीनतम उदाहरण पर एक नज़र डालते हैं।


जावास्क्रिप्ट प्रचार फ़्लोचार्ट

यहां जेक से सर्वश्रेष्ठ अतुल्यकालिक उदाहरण में कॉल स्टैक के साथ काम करने का एक छोटा सा एनीमेशन है:

करने के लिए:

एसिंक्रोनस डिबगिंग समर्थन के बिना स्टैक पैनल को कॉल करें
ध्यान दें कि जब हम वादे वादे करते हैं तो कॉल स्टैक पैनल कितनी छोटी जानकारी प्रदान करता है।

के बाद:

एसिंक्रोनस डिबगिंग समर्थन के साथ स्टैक पैनल को कॉल करें
वाह, क्या वादा है! लौटे कार्यों की एक बड़ी संख्या।

नोट:

कॉल स्टैक के लिए वादा समर्थन बहुत जल्द तैयार हो जाएगा, जैसे ही वादों का कार्यान्वयन ब्लिंक संस्करण से V8 में अंतिम संस्करण तक विकसित हो गया है।

समय में वापस जाने की भावना में, यदि आप आज वादों के लिए अतुल्यकालिक कॉल स्टैक को देखना चाहते हैं, तो आप क्रोम 33 या क्रोम 34 के संस्करणों का उपयोग कर सकते हैं। क्रोम पर जाएँ : // झंडे / # सक्षम- devtools- प्रयोगों और प्रयोगात्मक DevTools समर्थन सक्षम करें। कैनरी को रिबूट करने के बाद, DevTools सेटिंग्स पर जाएं, अतुल्यकालिक कॉल स्टैक के लिए समर्थन को सक्षम करने का अवसर होगा।

वेब एनीमेशन में गहरा गोता लगाना

एचटीएमएल 5 रॉक्स अभिलेखागार में गहराई से चलते हैं। पौला लुईस का लेख "अनुरोध के साथ अधिक कॉम्पैक्ट, उत्पादक और तेज़ एनिमेशन याद रखें"?

RequestAnimationFrame डेमो खोलें और अपडेट () विधि की शुरुआत में एक ब्रेकपॉइंट जोड़ें (यह कहीं-कहीं 874 के बाद का) पोस्ट फ़ाइल है। एक अतुल्यकालिक कॉल स्टैक के साथ, हम requestAnimationFrame में गहराई से उतर सकते हैं। और, जीमेल स्टब के साथ उदाहरण के रूप में, हमारे पास स्टार्ट इवेंट में वापस जाने का अवसर है (यह स्क्रॉल इवेंट है)।

को	के बाद

ट्रैकिंग डोमेन परिवर्तन MutationObserver का उपयोग कर

MutationObserver हमें DOM में होने वाली घटनाओं का अवलोकन करने की अनुमति देता है। एक साधारण उदाहरण पर विचार करें: जब आप एक बटन पर क्लिक करते हैं, तो ब्लॉक में एक नया DOM तत्व जोड़ा जाता है।

डेमो पेज फ़ाइल में नोड एडेड () फ़ंक्शन (लाइन 31) में एक नया ब्रेकप्वाइंट जोड़ें। एसिंक्रोनस कॉल स्टैक का उपयोग करके, आप कॉल इतिहास के माध्यम से प्रारंभिक क्लिक ईवेंट के लिए addNode () विधि के माध्यम से वापस जा सकते हैं।

को	के बाद

एक अतुल्यकालिक कॉल स्टैक का उपयोग करके जावास्क्रिप्ट कोड डीबगिंग पर नोट्स

अपने कार्यों को नाम दें

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

उदाहरण के लिए, एक अनाम फ़ंक्शन लें:

window.addEventListener('load', function(){ // do something }); 

और उसे एक नाम दें। मान लें कि विंडोअल्ड ():

 window.addEventListener('load', function windowLoaded(){ // do something }); 

जब कोई डॉक्यूमेंट लोडिंग इवेंट होता है, तो यह तब प्रतिबिंबित होगा जब स्टैक डिवॉल्ट्स का उपयोग करके प्रदर्शित किया जाता है, जहां रहस्यमय नाम "(अनाम फ़ंक्शन)" के बजाय, फ़ंक्शन का पूरा नाम फ़्लंट होता है। यह कॉल इतिहास की पठनीयता को बहुत सरल करेगा, और ज्यादातर मामलों में आपको एक नज़र में समझने की अनुमति देगा कि वहां क्या हो रहा है।

को	के बाद

आगे क्या है

उपरोक्त सभी को सारांशित करते हुए, ये सभी अतुल्यकालिक रिटर्न फ़ंक्शंस पूर्ण कॉल स्टैक प्रदर्शित करेंगे:

• टाइमर : सेटटाइमआउट () या सेटइंटरवल () आरंभ होने तक वापस जाएं
• XHRs : जहाँ xhr.send () को वापस बुलाया गया था
• एनिमेशन : अनुरोध पर वापस जाएं
• ईवेंट हैंडलर : AddEventListener () का उपयोग करके हैंडलर स्थापित होने तक वापस जाएं
• चेंज ऑब्जर्वर : जहां इवेंट्स ट्रिगर हुए थे, वहां वापस जाएं

इसके अलावा, परिवर्तनों का पूरा ढेर निम्नलिखित जावास्क्रिप्ट एपीआई के लिए निकट भविष्य में उपलब्ध होगा:

• वादे : उस पल पर वापस जाएँ जहाँ वादा पूरा हुआ था।
• Object.observe : रिटर्न फ़ंक्शन संलग्न होने तक वापस चला जाता है

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

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