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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

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

Wasm डीबग करने की सुविधा को आज़माने के लिए, C/C++ DevTools Support (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() method अब Performance > Timings में, उससे जुड़े मार्क पर कर्सर घुमाने पर उसकी टाइमिंग दिखाता है. यहां दिया गया समय, पिछले नेविगेशन इवेंट के हिसाब से टाइमस्टैंप होता है.

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

Chromium की समस्या: 1426762.

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

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

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

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

उपयोगकर्ता के इंटरैक्शन में ज़्यादा समय लगने की चेतावनी

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

आईएनपी से जुड़ी चेतावनी.

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

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

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

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

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

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

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

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

JavaScript Profiler बंद होना: तीसरा चरण

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

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

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

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

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

अन्य हाइलाइट

इस रिलीज़ में, इन समस्याओं को ठीक किया गया है:

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

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

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

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

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

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

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