DevTools (Chrome 68) में नया क्या है

Kayce Basques

Chrome 68 में DevTools में नया:

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

यहां पढ़ें या रिलीज़ नोट का वीडियो देखें.

Assistive Console

Chrome 68 में, Console की कुछ नई सुविधाएं जोड़ी गई हैं. ये सुविधाएं, अपने-आप पूरा होने वाले टेक्स्ट और झलक देखने से जुड़ी हैं.

तुरंत जांच

जब Console में कोई एक्सप्रेशन टाइप किया जाता है, तो Console अब आपके कर्सर के नीचे उस एक्सप्रेशन के नतीजे की झलक दिखा सकता है.

पहली इमेज. Console, sort() ऑपरेशन के पूरी तरह से लागू होने से पहले ही उसका नतीजा दिखा रहा है

तुरंत जांच की सुविधा चालू करने के लिए:

1. Console खोलें.
2. कंसोल की सेटिंग खोलें.
3. तुरंत जांच चेकबॉक्स को चालू करें.

अगर एक्सप्रेशन से साइड इफ़ेक्ट होते हैं, तो DevTools तुरंत उसका आकलन नहीं करता.

आर्ग्युमेंट के सुझाव

फ़ंक्शन टाइप करते समय, Console अब आपको वे आर्ग्युमेंट दिखाता है जो फ़ंक्शन के लिए ज़रूरी हैं.

दूसरी इमेज. Console में आर्ग्युमेंट के सुझावों के अलग-अलग उदाहरण

ध्यान दें:

• ?options जैसे किसी आर्ग्युमेंट के पहले सवाल का निशान, ज़रूरी नहीं आर्ग्युमेंट को दिखाता है.
• किसी आर्ग्युमेंट के पहले मौजूद बिंदुओं के बीच के खाली स्थान, जैसे कि ...items, स्पैड को दिखाते हैं.
• CSS.supports() जैसे कुछ फ़ंक्शन, कई आर्ग्युमेंट सिग्नेचर स्वीकार करते हैं.

फ़ंक्शन लागू होने के बाद, ऑटोकंप्लीट की सुविधा

'पहले से आकलन करें' सुविधा चालू करने के बाद, Console अब आपको यह भी दिखाता है कि कोई फ़ंक्शन टाइप करने के बाद, कौनसी प्रॉपर्टी और फ़ंक्शन उपलब्ध हैं.

तीसरी इमेज. ऊपर दिया गया स्क्रीनशॉट, फ़ंक्शन के पुराने व्यवहार को दिखाता है. वहीं, नीचे दिया गया स्क्रीनशॉट, फ़ंक्शन के नए व्यवहार को दिखाता है. इसमें फ़ंक्शन अपने-आप पूरा होने की सुविधा काम करती है

ऑटोकंप्लीट में ES2017 कीवर्ड

await जैसे ES2017 कीवर्ड, अब Console के ऑटोमैटिक भरने की सुविधा वाले यूज़र इंटरफ़ेस (यूआई) में उपलब्ध हैं.

चौथी इमेज. Console अब ऑटोकंप्लीट यूज़र इंटरफ़ेस (यूआई) में await का सुझाव देता है

तेज़ और ज़्यादा भरोसेमंद ऑडिट, नया यूज़र इंटरफ़ेस, और नए ऑडिट

Chrome 68 में Lighthouse 3.0 शामिल है. अगले सेक्शन में, कुछ बड़े बदलावों के बारे में बताया गया है. पूरी जानकारी के लिए, Lighthouse 3.0 का एलान देखें.

तेज़ और ज़्यादा भरोसेमंद ऑडिट

Lighthouse 3.0 में एक नया इंटरनल ऑडिटिंग इंजन है, जिसका कोडनेम Lantern है. यह आपके ऑडिट को तेज़ी से पूरा करता है. साथ ही, एक ऑडिट से दूसरे ऑडिट में कम अंतर होता है.

नया यूज़र इंटरफ़ेस (यूआई)

Lighthouse 3.0 में नया यूज़र इंटरफ़ेस (यूआई) भी है. इसकी वजह यह है कि Lighthouse और Chrome UX (रिसर्च और डिज़ाइन) टीमों ने मिलकर काम किया है.

पांचवीं इमेज. Lighthouse 3.0 में रिपोर्ट का नया यूज़र इंटरफ़ेस (यूआई)

नए ऑडिट

Lighthouse 3.0 में चार नए ऑडिट भी शामिल हैं:

• साइट का पहला एलिमेंट लोड होने में लगने वाला समय
• robots.txt फ़ाइल मान्य नहीं है
• ऐनिमेशन वाले कॉन्टेंट के लिए वीडियो फ़ॉर्मैट का इस्तेमाल करना
• किसी भी ऑरिजिन के लिए, एक से ज़्यादा बार यात्रा करने से बचें. इससे आपको ज़्यादा पैसे चुकाने पड़ सकते हैं

BigInt के साथ काम करना

Chrome 68 में, BigInt नाम का एक नया अंकों वाला प्राइमिटिव काम करता है. BigInt की मदद से, पूर्णांकों को अपनी पसंद के हिसाब से सटीक तौर पर दिखाया जा सकता है. Console में जाकर इसे आज़माएं:

छठी इमेज. Console में BigInt का उदाहरण

देखने के लिए प्रॉपर्टी पाथ जोड़ना

ब्रेकपॉइंट पर रोके जाने के दौरान, स्कोप पैनल में किसी प्रॉपर्टी पर राइट क्लिक करें. इसके बाद, उस प्रॉपर्टी को वॉच पैनल में जोड़ने के लिए, देखने के लिए प्रॉपर्टी पाथ जोड़ें को चुनें.

सातवीं इमेज. देखने के लिए प्रॉपर्टी पाथ जोड़ें का उदाहरण

"टाइमस्टैंप दिखाएं" सेटिंग में ले जाया गया

Console की सेटिंग में पहले मौजूद टाइमस्टैंप दिखाएं चेकबॉक्स, अब सेटिंग में दिखेगा.

झलक वाले चैनल डाउनलोड करना

अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome कैनरी, डेवलपर या बीटा का इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. साथ ही, इससे आपको अपनी साइट पर उपयोगकर्ताओं से पहले समस्याओं का पता लगाने में मदद मिलती है!

Chrome DevTools की टीम से संपर्क करना

DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.

• crbug.com पर जाकर, हमें सुझाव/राय दें या शिकायत करें. साथ ही, किसी सुविधा का अनुरोध करें.
• DevTools में more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools के बारे में YouTube वीडियो में क्या नया है या DevTools के बारे में YouTube वीडियो में सलाह पर टिप्पणियां करें.

DevTools में नया क्या है

DevTools में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.