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

Kayce Basques

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

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

Assistive Console

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

तुरंत जांच

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

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

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

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

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

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

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

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

Console में आर्ग्युमेंट के लिए सुझाव.

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

ध्यान दें:

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

फ़ंक्शन लागू होने के बाद ऑटोकंप्लीट

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

document.querySelector('p') को चलाने के बाद, Console अब आपको उस एलिमेंट के लिए उपलब्ध प्रॉपर्टी और फ़ंक्शन दिखा सकता है.

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

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

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

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

चौथी इमेज. 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 में रिपोर्ट का नया यूज़र इंटरफ़ेस (यूआई)

नए ऑडिट

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

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

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

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

कंसोल में BigInt का उदाहरण.

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

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

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

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

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

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

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

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

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

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

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

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

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