कंसोलटेबल के साथ उन्नत जावास्क्रिप्ट डिबगिंग ()

कल मैंने क्रोम डेवलपर टूल्स में एक निफ्टी डिबगिंग फ़ीचर के बारे में जाना। वेब डेवलपर कॉन्फ्रेंस कॉम्पैक्ट में , मार्कस रॉस ( @zahlenhelfer ) ने क्रोम में कार्यान्वित विभिन्न डिबगिंग टूल के बारे में बात की, जिनमें से एक के बारे में मैं बात करना चाहता हूं।

कंसोल लॉगिंग का उपयोग करके ऐरे लॉगिंग करें

कल्पना करें कि आपके पास उनकी संगत फ़ाइल एक्सटेंशन के साथ प्रोग्रामिंग भाषाओं की एक सरणी है:

var languages = [ { name: "JavaScript", fileExtension: ".js" }, { name: "TypeScript", fileExtension: ".ts" }, { name: "CoffeeScript", fileExtension: ".coffee" } ]; console.log(languages); 

कंसोल के बाद। आप निम्नलिखित देखेंगे:



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

कंसोल लॉगिंग का उपयोग कर कंसोल। टेबल

कंसोल.लॉग के बजाय, कंसोल। का उपयोग करें:

 console.table(languages); 

सुनिश्चित करें कि पृष्ठ को ताज़ा करने से पहले कंसोल खुला है, अन्यथा आपको कुछ भी दिखाई नहीं देगा। यदि सब कुछ सही ढंग से किया जाता है, तो आप निम्नलिखित देखेंगे:



बहुत साफ है, है ना?

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

Comfort.table का उपयोग करके ऑब्जेक्ट लॉग करना

यह अच्छा है कि कंसोल.टेबल वस्तुओं के साथ समान काम करता है:

 var languages = { csharp: { name: "C#", paradigm: "object-oriented" }, fsharp: { name: "F#", paradigm: "functional" } }; console.table(languages); 

जोड़ने के लिए कुछ नहीं ...

प्रदर्शित गुणों को फ़िल्टर करें।

यदि आप केवल कुछ गुण प्रदर्शित करना चाहते हैं, तो आप उन्हें कंसोल के दूसरे पैरामीटर में सूचीबद्ध कर सकते हैं।

 //   console.table(languages, ["name", "paradigm"]); 

एक एकल संपत्ति के लिए, बस लाइन का उपयोग करें:

 //   console.table(languages, "name"); 

संक्षेप में देना

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

एक अनुवादक से: मुझे आशा है कि न केवल मुझे इस अवसर के बारे में पता नहीं था। किसी भी मामले में, हब के माध्यम से अफवाह करते हुए, मुझे इस विषय पर एक भयानक लेख मिला - फायरबग * कंसोल एपीआई - वहां कंसोल बस हड्डियों से टूट गया है ...