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

Sofia Emelianova

निजता और सुरक्षा पैनल

पुराना सुरक्षा पैनल, अब निजता और सुरक्षा पैनल बन गया है. साथ ही, इसमें निजता से जुड़ा एक नया सेक्शन जोड़ा गया है. इस सेक्शन में, ये काम किए जा सकते हैं:

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

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

परफ़ॉर्मेंस पैनल में सुधार

इस वर्शन में, परफ़ॉर्मेंस पैनल में कई सुधार किए गए हैं.

सीपीयू थ्रॉटलिंग के कैलिब्रेट किए गए प्रीसेट

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

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

एक ही एआई चैट में अलग-अलग परफ़ॉर्मेंस इवेंट चुनना

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

परफ़ॉर्मेंस में पहले और तीसरे पक्ष की हाइलाइटिंग

परफ़ॉर्मेंस पैनल के खास जानकारी टैब में एक नई टेबल जोड़ी गई है. इससे पहले, तीसरे पक्ष, और एक्सटेंशन के डेटा के बीच अंतर किया जा सकता है.

टेबल में मौजूद एंट्री पर कर्सर घुमाएं. इससे परफ़ॉर्मेंस ट्रेस में, काम के इवेंट हाइलाइट हो जाएंगे. सिर्फ़ पहले पक्ष (ग्राहक) के डेटा पर फ़ोकस करने के लिए, तीसरे पक्ष के डेटा को कम अहमियत दें को चुनें.

इसके अलावा, तीसरे पक्षों के हिसाब से ग्रुप किए गए बॉटम-अप टैब पर जाने के लिए, टेबल में हाइलाइट की गई किसी एंट्री के बगल में मौजूद account_tree आइकॉन पर क्लिक करें.

मार्कर टूलटिप और अहम जानकारी में फ़ील्ड का डेटा

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

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

'हर हाल में होने वाला रीफ़्लो' से जुड़ी अहम जानकारी

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

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

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

'डीओएम साइज़ को ऑप्टिमाइज़ करें' इनसाइट

एक और नई अहम जानकारी, डीओएम साइज़ को ऑप्टिमाइज़ करें है. डीओएम ट्री का साइज़ बड़ा होने से, पेज की परफ़ॉर्मेंस धीमी हो सकती है.

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

console.timeStamp की मदद से परफ़ॉर्मेंस ट्रेस को बढ़ाना

Extensibility API अब console.timeStamp के साथ काम करता है. performance.measure और performance.mark के अलावा, अब परफ़ॉर्मेंस ट्रेस में कस्टम ट्रैक बनाए जा सकते हैं. साथ ही, console.timeStamp का इस्तेमाल करके कस्टम मार्क कैप्चर किए जा सकते हैं. यह एक हल्का विकल्प है, जो ब्राउज़र की इंटरनल परफ़ॉर्मेंस टाइमलाइन में एंट्री नहीं जोड़ता, बल्कि सिर्फ़ परफ़ॉर्मेंस ट्रेस में दिखाता है.

उदाहरण के लिए, इस सिंटैक्स का इस्तेमाल किया जा सकता है:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

कैप्चर सेटिंग > check_box कस्टम ट्रैक दिखाएं को चुनने पर, आपको ट्रेस में अपना कस्टम ट्रैक दिखेगा:

एलिमेंट पैनल में किए गए सुधार

इस वर्शन में, तत्व पैनल में कई सुधार किए गए हैं.

ऐनिमेटेड स्टाइल की रीयल-टाइम वैल्यू

तत्व > स्टाइल टैब अब ऐनिमेशन वाली स्टाइल की वैल्यू को रीयल-टाइम में अपडेट करता है.

:open स्यूडो-क्लास और अलग-अलग स्यूडो-एलिमेंट के लिए सहायता

Elements पैनल अब Styles > :hov > Force specific element state सेक्शन में, :open pseudo-class के साथ काम करता है. यह सुविधा, <details>, <select>, <dialog>, और <input> जैसे कुछ एचटीएमएल एलिमेंट के लिए उपलब्ध है.

इसके अलावा, Elements पैनल अब कई नए स्यूडो-एलिमेंट के साथ भी काम करता है: ::checkmark, ::picker-icon, और कैरल से जुड़े ::column, ::scroll-button, ::scroll-marker, और ::scroll-marker-group.

Chromium से जुड़ी समस्याएं: 383157184, 379805728.

सभी कंसोल मैसेज कॉपी करें

अब एक साथ सभी कंसोल मैसेज को राइट क्लिक करके कॉपी किया जा सकता है.

इसके अलावा, आपको नेटवर्क > अनुरोध पेलोड के कॉन्टेक्स्ट मेन्यू में भी कॉपी करने का ऐसा ही विकल्प मिल सकता है.

Chromium से जुड़ी समस्याएं: 40206460, 384967020.

मेमोरी पैनल में बाइट यूनिट

मेमोरी पैनल में अब बाइट की बड़ी संख्याओं के बजाय, बाइट की सही यूनिट के साथ साइज़ दिखते हैं.

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

अन्य हाइलाइट

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

• परफ़ॉर्मेंस:
  • एनोटेशन: अब अपने लेबल पर क्लिक करके, उससे जुड़ी एंट्री (crbug.com/388224764) चुनी जा सकती है.
  • अहम जानकारी: अहम जानकारी टैब में सीएलएस पर क्लिक करने से, अब सबसे खराब शिफ़्ट के बजाय सबसे खराब क्लस्टर चुना जाता है.
• अनदेखा की गई सूची: node: से शुरू होने वाले नोड इंटरनल को अब डिफ़ॉल्ट रूप से अनदेखा किया जाता है (crbug.com/382453615).
• लाइव एक्सप्रेशन: लाइव एक्सप्रेशन की वजह से $_ कमांड पर असर पड़ने वाली गड़बड़ी को ठीक किया गया है (crbug.com/388437265).
• तत्व > स्टाइल: रिलेटिव लेंथ में अब एक पॉपओवर होता है, जो ऐब्सलूट वैल्यू दिखाता है (crbug.com/40778486).
• सुलभता: कॉलम के हेडर अब यह सूचना देते हैं कि उन्हें क्रम से लगाया जा सकता है या नहीं.
• टैब के आइकॉन अब बाईं ओर के बजाय, टैब के नामों के बगल में दाईं ओर दिखते हैं.

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

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

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

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

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

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

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