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

Gemini के ज़रिए Console में मिलने वाली अहम जानकारी की सुविधा, यूरोप के ज़्यादातर देशों में उपलब्ध होगी

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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