क्रोम संस्करण 68 में DevTools में नया क्या है

क्रोम के नवीनतम संस्करण के डेवलपर कंसोल में ऐसी शांत विशेषताएं दिखाई दीं कि मैं आधिकारिक डेवलपर्स ब्लॉग से इस विषय पर एक पोस्ट का अनुवाद करना चाहता था।

Chrome डेवलपर कंसोल ने मुझे लंबे समय तक इसके विकास की गहराई से प्रभावित किया है। एक बार मैं खुद को फायरबग से दूर ले जा रहा था, और अब वे दिन आ गए हैं जब मैं क्रोम पर विकास के बिना अपना जीवन नहीं देख सकता। यह अच्छा है जब लोग व्यवसाय में एक-दूसरे को पार करने का प्रयास करते हैं।

• प्रत्याशा निष्पादन । जैसे ही आप एक अभिव्यक्ति लिखते हैं, कंसोल उसके परिणाम प्रदर्शित करेगा।
• तर्क युक्तियां । जैसे ही आप फ़ंक्शन का नाम लिखते हैं, कंसोल आपको इसके लिए अपेक्षित तर्क दिखाएगा।
• कार्य पूर्ण होना । फ़ंक्शन कॉल को डायल करने के बाद, उदाहरण के लिए, document.querySelector('p') , कंसोल आपको फ़ंक्शंस और गुण दिखाएगा जो रिटर्न वैल्यू का समर्थन करता है।
• ES2017 से कंसोल तक कीवर्ड । स्वत: पूर्ण होने वाले इंटरफ़ेस में await जैसे कीवर्ड अब कंसोल में उपलब्ध हैं।
• ऑडिट डैशबोर्ड में लाइटहाउस 3.0 । अधिक तेज़, अधिक सुसंगत ऑडिट, नया उपयोगकर्ता इंटरफ़ेस और नए प्रकार के ऑडिट।
• BigInt समर्थन करें । कंसोल में नए पूर्णांक प्रकार का प्रयास करें।
• डैशबोर्ड में प्रॉपर्टी में पथ जोड़ें । डैशबोर्ड पर लक्ष्य फलक से गुण जोड़ें।
• विकल्प "टाइमस्टैम्प दिखाएँ" सेटिंग्स अनुभाग में चला गया है।

ध्यान दें: वर्तमान में क्रोम के कौन से संस्करण क्रोम पर चल रहे हैं chrome://version पृष्ठ। यदि आप पहले वाले संस्करण के साथ काम कर रहे हैं, तो ये फ़ंक्शन मौजूद नहीं होंगे। यदि आप बाद का संस्करण चला रहे हैं, तो ये सुविधाएँ बदल सकती हैं। क्रोम स्वचालित रूप से हर 6 सप्ताह में एक नए प्रमुख संस्करण को अपडेट करता है।

इन नोट्स का वीडियो संस्करण पढ़ें या देखें:

सहायक सांत्वना

Chrome 68 कोड कंसोल से संबंधित नई कंसोल सुविधाएँ और इसके निष्पादन के पूर्वावलोकन के साथ आता है।

प्रत्याशा निष्पादन

जब आप कंसोल में एक विशिष्ट अभिव्यक्ति लिखते हैं, तो अब से यह आपके कर्सर के तहत इस अभिव्यक्ति को निष्पादित करने का परिणाम दिखा सकता है:

चित्र 1 । कंसोल स्पष्ट रूप से निष्पादित होने से पहले sort() ऑपरेशन के परिणाम को प्रदर्शित करता है।

सक्रिय निष्पादन को सक्रिय करने के लिए:

1. कंसोल खोलें
2. इसकी सेटिंग्स खोलें (कंसोल सेटिंग्स)
3. ईगर मूल्यांकन के लिए बॉक्स की जांच करें

डेवलपर टूल उन अभिव्यक्तियों का प्रदर्शन नहीं करते हैं जो साइड इफेक्ट्स का कारण बन सकते हैं।

तर्क युक्तियां

एक बार जब आपने फ़ंक्शन लिखा है, तो कंसोल आपको वे तर्क दिखाएगा जो इसे प्राप्त करने की अपेक्षा करता है।

चित्र 2 कंसोल में तर्क संकेत के विभिन्न उदाहरण।

टिप्पणी:

