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

Sofia Emelianova

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

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

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

सोर्स पैनल में सुधार

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

'कभी नहीं रोकें' को बेहतर बनाया गया

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

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

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

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

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

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

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

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

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

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

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

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

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