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

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

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

सहायक कंसोल

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

तुरंत आकलन

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

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

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

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

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

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

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

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

कंसोल में आर्ग्युमेंट के लिए, संकेत.

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

ध्यान दें:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

नए ऑडिट

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

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

BigInt पर सहायता

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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