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

Sofia Emelianova
Sofia Emelianova

Gemini की मदद से, Play Console में अहम जानकारी देखने की सुविधा, यूरोप के ज़्यादातर देशों में लाइव होने वाली है

इस वर्शन में, यूरोप के ज़्यादातर देशों के लिए Gemini की कंसोल से जुड़ी अहम जानकारी का इस्तेमाल किया जा सकता है.

यूरोप के उन नए देशों की सूची जहां अब इस सुविधा का इस्तेमाल किया जा सकता है

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

अगर आप इनमें से किसी देश में हैं, तो अब Gemini से कंसोल में अहम जानकारी मांगी जा सकती है. इससे आपको गड़बड़ियों और चेतावनियों को बेहतर तरीके से समझने में मदद मिलेगी.

कंसोल में आई किसी गड़बड़ी के लिए, Gemini से मिली अहम जानकारी.

परफ़ॉर्मेंस पैनल से जुड़े अपडेट

इस अपडेट में, परफ़ॉर्मेंस पैनल में कुछ सुधार किए गए हैं.

बेहतर नेटवर्क ट्रैक

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

नेटवर्क ट्रैक अब ये काम करता है:

  • अनुरोध के टाइप के लिए कलर लेजेंड दिखाता है.
  • रेंडरिंग को रोकने वाले अनुरोधों को ऊपर दाएं कोने में लाल रंग के त्रिकोण से मार्क करता है.
  • चुने जाने पर, अनुरोध शुरू करने वाले व्यक्ति की जानकारी को ऐरो के साथ दिखाता है. इससे आपको नेटवर्क शुरू करने वाले उन लोगों के बारे में जानने में मदद मिलती है जो पहले सिर्फ़ नेटवर्क पैनल में उपलब्ध थे.
  • कर्सर घुमाने पर, अब टूलटिप में स्ट्रक्चर्ड टाइमिंग की जानकारी दिखती है. इसमें रेंडर ब्लॉकिंग का स्टेटस और प्राथमिकता में हुए बदलाव भी शामिल हैं.
  • खास जानकारी टैब में, अब दाईं ओर मौजूद कॉलम में भी समय का ब्यौरा दिखता है.

बेहतर नेटवर्क ट्रैक, जिसमें रंग के लेजेंड, टूलटिप, रेंडर ब्लॉकिंग इंडिकेटर, और समरी टैब में टाइमिंग शामिल हैं.

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

अनुरोध के लिए, दायां क्लिक मेन्यू, जिसमें 'नेटवर्क पैनल में दिखाएं' विकल्प है.

Extensibility API की मदद से परफ़ॉर्मेंस डेटा को पसंद के मुताबिक बनाना

इस वर्शन में, परफ़ॉर्मेंस पैनल में एक्सटेंशन डेटा के लिए सहायता उपलब्ध है. अब परफ़ॉर्मेंस ट्रेस में, इवेंट और टूलटिप के ब्यौरे वाले कस्टम ट्रैक जोड़े जा सकते हैं. साथ ही, खास जानकारी टैब में जानकारी जोड़ी जा सकती है. इसके अलावा, और भी बहुत कुछ किया जा सकता है. यह सुविधा, कस्टम इंस्ट्रूमेंटेशन वाले फ़्रेमवर्क, लाइब्रेरी, और जटिल ऐप्लिकेशन के डेवलपर के लिए मददगार हो सकती है.

इस डेमो पेज पर कस्टम ट्रैक का एक उदाहरण देखें. परफ़ॉर्मेंस > सेटिंग कैप्चर करें में जाकर, एक्सटेंशन डेटा को चालू करें. परफ़ॉर्मेंस की रिकॉर्डिंग शुरू करें और डेमो पेज पर नई कोर्गी जोड़ें पर क्लिक करें. इसके बाद, रिकॉर्डिंग बंद करें. आपको ट्रेस में एक कस्टम ट्रैक दिखेगा. इसमें समरी टैब में, कस्टम टूलटिप और जानकारी वाले इवेंट शामिल होंगे.

परफ़ॉर्मेंस पैनल में कस्टम ट्रैक.

खास तौर पर, परफ़ॉर्मेंस डेटा को बढ़ाने के लिए, performance.measure() या performance.mark() एपीआई कॉल के measureOption.detail या markOption.detail पैरामीटर में खास स्ट्रक्चर पास करें.

'टाइमिंग ट्रैक' में दी गई जानकारी

अगर आप ऐसे वेब डेवलपर हैं जो समय ट्रैक में एंट्री जोड़ने के लिए, परफ़ॉर्मेंस एपीआई के उपयोगकर्ता समय वाले हिस्से का इस्तेमाल करते हैं, तो अब mark और measure इवेंट और उनके टाइमस्टैंप की जानकारी को खास जानकारी टैब में देखा जा सकता है.

टाइमस्टैंप और जानकारी के साथ 'टाइमिंग ट्रैक' में एक कस्टम इवेंट.

Chromium से जुड़ी समस्या: 345418915.

नेटवर्क पैनल में सूची में दिए गए सभी अनुरोधों को कॉपी करें

पूरे नेटवर्क लॉग को कॉपी करने के बजाय, अब नेटवर्क पैनल से फ़िल्टर लागू किए जा सकते हैं और सिर्फ़ सूची में दिए गए अनुरोधों को कॉपी किया जा सकता है.

सिर्फ़ सूची में दिए गए अनुरोधों के लिए ही विकल्प कॉपी करें.

