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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

स्नैपशॉट में इंटरनल ऑब्जेक्ट को मैन्युअल तरीके से शामिल करने के लिए, सबसे पहले settings Settings > Experiments > check_box Show option to expose internals in heap snapshots को चालू करें. इसके बाद, Memory पैनल में जाकर, check_box Expose internals (...) को चालू करें.

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

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

ऐनिमेशन पैनल में अब ये काम किए जा सकते हैं:

• यह पैनल खोलने पर, पहले से चल रहे ऐनिमेशन कैप्चर करता है. इसलिए, ऐनिमेशन कैप्चर करने के लिए आपको पेज को रीफ़्रेश करने की ज़रूरत नहीं होती.
• @keyframes में लाइव बदलाव करने की सुविधा देता है. दूसरे शब्दों में कहें, तो यह Elements > Styles में जाकर @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.
  • नेस्ट किए गए ऐट-रूल के लिए, चालू प्रॉपर्टी को हल करने की समस्या ठीक की गई 346732737.
  • इनऐक्टिव @position-try सेक्शन अब स्लेटी रंग में दिखते हैं 40246493.
• लागू करना:
  • कुकी: हमने एक ऐसी गड़बड़ी को ठीक किया है जिसकी वजह से, रीफ़्रेश करें पर क्लिक करने के बाद भी कुकी रीफ़्रेश नहीं होती थीं 348683488.
  • लोकल स्टोरेज: अब कुंजियों को वर्णमाला के क्रम में लगाया जा सकता है 341129585.

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

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

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

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

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

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

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