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

Sofia Emelianova
Sofia Emelianova
GitHub

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

साफ़ तौर पर और छिपे हुए ऐंकर को लिंक करने से पहले और बाद की इमेज.

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

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

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

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

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

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

  • पहले से मौजूद फ़ंक्शन से मिलने वाले अपवाद या वादे के अस्वीकार होने की जानकारी.
  • डीओएम, फ़ेच/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 मैसेज भेजें और WebSocket मैसेज पाएं इवेंट कैप्चर करता है और उन्हें परफ़ॉर्मेंस ट्रेस में दिखाता है. उदाहरण के लिए:

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

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 में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.