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

Sofia Emelianova
Sofia Emelianova

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

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

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

सुरक्षा पैनल में निजता सेक्शन जोड़ने से पहले और बाद की इमेज.

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

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

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

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

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

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

थ्रॉटलिंग कैलिब्रेशन जोड़ने से पहले और बाद में.

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

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

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

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

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

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

मार्कर टूलटिप और इनसाइट में फ़ील्ड डेटा

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

मार्कर टूलटिप और अहम जानकारी टैब में फ़ील्ड डेटा जोड़ने से पहले और बाद में.

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");

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

console.timeStamp की सुविधा जोड़ने से पहले और बाद में.

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

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

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

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

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

एलिमेंट पैनल में, अब स्टाइल > :hov > किसी खास एलिमेंट की स्थिति को फ़ोर्स करें सेक्शन में, <details>, <select>, <dialog>, और <input> जैसे कुछ एचटीएमएल एलिमेंट के लिए, :open सूडो-क्लास काम करता है.

&#39;:open&#39; विकल्प जोड़ने से पहले और बाद में.

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

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

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

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

&#39;कंसोल कॉपी करें&#39; विकल्प जोड़ने से पहले और बाद में.

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

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

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

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

बाइट यूनिट दिखाने से पहले और बाद में.

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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