DevTools (Chrome 123) में नया क्या है

Sofia Emelianova
Sofia Emelianova
GitHub

ईस्टर एग ढूंढना

इस साल के अप्रैल फूल्स डे का जश्न मनाने के लिए, DevTools की टीम ने DevTools में कहीं एक ईस्टर एग छिपाया है.

इसे ढूंढने के लिए, रंग-बिरंगे 💫 इमोजी देखें.

एलिमेंट पैनल से जुड़े अपडेट

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

एलिमेंट > स्टाइल में जाकर, फ़ोकस किए गए पेज को एम्युलेट करना

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

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

स्टाइल टैब में, फ़ोकस किए गए पेज को एम्युलेट करने से पहले और बाद की इमेज.

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

var() फ़ॉलबैक में कलर पिकर, ऐंगल क्लॉक, और आसानी से बदलाव करने वाला एडिटर

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

var() फ़ॉलबैक में, कलर पिकर, ऐंगल क्लॉक, और आसानी से बदलाव करने की सुविधा देने वाले एडिटर टूल को रेंडर करने से पहले और बाद की इमेज.

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

सीएसएस की लंबाई का पता लगाने वाला टूल अब काम नहीं करता

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

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

लंबाई का टूल फिर से चालू करने के लिए, सेटिंग > प्रयोग > स्टाइल टैब में CSS <length> एडिटिंग टूल को बंद करें से चुने हुए का निशान हटाएं.

अगर आपको अब भी इस टूल का इस्तेमाल करना है, तो DevTools की टीम आपसे इस बारे में जानना चाहेगी कि लंबाई का पता लगाने वाला टूल, आपके वर्कफ़्लो में कैसे मदद करता है. crbug/1522657 में बेझिझक सुझाव/राय दें या शिकायत करें.

बंद किए जाने वाले एक्सपेरिमेंट को बंद कर दिया गया है.

परफ़ॉर्मेंस > मुख्य ट्रैक में, चुने गए खोज नतीजे के लिए पॉपओवर

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

चुने गए खोज नतीजे पर पॉपओवर दिखाने से पहले और बाद की इमेज.

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

नेटवर्क पैनल से जुड़े अपडेट

इस वर्शन में, नेटवर्क पैनल में कुछ अपडेट किए गए हैं.

नेटवर्क > EventStream टैब में, 'मिटाएं' बटन और खोज फ़िल्टर

नेटवर्क > EventStream टैब में ये चीज़ें दिखती हैं:

  • मिटाएं बटन, जो टेबल में कैप्चर किए गए इवेंट मिटाता है.
  • रेगुलर एक्सप्रेशन को समझने वाला खोज फ़िल्टर.

&#39;मिटाएं&#39; बटन और खोज फ़िल्टर जोड़ने से पहले और बाद की इमेज.

DevTools की टीम, इस सुविधा को लॉन्च करने के लिए Charles Vazac का धन्यवाद करना चाहती है.

इसके अलावा, EventStream टैब अब सिर्फ़ EventSource API के साथ-साथ, फ़ेच/XHR के ज़रिए भेजे गए इवेंट भी कैप्चर करता है. इसे इस डेमो पेज पर आज़माएं.

Chromium से जुड़ी समस्या: 1488863, 40659493.

'नेटवर्क' > 'कुकी' में, तीसरे पक्ष की कुकी के लिए छूट की वजहों के साथ टूलटिप

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

तीसरे पक्ष की कुकी के लिए, छूट की वजह के साथ टूलटिप दिखाने से पहले और बाद की इमेज.

तीसरे पक्ष की कुकी को इन वजहों से अनुमति दी जा सकती है:

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

सोर्स में सभी ब्रेकपॉइंट चालू और बंद करना

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

सभी ब्रेकपॉइंट चालू या बंद करने के लिए, सोर्स > ब्रेकपॉइंट में जाकर, किसी ब्रेकपॉइंट पर दायां क्लिक करें और उससे जुड़ा विकल्प चुनें.

चालू और बंद करने के विकल्पों को वापस लाने से पहले और बाद की इमेज.

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

Node.js के लिए DevTools में लोड की गई स्क्रिप्ट देखना

Node.js के लिए DevTools, अब सोर्स > स्क्रिप्ट में नेविगेशन ट्री में लोड की गई स्क्रिप्ट दिखाता है.

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

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

Lighthouse 11.5.0

Lighthouse पैनल अब Lighthouse 11.5.0 पर काम करता है. बदलावों की पूरी सूची देखें.

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

एक नया ऑडिट, जो लेआउट में बदलाव की मुख्य वजहों का अनुमान लगाता है.

DevTools में Lighthouse पैनल का इस्तेमाल करने के बुनियादी तरीकों के बारे में जानने के लिए, Lighthouse: वेबसाइट की स्पीड ऑप्टिमाइज़ करना लेख पढ़ें.

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

सुलभता

इस वर्शन में, सुलभता से जुड़े ये सुधार किए गए हैं:

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

Chromium से जुड़ी समस्याएं: 1516957, 324282443, 324467508, 324930007.

अन्य हाइलाइट

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

  • DevTools में फ़ॉन्ट को Chrome (1523538) से मैच करने के लिए अपडेट किया गया है.
  • परफ़ॉर्मेंस: टाइमलाइन पर कर्सर घुमाने पर स्क्रीनशॉट डिसप्ले करने की समस्या को ठीक किया गया (1519469).
  • सोर्स: कोड को बेहतर तरीके से पढ़ने के लिए, एडिटर में लाइन की ऊंचाई बढ़ाई गई है (1523640).
  • नेटवर्क > रिस्पॉन्स: अलग-अलग फ़ॉर्मैट और एन्कोडिंग (1523128, 1509336, 1523128, 41481944, 1509336) के साथ डिसप्ले से जुड़ी कई समस्याएं ठीक की गईं.

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

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

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

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

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

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