नाम वाले एचटीएमएल टैग और कम गड़बड़ी के साथ तेज़ हीप स्नैपशॉट

मेमोरी पैनल में हीप स्नैपशॉट अब और भी तेज़ी से जनरेट होते हैं. साथ ही, अब इनमें ऑब्जेक्ट को नाम वाले एचटीएमएल टैग के हिसाब से ग्रुप किया जाता है. साथ ही, कम इंटरनल ऑब्जेक्ट दिखाकर, JavaScript भाषा के सेमेंटेक्स से बेहतर मैच किया जाता है. साथ ही, इनमें हमेशा संख्या वाली वैल्यू शामिल होती हैं.

नाम वाले एचटीएमएल टैग के हिसाब से ग्रुप में बांटे गए ऑब्जेक्ट.

कैप्चर में संख्या वाली वैल्यू शामिल करें सेटिंग की परफ़ॉर्मेंस तेज़ कर दी गई है, डिफ़ॉल्ट रूप से चालू कर दी गई है, और मेमोरी पैनल से हटा दिया गया है.

स्नैपशॉट में इंटरनल ऑब्जेक्ट को मैन्युअल तौर पर शामिल करने के लिए, पहले सेटिंग > एक्सपेरिमेंट > हीप स्नैपशॉट में इंटर्नल ऑब्जेक्ट दिखाने का विकल्प दिखाएं को चालू करें. इसके बाद, मेमोरी पैनल में इंटर्नल ऑब्जेक्ट दिखाएं (...) चालू करें.

Chromium से जुड़ी समस्याएं: 41490040, 343341610, 42203857.

ऐनिमेशन कैप्चर करने और @keyframes लाइव में बदलाव करने के लिए, ऐनिमेशन पैनल खोलें

ऐनिमेशन पैनल अब ये काम करता है:

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

नीचे दिए गए वीडियो में, दोनों सुविधाओं को काम करते हुए देखें.

Chromium से जुड़ी समस्या: 352718055.

लाइटहाउस 12.1.0

Lighthouse पैनल अब लाइटहाउस 12.1.0 पर चलता है.

इस अपडेट में कई बदलाव किए गए हैं. इनमें सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) के लिए, पुरानी फ़र्स्ट मीनिंगफ़ुल पेंट (एफ़एमपी) मेट्रिक को हटाना शामिल है. बदलावों की पूरी सूची देखें.

DevTools में Lighthouse पैनल का इस्तेमाल करने के बुनियादी तरीकों के बारे में जानने के लिए, Lighthouse: वेबसाइट की स्पीड ऑप्टिमाइज़ करना लेख पढ़ें.

Chromium से जुड़ी समस्या: 772558.

सुलभता

इस वर्शन में, सुलभता से जुड़े ये सुधार किए गए हैं:

  • लाइव एक्सप्रेशन के बदलाव करने वाले फ़ील्ड में, अपने-आप पूरा होने के बाद Tab दबाने से फ़ोकस अगले फ़ोकस पॉइंट पर चला जाता है. पहले, इससे टेक्स्ट इंडेंट हो जाता था.
  • साइज़ बदलने वाले टूल पर क्लिक करने से, उस पर फ़ोकस हो जाता है. इसके बाद, उसे दाएं और बाएं ऐरो बटन की मदद से कहीं भी ले जाया जा सकता है.
  • स्क्रीन रीडर अब यह बताता है कि कीबोर्ड से नेविगेट करते समय, सोर्स और स्मार्टवॉच के एक्सप्रेशन मिटाएं में, स्मार्टवॉच के एक्सप्रेशन जोड़ें में बदलाव करने का फ़ील्ड साफ़ तौर पर दिखता है.

Chromium से जुड़ी समस्याएं: 349939551, 343942719, 349334243, 349428374.

अन्य खास बातें

इस रिलीज़ में किए गए कुछ अहम सुधार और सुधार यहां दिए गए हैं:

  • परफ़ॉर्मेंस:
    • नेटवर्क ट्रैक: WebSocket कनेक्शन इवेंट 331351979 जोड़े गए.
    • परफ़ॉर्मेंस पैनल अब सबसे व्यस्त मुख्य थ्रेड गतिविधि 345599356 पर सही तरीके से ज़ूम इन करता है.
    • ट्रेस फ़ाइल के गलत टाइप को अपलोड करने वाली गड़बड़ी को ठीक कर दिया गया है. अब यह सही .json या .gz 349864878 को छोड़कर, किसी भी तरह का कॉन्टेंट अपलोड करने से रोकता है.
  • एलिमेंट > स्टाइल:
    • लंबाई की प्रॉपर्टी वैल्यू में यूनिट ड्रॉप-डाउन अब काम नहीं करता 41495618.
    • नेस्ट किए गए नियमों 346732737 की चालू प्रॉपर्टी को ठीक करने की समस्या हल की गई.
    • इनऐक्टिव @position-try सेक्शन अब धूसर रंग में दिखेंगे 40246493.
  • ऐप्लिकेशन:
    • कुकी: उस गड़बड़ी को ठीक किया गया जो रीफ़्रेश करने पर कुकी रीफ़्रेश नहीं करती थी, 348683488 पर क्लिक करें.
    • लोकल स्टोरेज: अब पासकोड को अंग्रेज़ी के वर्णमाला के क्रम में 341129585 के हिसाब से क्रम में लगाया जा सकता है.

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

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

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

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

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

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