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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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