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

Sofia Emelianova
Sofia Emelianova

नेटवर्क पैनल में बेहतर फ़िल्टर बार

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

इस वर्शन में, उससे जुड़ा एक्सपेरिमेंट डिफ़ॉल्ट रूप से चालू था. हालांकि, इसे पहले जैसा कर दिया जाएगा. इसकी प्रोग्रेस को crbug.com/1523150 पर ट्रैक किया जा सकता है.

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

पुराने फ़िल्टर बार को तुरंत वापस लाने के लिए, सेटिंग > एक्सपेरिमेंट > नेटवर्क पैनल में फ़िल्टर बार को फिर से डिज़ाइन करें को बंद करें.

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

इस सुविधा के बारे में अपने सुझाव, शिकायत या राय देने के लिए, crbug.com/1500573 पर जाएं.

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

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

@font-palette-values सहायता

एलिमेंट पैनल में अब @font-palette-values सीएसएस at-rule का इस्तेमाल किया जा सकता है. इसकी मदद से, font-palette प्रॉपर्टी की डिफ़ॉल्ट वैल्यू को पसंद के मुताबिक बनाया जा सकता है.

स्टाइल में, font-palette प्रॉपर्टी की वैल्यू पर क्लिक करें. ऐसा करने पर, DevTools आपको @font-palette-values सेक्शन पर ले जाएगा. यहां अपनी कस्टम वैल्यू में बदलाव किया जा सकता है.

स्टाइल में @font-palette-values सेक्शन.

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

काम करने वाला उदाहरण: किसी दूसरी कस्टम प्रॉपर्टी के फ़ॉलबैक के तौर पर कस्टम प्रॉपर्टी

एलिमेंट > स्टाइल में अब ऐसी कस्टम प्रॉपर्टी को हल किया जाता है जो किसी दूसरी कस्टम प्रॉपर्टी का फ़ॉलबैक है.

किसी कस्टम प्रॉपर्टी को फ़ॉलबैक के तौर पर इस्तेमाल करने से पहले और बाद की इमेज.

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

सोर्स मैप के लिए बेहतर सहायता

सेटिंग > प्रयोग > सोर्स मैप का इस्तेमाल करके, एक्सप्रेशन में वैरिएबल के नामों को हल करें डिफ़ॉल्ट रूप से चालू है.

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

ज़्यादा जानकारी के लिए, इससे जुड़ा आरएफ़सी देखें.

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

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

बेहतर इंटरैक्शन ट्रैक

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

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

इसके अलावा, किसी इंटरैक्शन पर कर्सर घुमाने पर, आपको एक मददगार टूलटिप दिख सकता है. इसमें इंटरैक्शन के समय की जानकारी होती है.

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

बॉटम-अप, कॉल ट्री, और इवेंट लॉग टैब में बेहतर फ़िल्टर करने की सुविधा

परफ़ॉर्मेंस पैनल में मौजूद बॉटम-अप, कॉल ट्री, और इवेंट लॉग टैब में, बेहतर तरीके से फ़िल्टर करने के लिए तीन नए बटन जोड़े गए हैं:

  • केस मैच करें.
  • रेगुलर एक्सप्रेशन.
  • पूरे शब्द से मैच करें.

बेहतर तरीके से फ़िल्टर करने के लिए तीन नए बटन.

इसके अलावा, आपको संदर्भ बनाए रखने में मदद करने के लिए, अब सिर्फ़ टॉप लेवल के आइटम, बॉटम-अप टैब में मौजूद फ़िल्टर से मैच करते हैं. पहले, फ़िल्टर हर नोड से मैच करता था.

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

सोर्स पैनल में इंडेंटेशन मार्कर

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

वर्टिकल लाइनों से इंडेंट किए गए कोड ब्लॉक को मार्क करने से पहले और बाद की इमेज.

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

नेटवर्क पैनल में, बदले गए हेडर और कॉन्टेंट के लिए काम के टूलटिप

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

हेडर और रिस्पॉन्स टैब में, बैंगनी बिंदु वाले आइकॉन के बगल में मौजूद नए टूलटिप.

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

अनुरोध को ब्लॉक करने के पैटर्न जोड़ने और हटाने के लिए, कमांड मेन्यू के नए विकल्प

अब कमांड मेन्यू में, नेटवर्क अनुरोध को ब्लॉक करने के पैटर्न जोड़ने या हटाने के लिए, कमांड टाइप किए जा सकते हैं.

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