• तर्क के समक्ष प्रश्न चिह्न, जैसे ?options , एक वैकल्पिक तर्क की ओर इशारा करते हैं।
• एक तर्क से पहले एक दीर्घवृत्त, जैसे ...items , एक विस्तार ऑपरेटर को इंगित करता है।
• कुछ फ़ंक्शन, जैसे कि CSS.supports() , कई तर्क हस्ताक्षर लेते हैं।

फ़ंक्शन निष्पादन के बाद ऑटो पूर्ण

नोट: यह सुविधा प्रोएक्टिव एक्ज़ीक्यूशन पर निर्भर करती है, जिसे डेवलपर टूल की सेटिंग में सक्रिय होना चाहिए।

प्रोएक्टिव एक्ज़ीक्यूशन को सक्रिय करने के बाद, कंसोल आपको यह भी दिखाना शुरू कर देगा कि फ़ंक्शन लिखने के बाद क्या गुण और फ़ंक्शन उपलब्ध हैं।

चित्र 3 पहला स्क्रीनशॉट पुराने व्यवहार को दिखाता है, और दूसरा एक नया दिखाता है जो पूरा होने का समर्थन करता है।

ES2017 से कंसोल तक कीवर्ड

स्वत: पूर्ण होने वाले इंटरफ़ेस में await जैसे कीवर्ड अब कंसोल में उपलब्ध हैं।

छवि 4 । कंसोल अब अपने ऑटो-पूर्ण इंटरफ़ेस में await है।

तेज़, अधिक विश्वसनीय ऑडिट, एक नया इंटरफ़ेस और नए प्रकार के ऑडिट

क्रोम 68 लाइटहाउस 3.0 के साथ आता है। निम्नलिखित अनुभाग कुछ सबसे बड़े परिवर्तनों की व्याख्या करते हैं। पूरी कहानी के लिए लाइटहाउस 3.0 की घोषणा करने वाला एक अलग लेख भी देखें।

तेज़ और अधिक विश्वसनीय ऑडिट

लाइटहाउस 3.0 में लालटेन नामक एक नया आंतरिक ऑडिट इंजन है, जो आपके ऑडिट को तेजी से पूरा करता है और रन के बीच कम त्रुटियों के साथ।

नया इंटरफ़ेस

लाइटहाउस 3.0 भी एक नया उपयोगकर्ता इंटरफ़ेस लाता है, जो लाइटहाउस और क्रोम यूएक्स (विकास और डिजाइन) टीमों के बीच सहयोग के लिए धन्यवाद है।

चित्र 5 लाइटहाउस 3.0 में नया रिपोर्टिंग इंटरफ़ेस।

नए प्रकार के ऑडिट

लाइटहाउस 3.0 आपको 4 नए प्रकार के ऑडिट भी प्रदान करता है:

• पहले सामग्री का प्रतिपादन
• robots.txt अमान्य है
• एनिमेटेड सामग्री के लिए वीडियो प्रारूपों का उपयोग करें
• कई और महंगे वेब संसाधन अनुरोधों से बचें

BigInt समर्थन

नोट: यह डेवलपर टूल्स की पूरी तरह से नई सुविधा नहीं है, यह जावास्क्रिप्ट भाषा की एक नई विशेषता है जिसे आप कंसोल में आज़मा सकते हैं।

Chrome 68 BigInt नामक एक नए पूर्णांक आदिम का समर्थन करता है। BigInt आपको मनमाने ढंग से सटीक संख्याओं का प्रतिनिधित्व करने की अनुमति देता है। इस सुविधा को कंसोल में आज़माएँ:

छवि 6 । कंसोल में BigInt का उपयोग BigInt का एक उदाहरण।

डैशबोर्ड में प्रॉपर्टी पाथ जोड़ें

जब हमने ब्रेकप्वाइंट पर कोड निष्पादन को रोक दिया, तो लक्ष्य पैनल में संपत्ति पर राइट-क्लिक करें और संपत्ति को मॉनिटरिंग पैनल में जोड़ने के लिए Add property path to watch चुनें।

चित्र 7 वॉचलिस्ट में पथ जोड़ने का एक उदाहरण।

विकल्प "टाइमस्टैम्प दिखाएँ" सेटिंग्स अनुभाग में चला गया है

अब शो टाइमस्टैम्प विकल्प, जो पहले कंसोल सेटिंग्स में था, डेवलपर टूल की सेटिंग्स में चला गया है।