DevTools (Chrome 114) में नया क्या है

WebAssembly डीबग करने की सुविधा

DevTools सेटिंग > को चालू करता है एक्सपेरिमेंट > WebAssembly डीबगिंग: डिफ़ॉल्ट रूप से, DWARF सहायता की सुविधा चालू करें. ज़्यादा जानकारी के लिए, आधुनिक टूल की मदद से WebAssembly डीबग करना लेख पढ़ें.

इस एक्सपेरिमेंट से, Wasm ऐप्लिकेशन के एक्ज़ीक्यूशन को रोका जा सकता है. साथ ही, C++ कोड को डीबग भी किया जा सकता है. साथ ही, आपके पास डीबग करने की सारी जानकारी मौजूद होती है:

• आपका ओरिजनल सोर्स कोड, जिसे DWARF डीबग करने की जानकारी का इस्तेमाल करके मैप किया गया है.
• कॉल स्टैक में मौजूद फ़ंक्शन के नाम ऐसे हैं जिन्हें समझा जा सकता है.
• ब्रेकपॉइंट सहायता वगैरह.

Wasm डीबग की जांच करने के लिए, C/C++ DevTools सहायता (DWARF) एक्सटेंशन इंस्टॉल करें. इसके बाद, Mandelbrot डेमो में दिए गए कोड का इस्तेमाल करें.

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

Wasm ऐप्लिकेशन में, गतिविधि करने के तरीके में सुधार

आपके ओरिजनल कोड में मौजूद स्टेप ओवर अलग-अलग होने से रोका नहीं जा सकता (.wasm फ़ाइल). पहले, यह वहीं रुक जाती थी.

हालांकि, स्टेपिंग तब खत्म हो जाती है, जब वह उस फ़ंक्शन से बाहर हो जिसमें यह शुरू हुआ था. उदाहरण के लिए, फ़ंक्शन से लौटने के बाद.

यह सेटिंग सेटिंग > में डिफ़ॉल्ट रूप से चालू होती है प्राथमिकताएं > सोर्स.

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

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

Chrome की ऑटोमैटिक भरने की सुविधा में, आपकी सेव की गई जानकारी, जैसे कि पते या क्रेडिट/डेबिट कार्ड की जानकारी अपने-आप फ़ॉर्म में भर जाती है. ऑटोमैटिक भरने की सुविधा से जुड़ी समस्याओं को आसानी से डीबग करने के लिए, एलिमेंट पैनल अब उन्हें लाल रंग की कर्ली अंडरलाइन से हाइलाइट कर सकता है.

इस सुविधा को देखने के लिए, सेटिंग > को चालू करें एक्सपेरिमेंट > एलिमेंट पैनल के डीओएम ट्री में, उल्लंघन करने वाले नोड या एट्रिब्यूट को हाइलाइट करता है और इस डेमो पेज की जांच करता है.

डीओएम ट्री में हाइलाइट की गई किसी समस्या पर कर्सर घुमाएं और समस्याएं देखें टैब खोलने के लिए, समस्या देखें पर क्लिक करें. इस टैब में, पहचानी गई सभी समस्याओं की सूची होती है और गड़बड़ी के बारे में सुराग भी मिलते हैं.

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

Recorder ऐप्लिकेशन में किए गए दावे

रिकॉर्डर पैनल की मदद से अब आपके पास रनटाइम का पूरा डेटा उपलब्ध होने पर, सीधे रिकॉर्डिंग के दौरान दावे जोड़े जा सकते हैं.

दावा जोड़ने के लिए, नई रिकॉर्डिंग शुरू करें, अपने पेज के साथ इंटरैक्ट करें, और दावा जोड़ें पर क्लिक करें. Recorder, waitForElement टाइप वाला एक चरण शामिल करता है, जिसे तुरंत पसंद के मुताबिक बनाया जा सकता है. दावों को करने के बारे में जानने के लिए, कॉफ़ी कार्ट डेमो में यह वीडियो देखें.

इस वीडियो में इन बातों का दावा करने का तरीका बताया गया है:

• एचटीएमएल एट्रिब्यूट, जैसे कि किसी एलिमेंट का class.
• JSON में JavaScript प्रॉपर्टी, उदाहरण के लिए, .innerText.

दावा करने के लिए, चरणों को भी कॉन्फ़िगर किया जा सकता है. उदाहरण के लिए, JavaScript में कंडिशनल स्टेटमेंट, नोड के चिल्ड्रेन की संख्या (count), एलिमेंट किसको दिखे वगैरह. ज़्यादा जानकारी के लिए, चरण कॉन्फ़िगर करना देखें.

इसके अलावा, Recorder अब साइड-बाय-साइड कोड व्यू और 'स्टेप मेन्यू' पर राइट क्लिक करके आपके पसंदीदा स्क्रिप्ट फ़ॉर्मैट को याद रखता है.

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

लाइटहाउस 10.1.1