जोड़ें कमांड से, आपको पैटर्न तय करने के लिए डायलॉग बॉक्स पर ले जाया जाता है. वहीं, हटाएं कमांड से, नेटवर्क अनुरोध को ब्लॉक करने वाले पैनल को खोले बिना सभी पैटर्न हटाए जाते हैं.

सीएसपी उल्लंघन से जुड़ा एक्सपेरिमेंट हटा दिया गया है

वर्शन 89 में एक्सपेरिमेंट के तौर पर जोड़ा गया सीएसपी के उल्लंघन टैब, अब काम का नहीं है. इसलिए, इसे हटा दिया गया है.

सीएसपी की जानकारी एक नज़र में देखने के लिए, ऐप्लिकेशन > फ़्रेम > कॉन्टेंट की सुरक्षा के लिए नीति (सीएसपी) पर जाएं.

ऐप्लिकेशन पैनल में कॉन्टेंट की सुरक्षा के बारे में नीति.

इसके अलावा, समस्याएं पैनल, सीएसपी के उल्लंघनों की रिपोर्ट करता है.

ऐप्लिकेशन पैनल में कॉन्टेंट की सुरक्षा के बारे में नीति.

Lighthouse 11.3.0

Lighthouse पैनल अब Lighthouse 11.3.0 पर काम करता है. बदलावों की पूरी सूची देखें. इसमें 404 पेजों पर रिपोर्ट चलाने की सुविधा भी शामिल है.

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

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

सुलभता

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

  • नेटवर्क > पेलोड में, अब सोर्स देखें और यूआरएल-एन्कोड किया गया देखें बटन पर फ़ोकस करने के लिए Tab का इस्तेमाल किया जा सकता है. साथ ही, उससे जुड़ी कार्रवाई को ट्रिगर करने के लिए, Enter या Space दबाएं.
  • कंसोल में, डीबगर के लिए अब उपलब्ध नहीं स्क्रिप्ट पर ले जाने वाले लिंक अब धूसर हो गए हैं. इन पर क्लिक नहीं किया जा सकता.
  • नेविगेशन ट्री में, Enter बटन अब चाइल्ड वाले नोड को बड़ा और छोटा करता है. जैसे, सोर्स > पेज में मौजूद ट्री.

Chromium से जुड़ी समस्याएं: 1338391, 1500662, 1420362.

अन्य हाइलाइट

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

  • प्रदर्शन. अगर रिकॉर्डिंग पूरी नहीं हो पाती है, तो अब आपके पास रॉ ट्रेस इवेंट डाउनलोड करने का विकल्प है. साथ ही, यह पता लगाने की कोशिश की जा सकती है कि क्या गड़बड़ी हुई (कमिट करें).
  • कंसोल दिखाएं शॉर्टकट (Mac के लिए Ctrl+`, Windows और Linux के लिए Ctrl++) अब न सिर्फ़ कंसोल खोलता है, बल्कि दूसरी बार दबाने पर उसे बंद भी कर देता है.
  • डेवलपर के लिए संसाधन. एक गड़बड़ी को ठीक किया गया, जिसकी वजह से सीएसएस रिसॉर्स और उनकी समस्याओं की शिकायत नहीं की जा सकती थी (1420362).
  • एलिमेंट:
    • iframes (1453375) में एलिमेंट की जांच करने से जुड़ी गड़बड़ी को ठीक किया गया.
    • कंप्यूट किया गया. एक गड़बड़ी को ठीक किया गया है, जिसकी वजह से डिफ़ॉल्ट वैल्यू रेंडर नहीं हो पा रही थीं (1499882).
    • सर्च. एक या दो वर्ण (1416457) वाली छोटी क्वेरी के लिए, मैच की संख्या का हिसाब लगाने से रोकने वाले बग को ठीक किया गया.
  • कंसोल. अब फ़िल्टर बॉक्स (1346936) में, एस्केप किए गए वर्ण के साथ खत्म होने वाले रेगुलर एक्सप्रेशन को सही तरीके से पार्स किया जाता है.
  • सेटिंग > Workspace. एक गड़बड़ी को ठीक किया गया है, जिसकी वजह से बाहर रखे गए फ़ोल्डर को जोड़ा नहीं जा सका (1503580).
  • नेटवर्क > झलक. अब data: यूआरआई (1381791) वाली इमेज रेंडर करता है.
  • मेमोरी. ऐक्शन बार में, लोड और सेव बटन जोड़े गए हैं (1275407).

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

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

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

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

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

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