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

Kayce Basques

Chrome 68 में DevTools की नई सुविधाएं:

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

इसके बारे में यहां पढ़ें या नीचे दिए गए वीडियो में रिलीज़ नोट देखें.

Assistive Console

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

तुरंत जांच

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

पहली इमेज. Console, sort() ऑपरेशन का नतीजा प्रिंट कर रहा है. हालांकि, इसे साफ़ तौर पर लागू नहीं किया गया है

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

1. Console खोलें.
2. Console Settings खोलें.
3. Eager evaluation चेकबॉक्स को चुनें.

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

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

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

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

ध्यान दें:

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

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

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

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

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

ES2017 के कीवर्ड, जैसे कि await, अब 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 Canary, Dev या Beta को डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन प्रीव्यू चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, आपको वेब प्लैटफ़ॉर्म के नए एपीआई को टेस्ट करने का मौका मिलता है. इसके अलावा, आपको अपनी साइट पर मौजूद समस्याओं का पता लगाने में मदद मिलती है. इससे पहले कि आपके उपयोगकर्ता उन समस्याओं का पता लगाएं!

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

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

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

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

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