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

Sofia Emelianova
Sofia Emelianova
GitHub

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

एक्सप्लिसिट और इंप्लिसिट ऐंकर लिंक करने से पहले और बाद में.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'WebSocket Messages पाएं' इवेंट, परफ़ॉर्मेंस ट्रेस में कैप्चर किया गया.

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

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

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

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

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

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

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

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

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

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