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

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

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

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

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

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

crbug.com/1500573 पर बेझिझक इस सुविधा के बारे में अपनी राय दें.

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

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

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

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

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

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

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

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

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

सोर्स मैप से जुड़ी बेहतर सहायता

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

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

• कंसोल में एक्सप्रेशन और अपने-आप पूरे होने वाले सुझाव

  

• लाइव एक्सप्रेशन

  

• स्मार्टवॉच के एक्सप्रेशन

  

• कंडिशनल ब्रेकपॉइंट और लॉगपॉइंट

  

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

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

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

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

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

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

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

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

परफ़ॉर्मेंस पैनल में सबसे नीचे, कॉल ट्री, और इवेंट लॉग टैब में बेहतर फ़िल्टर करने के लिए तीन नए बटन हैं:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

लाइटहाउस 11.3.0

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

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

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

सुलभता

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

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

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

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

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

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

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

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

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

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

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

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

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