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

Sofia Emelianova

एलिमेंट पैनल में सीएसएस ऐंकर पोज़िशनिंग की जांच करना

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

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

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

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

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

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

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

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

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

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

सोर्स > इवेंट लिसनर ब्रेकपॉइंट > कंट्रोल सूची में, scroll-snap से जुड़े दो लिसनर मिलते हैं: 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 कनेक्शन की मदद से मैसेज पाएं इवेंट को कैप्चर करता है. साथ ही, उन्हें परफ़ॉर्मेंस ट्रेस में दिखाता है. उदाहरण के लिए:

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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

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