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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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