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

Sofia Emelianova
Sofia Emelianova
GitHub

छिपी हुई मज़ाक़िया चीज़ें ढूंढें

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

इसे खोजने के लिए, रंगीन 💫 इमोजी का इस्तेमाल करें.

एलिमेंट पैनल के अपडेट

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एक्सपेरिमेंट को बंद करने की प्रोसेस बंद है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

लाइटहाउस 11.5.0

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

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

नया ऑडिट, जो लेआउट शिफ़्ट की असल वजहों का अनुमान लगाता है.

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

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

सुलभता

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

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

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

अन्य खास बातें

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

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

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

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

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

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

  • crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
  • ज़्यादा विकल्प   ज़्यादा दिखाएँ > का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें सहायता > DevTools में DevTools से जुड़ी समस्याओं की शिकायत करें.
  • @ChromeDevTools पर ट्वीट करें.
  • DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.

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

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