Lighthouse पैनल अब लाइटहाउस 10.1.1 पर काम करता है, जिसमें एक खास बदलाव 10.1.0 में किया गया है. यूआरएल से जुड़े सभी ऑडिट अब इकाई के हिसाब से और एग्रीगेट संख्या वाले आंकड़ों, जैसे कि साइज़ या अवधि के आधार पर ग्रुप किए जाते हैं. लोकप्रिय तीसरे पक्षों को भी उनकी कैटगरी के साथ टैग किया जाता है, ताकि पेज पर उनके मकसद को पहचानना आसान हो.

DevTools में Lighthouse पैनल का इस्तेमाल करने के बारे में बुनियादी जानकारी पाने के लिए, Lighthouse: वेबसाइट की स्पीड ऑप्टिमाइज़ करें लेख पढ़ें.

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

परफ़ॉर्मेंस को बेहतर बनाने के लिए किए गए बदलाव

performance.mark(), परफ़ॉर्मेंस में कर्सर घुमाने पर दिखने वाला समय दिखाता है > समय

परफ़ॉर्मेंस.मार्क() वाला तरीका, अब परफ़ॉर्मेंस > समय. यहां दिया गया समय, पिछले नेविगेशन इवेंट के टाइमस्टैंप का है.

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

profile() कमांड से, परफ़ॉर्मेंस का डेटा जनरेट होता है > मुख्य नंबर

कंसोल में मौजूद profile() और profileEnd() कमांड, अब परफ़ॉर्मेंस पैनल के मुख्य थ्रेड में सीपीयू प्रोफ़ाइलिंग को शुरू और बंद करते हैं.

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

धीमे उपयोगकर्ता इंटरैक्शन के लिए चेतावनी

उपयोगकर्ता के ऐसे इंटरैक्शन जो 200 मिलीसेकंड से ज़्यादा लंबे हैं उन्हें परफ़ॉर्मेंस पेज पर इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) की चेतावनी मिलती है > खास जानकारी टैब.

इसके अलावा, इंटरैक्शन के आईडी को टूलटिप से खास जानकारी में भेज दिया गया है.

Chromium से जुड़ी समस्याएं: 1432512, 1432509.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले ट्रैक को दूसरी जगह ले जाया गया

परफ़ॉर्मेंस पैनल से ये ट्रैक हटा दिए गए हैं:

• वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाला ट्रैक. इसके बजाय, कर्सर घुमाने पर, समय ट्रैक में काम का समय देखें.
• लंबे टास्क का सबट्रैक. ऐसे टास्क, मुख्य ट्रैक में पहले से ही मौजूद हो सकते हैं. इसे लाल और लाल त्रिभुज से शेड किया गया होगा.

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

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के बारे में ज़्यादा जानें.

JavaScript प्रोफ़ाइलर का इस्तेमाल बंद करना: तीसरा चरण

Chrome 58 के बाद से, DevTools टीम ने JavaScript प्रोफ़ाइलर को बंद करने की योजना बनाई है. साथ ही, उन्होंने JavaScript सीपीयू की परफ़ॉर्मेंस की प्रोफ़ाइल बनाने के लिए, Node.js और Deno डेवलपर को परफ़ॉर्मेंस पैनल का इस्तेमाल करने के लिए कहा है.

DevTools वर्शन 114, चार चरणों वाले JavaScript प्रोफ़ाइलर को बंद करने के तीसरे चरण से शुरू करता है. इस चरण के दौरान, DevTools से JavaScript प्रोफ़ाइलर पैनल हटा दिया जाता है. हालांकि, सेटिंग > में जाकर, इसे कुछ समय के लिए चालू किया जा सकता है एक्सपेरिमेंट खोलें और इसे के तीन बिंदु वाले मेन्यू से खोलें.

सीपीयू की परफ़ॉर्मेंस का प्रोफ़ाइल बनाने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करें.

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

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

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

• कलर पिकर अब क्लिप किए जाने पर (1429271) के से बाहर HWB मान का पता लगाता है.
• सोर्स पैनल:
  • सोर्स मैप के लिए, JSON सिंटैक्स हाइलाइट करने की सुविधा चालू की गई (1385374).
  • "सोर्स मैप का पता चला" दिखाना बंद किया गया मैन्युअल रूप से सोर्स मैप को बंद (1423718) करने पर मिलने वाले मैसेज.
• कंसोल की मदद से, अब Ctrl + Ctrl की मदद से, अधूरे JavaScript एक्सप्रेशन का आकलन किया जा सकता है. साथ ही, सिंटैक्स की गड़बड़ियों का पता लगाया जा सकता है (1314700).
• ब्रेकपॉइंट में बदलाव करने वाले डायलॉग में अब 'बंद करें' बटन मौजूद है. इससे पहले, आपको Enter दबाना पड़ता था या डायलॉग बॉक्स (1412980) से फ़ोकस हटाना पड़ता था.

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

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

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

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

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

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

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