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

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

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

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

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

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

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

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

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

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

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

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

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

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

Elements > Styles अब एक ऐसी कस्टम प्रॉपर्टी को हल करता है जो दूसरी कस्टम प्रॉपर्टी का फ़ॉलबैक है.

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

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

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

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

• कंसोल में एक्सप्रेशन और ऑटोकंप्लीट सुविधा की मदद से मिलने वाले सुझाव

  

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

  

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

  

• शर्त के साथ ब्रेकपॉइंट और लॉगपॉइंट

  

ज़्यादा जानकारी के लिए, संबंधित आरएफ़सी देखें.

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

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

बेहतर इंटरैक्शन ट्रैक करने की सुविधा

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Lighthouse 11.3.0

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

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

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

सुलभता

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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

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