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

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

इस वर्शन में, परफ़ॉर्मेंस पैनल में कई सुधार किए गए हैं.

'नेटवर्क डिपेंडेंसी ट्री' इनसाइट में पहले से कनेक्ट किए गए ऑरिजिन

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

प्रीकनेक्ट हिंट की मदद से, आपकी साइट तीसरे पक्ष के ज़रूरी ऑरिजिन के साथ पहले से कनेक्शन बना सकती है. इससे पेज लोड होने की स्पीड बेहतर होती है.

ज़्यादा जानकारी के लिए, ज़रूरी ऑरिजिन के साथ पहले से कनेक्शन बनाना लेख पढ़ें.

'दस्तावेज़ को डाउनलोड करने में लगने वाला समय' इनसाइट में, सर्वर से जवाब मिलने और रीडायरेक्ट होने में लगने वाला समय

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

नेटवर्क अनुरोधों की खास जानकारी में रीडायरेक्ट

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

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

परफ़ॉर्मेंस ट्रेस में शोर कम किया गया है

परफ़ॉर्मेंस पैनल में अब v8 JavaScript इंजन की compile कैटगरी के इवेंट नहीं दिखेंगे. पहले, इन इवेंट की वजह से बहुत ज़्यादा गैर-ज़रूरी ओवरहेड और नॉइज़ होती थी. खास तौर पर, compile code इवेंट की वजह से.

अगर आपको लगता है कि आपके कुछ ज़रूरी इवेंट अब नहीं दिख रहे हैं, तो crbug.com/414330508 पर जाकर अपना सुझाव/राय दें या शिकायत करें.

'JavaScript के नमूने बंद करें' सुविधा बंद कर दी गई है

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

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

सेंसर में जियोलोकेशन की सटीक जानकारी देने वाला पैरामीटर

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

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

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

इस वर्शन में, Elements पैनल में कई सुधार किए गए हैं.

जटिल सीएसएस वैल्यू को आसानी से डीबग करें

जटिल सीएसएस वैल्यू को डीबग करने में आपकी मदद करने के लिए, Elements > Styles टैब में अब आपको टूलटिप में यह जानकारी दिखती है:

• सीएसएस वैरिएबल की पूरी परिभाषा की चेन, ताकि आपको कई लिंक पर क्लिक न करना पड़े.
• सीएसएस की जटिल कैलकुलेशन का चरण-दर-चरण आकलन, ताकि आप ज़्यादा असरदार तरीके से गड़बड़ियों का पता लगा सकें. साथ ही, यह बेहतर तरीके से समझ सकें कि वैल्यू की गणना कैसे की जाती है.

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

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

@function Elements > Styles में सहायता

Chrome में @function की सुविधा के लिए तैयारी की जा रही है. इसलिए, तत्व > स्टाइल टैब अब आपके कस्टम फ़ंक्शन के नामों को एक खास सेक्शन में उनकी परिभाषाओं से लिंक करता है.

नेटवर्क पैनल में किए गए सुधार

इस वर्शन में, नेटवर्क पैनल में कई सुधार किए गए हैं.

has-request-header फ़िल्टर

नेटवर्क पैनल में अब has-request-header फ़िल्टर काम करता है. इसकी मदद से, किसी खास अनुरोध हेडर के नाम के हिसाब से फ़िल्टर किया जा सकता है.

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

आइसोलेटेड वेब ऐप्लिकेशन में Direct Sockets

नेटवर्क पैनल में, अब TCPSocket, UDPSocket (इन बाउंड मोड), UDPSocket (कनेक्टेड मोड) के ज़रिए आइसोलेटेड वेब ऐप्लिकेशन (आईडब्ल्यूए) के ट्रैफ़िक को मॉनिटर किया जा सकता है.

इसके लिए, टेबल में सामान्य अनुरोधों के बगल में मौजूद directscoket कनेक्शन चुनें. इसके बाद, मैसेज टैब में जाकर कोई मैसेज चुनें.

आइसोलेटेड वेब ऐप्लिकेशन (आईडब्ल्यूए), वेब ऐप्लिकेशन के लिए भरोसेमंद सुरक्षा मॉडल उपलब्ध कराते हैं. ज़्यादा जानकारी के लिए, आइसोलेटेड वेब ऐप्लिकेशन का इस्तेमाल शुरू करना लेख पढ़ें. साथ ही, Direct Sockets API को लागू करने वाला डेमो ऐप्लिकेशन देखें.

अन्य हाइलाइट

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

• ऐप्लिकेशन > स्टोरेज: इस्तेमाल में न रहे Web SQL विकल्प को हटा दिया गया है (crbug.com/412707590).
• Elements:
  • यह विकल्प डिफ़ॉल्ट रूप से चालू होता है. इससे, डीओएम में मौजूद एलिमेंट और एट्रिब्यूट से जुड़ी समस्याओं को हाइलाइट किया जाता है.
  • स्टाइल: overflow के अपने-आप पूरा होने वाले विकल्पों में clip वैल्यू जोड़ी गई.
• नेटवर्क: फ़ेच के तौर पर कॉपी करें विकल्प से Referrer-Policy एचटीटीपी हेडर हटा दिया गया है. ऐसा इसलिए, क्योंकि यह ब्राउज़र के व्यवहार को कंट्रोल करने वाला रिस्पॉन्स हेडर है, न कि क्लाइंट-साइड का निर्देश (crbug.com/413904896).
• परफ़ॉर्मेंस: वर्कर थ्रेड से 'लंबे टास्क' की चेतावनियां हटा दी गई हैं, क्योंकि ये मुख्य थ्रेड को ब्लॉक नहीं करती हैं (crbug.com/40248589).
• समस्याएं. अब रिपोर्ट:
  • अगर उपयोगकर्ताओं को ट्रैक करने वाले किसी भी संदिग्ध संसाधन को ब्लॉक किया गया हो.
  • रीडायरेक्ट के दौरान स्टोरेज को ऐक्सेस करने या न करने के बावजूद, बाउंस ट्रैकिंग की क्षमता को कंट्रोल करना.
• सुलभता. तत्व > स्टाइल में मौजूद इन एलिमेंट को अब कीबोर्ड से ऐक्सेस किया जा सकता है:
  • शैडो स्वैच (crbug.com/401213105).
  • ऐंकर की पोज़िशन के नाम वाले लिंक (crbug.com/401213107).
  • फ़्लेक्स और ग्रिड एडिटर बटन (crbug.com/401213522).
  • लंबाई (crbug.com/401211976).
  • यूआरएल लिंक (crbug.com/401213104).
  • प्रॉपर्टी के नाम और वैल्यू (crbug.com/417458979).

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

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

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

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

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

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

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