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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

Elements पैनल से जुड़े अपडेट

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

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

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

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

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

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

var() फ़ॉलबैक में कलर पिकर, ऐंगल क्लॉक, और ईज़िंग एडिटर

सीएसएस में बदलाव करने की प्रोसेस को आसान बनाने के लिए, Elements > Styles टैब में अब var() फ़ॉलबैक में Color Picker, Angle Clock, और Easing Editor का इस्तेमाल किया जा सकता है.

var() फ़ॉलबैक में, रेंडरिंग से पहले और बाद में कलर पिकर, ऐंगल क्लॉक, और ईज़िंग एडिटर टूल.

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

सीएसएस लेंथ टूल अब काम नहीं करता

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

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

लंबाई टूल को फिर से चालू करने के लिए, सेटिंग > एक्सपेरिमेंट > स्टाइल टैब में सीएसएस <length> ऑथरिंग टूल को बंद करें को अनचेक करें.

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

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

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

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

इस इमेज में, खोज के चुने गए नतीजे के ऊपर पॉप-ओवर को दिखाया गया है.

Chromium की समस्या: 1523279.

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

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

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

नेटवर्क > EventStream टैब में ये बदलाव किए गए हैं:

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

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

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

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

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

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

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

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

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