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

Sofia Emelianova
Sofia Emelianova
GitHub

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

लिंक करने से पहले और बाद में, साफ़ तौर पर और इंप्लिसिट तरीके से बताए गए ऐंकर.

इसके अलावा, popovertarget एट्रिब्यूट की वैल्यू अब डीओएम में मौजूद इसके popover एलिमेंट से लिंक होती है.

`popovertarget` को उसके पॉपओवर एलिमेंट से लिंक करने से पहले और बाद की स्थिति.

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

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

'यहां कभी न रुकें' सुविधा को बेहतर बनाया गया

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

  • पहले से मौजूद फ़ंक्शन से मिलने वाले अपवाद या प्रॉमिस रिजेक्शन.
  • डीओएम, फ़ेच/एक्सएचआर, और सीएसपी के उल्लंघन के ब्रेकपॉइंट "रद्द किए जा रहे हैं".
  • Wasm डिसअसेंबली में.

वर्कफ़्लो को काम करते हुए देखें:

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

नए स्क्रोल स्नैप इवेंट लिसनर

सोर्स > इवेंट लिसनर ब्रेकपॉइंट > कंट्रोल सूची में, स्क्रोल-स्नैप से जुड़े दो लिसनर मिलते हैं: scrollsnapchange और scrollsnapchanging. ये इवेंट तब ट्रिगर होते हैं, जब स्क्रोल कंटेनर को इस तरह से स्क्रोल किया जाता है कि वह किसी नए एलिमेंट पर स्नैप हो जाए.

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

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

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

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

नेटवर्क थ्रॉटलिंग के प्रीसेट अपडेट किए गए

नेटवर्क पैनल में, थ्रॉटलिंग के अपडेट किए गए प्रीसेट मिलते हैं: नया तेज़ 4G, तेज़ 3G का नाम बदलकर धीमा 4G किया गया, और धीमा 3G का नाम बदलकर 3G किया गया. यह Lighthouse के प्रीसेट के साथ बेहतर तरीके से अलाइन होता है.

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

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

एचएआर फ़ॉर्मैट के कस्टम फ़ील्ड में सर्विस वर्कर की जानकारी

नेटवर्क लॉग को एचएआर फ़ॉर्मैट में एक्सपोर्ट करते समय, अब आपको सर्विस वर्कर से जुड़ी जानकारी दिख सकती है. इसमें कस्टम फ़ील्ड (अंडरस्कोर से शुरू होने वाले) के तौर पर समय की जानकारी भी शामिल है. उदाहरण के लिए, आपको लॉग में ये नए फ़ील्ड दिख सकते हैं:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

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

परफ़ॉर्मेंस पैनल में WebSocket इवेंट भेजना और पाना

अन्य WebSocket इवेंट की तरह, परफ़ॉर्मेंस पैनल अब WebSocket कनेक्शन की मदद से मैसेज भेजें और WebSocket कनेक्शन की मदद से मैसेज पाएं इवेंट को कैप्चर करता है. साथ ही, उन्हें परफ़ॉर्मेंस ट्रेस में दिखाता है. उदाहरण के लिए:

परफ़ॉर्मेंस ट्रेस में कैप्चर किया गया 'WebSocket कनेक्शन की मदद से मैसेज पाएं' इवेंट.

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

अन्य हाइलाइट

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

  • सुलभता: स्क्रीन रीडर अब कंसोल में मैसेज का कॉन्टेंट पढ़कर सुनाते हैं. ऐसा तब होता है, जब अप और डाउन ऐरो बटन (344484979) का इस्तेमाल करके लॉग को स्क्रोल किया जाता है.
  • सोर्स:
    • पेज: इस रूप में सेव करें मेन्यू विकल्प अब Wasm मॉड्यूल फ़ाइलों को Base64 टेक्स्ट के बजाय, मान्य wasm बाइनरी के तौर पर सेव करता है (40784130).
    • कॉल स्टैक: एसिंक कॉल फ़्रेम के ब्यौरों से (async) सफ़िक्स को हटा दिया गया है. साथ ही, उनके हाइलाइट को इटैलिक से बदलकर बोल्ड कर दिया गया है (343750870).
  • मेमोरी: हीप स्नैपशॉट की खास जानकारी (340200025) से, शून्य साइज़ वाले ग़ैर-ज़रूरी InternalNodes को हटा दिया गया है.
  • नेटवर्क: उस गड़बड़ी को ठीक किया गया है जिसकी वजह से, उन अनुरोधों के लिए स्ट्रीमिंग रिस्पॉन्स के कॉन्टेंट की झलक नहीं दिखती थी जो अभी शुरू हुए थे, लेकिन उन्हें अब तक responseReceived इवेंट नहीं मिला था (338340752).
  • परफ़ॉर्मेंस:
    • सिलेक्टर के आंकड़े: %-of-Slow-Path-Non-Matches कॉलम (324282954) के लिए, जानकारी देने वाली टूलटिप जोड़ी गई.
    • ट्रैक कॉन्फ़िगरेशन मोड: ट्रैक कॉन्फ़िगर करने की प्रोसेस पूरी करें बटन को सबसे नीचे दाईं ओर ले जाया गया है (345256274).
  • कंसोल: उस गड़बड़ी को ठीक किया गया है जिसकी वजह से, बैक/फ़ॉरवर्ड-कैश मेमोरी (40894153) का इस्तेमाल करके नेविगेट करने पर, कंसोल में एक जैसे कई मैसेज दिखते थे.
  • सेटिंग: सभी टैब के बगल में हेल्पर आइकॉन जोड़े गए हैं.

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

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

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

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

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

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