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

Kayce Basques

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

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

प्रॉडक्ट की जानकारी वाला वीडियो वर्शन नीचे पढ़ें या उसका वीडियो वर्शन देखें.

सहायक कंसोल

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

तुरंत आकलन

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

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

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

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

DevTools इस बात की जांच करने के लिए उत्सुक नहीं रहता कि एक्सप्रेशन की वजह से साइड इफ़ेक्ट क्या है.

आर्ग्युमेंट के संकेत

फ़ंक्शन को टाइप करते समय, आपको ऐसे आर्ग्युमेंट दिखाए जाएंगे जिनकी उम्मीद फ़ंक्शन को चाहिए.

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

ध्यान दें:

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

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

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

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

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

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

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

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

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

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

लाइटहाउस 3.0 में एक नया इंटरनल ऑडिटिंग इंजन जोड़ा गया है. इसका कोड-लालटेन है, जो आपके ऑडिट पूरे करता है ज़्यादा तेज़ होता है और दौड़ने के बीच कम अंतर होता है.

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

लाइटहाउस 3.0 में एक नया यूज़र इंटरफ़ेस (यूआई) भी है. ऐसा लाइटहाउस और Chrome UX को ध्यान में रखकर बनाया गया है (रिसर्च ऐंड डिज़ाइन) टीमें.

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

नए ऑडिट

लाइटहाउस 3.0 में चार नए ऑडिट भी मौजूद हैं:

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

BigInt पर सहायता

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

छठी इमेज. कंसोल में BigInt का एक उदाहरण

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

ब्रेकपॉइंट पर रोके जाने पर, स्कोप पैनल में किसी प्रॉपर्टी पर राइट क्लिक करें और प्रॉपर्टी जोड़ें देखने का पाथ पर क्लिक करें.

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

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

कंसोल की सेटिंग में, पहले टाइमस्टैंप दिखाएं चेकबॉक्स को सेटिंग में भेज दिया गया है.

झलक दिखाने वाले चैनलों को डाउनलोड करें

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

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

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

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

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

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