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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly को डीबग करने में सहायता

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

इस प्रयोग की मदद से, Wasm ऐप्लिकेशन में C और C++ कोड को डिबग किया जा सकता है. साथ ही, डिबग करने से जुड़ी सभी जानकारी भी उपलब्ध होती है:

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

डीबगर में रोका गया Wasm ऐप्लिकेशन.

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

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

Wasm ऐप्लिकेशन में, चरणों के व्यवहार को बेहतर बनाया गया

आगे बढ़ें. अपने ओरिजनल कोड में Step over का इस्तेमाल करने पर, अब डिसअसेम्बली (.wasm फ़ाइल) में रुकने की समस्या नहीं होती. पहले, यह वहां रुक जाता था.

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

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

नई सेटिंग, 'प्राथमिकताएं' में जाकर, 'सोर्स' में मिलती है.

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

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

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

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

एलिमेंट पैनल में हाइलाइट की गई और 'समस्याएं' पैनल से रिपोर्ट की गई, अपने-आप जानकारी भरने से जुड़ी समस्याएं.

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

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

Recorder में एसर्टमेंट

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

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

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

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

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

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

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

Lighthouse 10.1.1

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

इकाई के हिसाब से ग्रुप किए गए ऑडिट.

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

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

परफ़ॉर्मेंस को बेहतर बनाना

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

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

टाइमिंग सेक्शन में कर्सर घुमाने पर दिखने वाला पॉप-अप.

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

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

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

console() कमांड, परफ़ॉर्मेंस पैनल में प्रोफ़ाइल बनाता है.

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

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

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

INP चेतावनी.

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

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

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

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

वेब विटल्स और लंबे टास्क, दोनों ट्रैक में ऐसी जानकारी शामिल थी जो दूसरी जगह मौजूद थी. साथ ही, ये विकल्प, ज़्यादा सुविधाओं वाले विकल्पों की तुलना में इंटरैक्टिव नहीं थे. ज़्यादा सुविधाओं वाले विकल्पों पर क्लिक करने पर, ज़्यादा जानकारी मिलती है.

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

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

वेब विटल्स के बारे में ज़्यादा जानें.

JavaScript प्रोफ़ाइलर की सुविधा बंद होने की प्रक्रिया: तीसरा चरण

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

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

सेटिंग में जाकर, JavaScript प्रोफ़ाइलर चेकबॉक्स को चुनें. इसके बाद, एक्सपेरिमेंट पर जाएं.

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

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

अन्य हाइलाइट

इस रिलीज़ में, कुछ ऐसी समस्याएं ठीक की गई हैं जिन पर ध्यान देने की ज़रूरत है:

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

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

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

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

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

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

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