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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एक्सटेंसिबिलिटी एपीआई की मदद से, परफ़ॉर्मेंस डेटा को अपनी पसंद के मुताबिक बनाना

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

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

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

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

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

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

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

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

नेटवर्क पैनल में मौजूद सभी अनुरोधों को कॉपी करना

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

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

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

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

नाम वाले एचटीएमएल टैग के हिसाब से व्यवस्थित किए गए ऑब्जेक्ट.

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

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

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

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

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

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

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

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

Lighthouse 12.1.0

Lighthouse पैनल अब Lighthouse 12.1.0 पर काम करता है.

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

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

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

सुलभता

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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