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

Jecelyn Yeen

Recorder में एक-एक करके रिकॉर्डिंग फिर से चलाना

अब रिकॉर्डर पैनल में, ब्रेकपॉइंट सेट किया जा सकता है. साथ ही, यूज़र फ़्लो को एक-एक करके फिर से चलाया जा सकता है.

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

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

ज़्यादा जानकारी के लिए, Recorder की सुविधाओं का रेफ़रंस देखें.

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

रिकॉर्डर पैनल में, माउस घुमाने पर इवेंट की जानकारी दिखाने की सुविधा

Recorder में अब रिकॉर्डिंग के दौरान, माउस को किसी आइटम पर ले जाने (होवर करने) वाले चरण को मैन्युअल तरीके से जोड़ा जा सकता है.

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

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

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

परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाले पैनल में सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी)

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

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

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

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

लेआउट में बदलाव की संभावित मुख्य वजहों के तौर पर, टेक्स्ट के फ़्लैश (एफ़ओआईटी, एफ़ओयूटी) की पहचान करना

परफ़ॉर्मेंस इनसाइट पैनल अब लेआउट में बदलाव की संभावित मुख्य वजहों के तौर पर, बिना स्टाइल वाले टेक्स्ट का फ़्लैश (एफ़ओयूटी) और अदृश्य टेक्स्ट का फ़्लैश (एफ़ओआईटी) का पता लगाता है.

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

लेआउट शिफ़्ट को रोकने की तकनीक जानने के लिए, WebFont को लोड और रेंडर करने की प्रोसेस को ऑप्टिमाइज़ करना लेख पढ़ें.

Chromium से जुड़ी समस्याएं: 1334628, 1328873

मेनिफ़ेस्ट पैन में प्रोटोकॉल हैंडलर

अब DevTools का इस्तेमाल करके, प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) के लिए यूआरएल प्रोटोकॉल हैंडलर रजिस्ट्रेशन की जांच की जा सकती है.

यूआरएल के प्रोटोकॉल हैंडलर के रजिस्ट्रेशन की सुविधा की मदद से, इंस्टॉल किए गए PWA ऐसे लिंक को हैंडल कर सकते हैं जो किसी खास प्रोटोकॉल (जैसे, magnet, web+example) का इस्तेमाल करते हैं. इससे बेहतर इंटिग्रेशन मिलता है.

ऐप्लिकेशन > मेनिफ़ेस्ट पैनल में जाकर, प्रोटोकॉल हैंडलर सेक्शन पर जाएं. यहां उपलब्ध सभी प्रोटोकॉल देखे जा सकते हैं और उनकी जांच की जा सकती है.

उदाहरण के लिए, यह डेमो पीडब्ल्यूए इंस्टॉल करें. प्रोटोकॉल हैंडलर सेक्शन में, “americano” टाइप करें. इसके बाद, PWA में कॉफ़ी पेज खोलने के लिए, प्रोटोकॉल की जांच करें पर क्लिक करें.

Chromium से जुड़ी समस्याएं: 1300613

एलिमेंट पैनल में सबसे ऊपर वाली लेयर का बैज

टॉप लेयर बैज का इस्तेमाल करके, टॉप लेयर के कॉन्सेप्ट को समझें. साथ ही, यह देखें कि टॉप लेयर का कॉन्टेंट कैसे बदलता है.

<dialog> एलिमेंट, हाल ही में सभी ब्राउज़र पर काम करने लगा है. डायलॉग खोलने पर, उसे टॉप लेयर में रखा जाता है. टॉप लेवल का कॉन्टेंट, अन्य सभी कॉन्टेंट के ऊपर रेंडर होता है.

इस डेमो में, डायलॉग बॉक्स खोलें पर क्लिक करें.

सबसे ऊपर की लेयर के एलिमेंट को विज़ुअलाइज़ करने में मदद करने के लिए, DevTools, डीओएम ट्री में सबसे ऊपर की लेयर वाला कंटेनर (#top-layer) जोड़ता है. यह क्लोज़िंग </html> टैग के बाद मौजूद होता है.

टॉप लेयर कंटेनर एलिमेंट से टॉप लेयर ट्री एलिमेंट पर जाने के लिए, टॉप लेयर कंटेनर में मौजूद एलिमेंट या उसके बैकड्रॉप के बगल में मौजूद, दिखाएं बटन पर क्लिक करें.

सबसे ऊपर मौजूद लेयर ट्री एलिमेंट (उदाहरण के लिए, डायलॉग एलिमेंट) के बगल में मौजूद, top-layer बैज पर क्लिक करके, सबसे ऊपर मौजूद लेयर कंटेनर पर जाएं.

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

रनटाइम के दौरान, Wasm को डीबग करने की जानकारी अटैच करें

अब रनटाइम के दौरान, Wasm के लिए DWARF डीबग करने की जानकारी अटैच की जा सकती है. पहले, सोर्स पैनल में सिर्फ़ JavaScript और Wasm फ़ाइलों के साथ सोर्स मैप अटैच किए जा सकते थे.

सोर्स पैनल में जाकर, कोई Wasm फ़ाइल खोलें. एडिटर में राइट क्लिक करें और Add DWARF debugging info… को चुनें. इससे, ज़रूरत के हिसाब से डीबग करने की जानकारी अटैच की जा सकती है.

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

डीबग करने के दौरान लाइव बदलाव करने की सुविधा

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

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

इस अपडेट के बाद, डीबगर इन पाबंदियों के साथ फ़ंक्शन को अपने-आप रीस्टार्ट कर देता है:

• वीडियो को रोकने के दौरान, सिर्फ़ सबसे ऊपर मौजूद फ़ंक्शन में बदलाव किया जा सकता है
• स्टैक में नीचे की ओर मौजूद उसी फ़ंक्शन पर कोई रिकर्सिव कॉल नहीं होना चाहिए

Chromium की समस्या: 1334484

स्टाइल पैनल में नियमों के लिए @scope देखना और उसमें बदलाव करना

अब स्टाइल पैन में जाकर, सीएसएस @scope ऐट-रूल देखे जा सकते हैं और उनमें बदलाव किया जा सकता है.

@scope at rules, CSS Cascading and Inheritance Level 6 specification का हिस्सा है. इन नियमों की मदद से डेवलपर, सीएसएस में स्टाइल के नियमों को स्कोप कर सकते हैं.

इस डेमो पेज को खोलें और <div class=”dark-theme”> एलिमेंट में मौजूद हाइपरलिंक की जांच करें. स्टाइल पैनल में, @scope ऐट-नियम देखें. नियम के एलान में बदलाव करने के लिए, उस पर क्लिक करें.

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

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

सोर्स मैप में कुछ सुधार किए गए हैं, ताकि डीबग करने का अनुभव बेहतर हो सके:

• DevTools अब विराम चिह्न वाले सोर्स मैप आइडेंटिफ़ायर को सही तरीके से हल करता है. कुछ आधुनिक मिनिफ़ायर (उदाहरण के लिए, esbuild) ऐसे सोर्स मैप बनाते हैं जो आइडेंटिफ़ायर को बाद के विराम चिह्न (कॉमा, पैरंटheses, सेमीकोलन) के साथ मर्ज करते हैं.
• DevTools अब super कॉल वाले कंस्ट्रक्टर के लिए, सोर्स मैप के नामों को हल करता है.
• डुप्लीकेट कैननिकल यूआरएल के लिए, सोर्स मैप यूआरएल इंडेक्स करने की समस्या ठीक की गई. इससे पहले, डुप्लीकेट कैननिकल यूआरएल की वजह से, कुछ फ़ाइलों में ब्रेकपॉइंट चालू नहीं होते थे.

Chromium से जुड़ी समस्या: 1335338, 1333411

अन्य हाइलाइट

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

• जब कोई लोकल स्टोरेज की वैल्यू मिटाई जाती है, तो उसे ऐप्लिकेशन > लोकल स्टोरेज पैनल में मौजूद टेबल से सही तरीके से हटाएं. (1339280)
• सोर्स पैनल में सीएसएस फ़ाइलें देखते समय, अब रंगों की झलकियां सही तरीके से दिखती हैं. इससे पहले, इनकी पोज़िशन गलत तरीके से सेट की गई थीं. (1340062)
• सीएसएस फ़्लेक्स और ग्रिड आइटम को लेआउट पैन में लगातार दिखाएं. साथ ही, उन्हें तत्व पैनल में बैज के तौर पर दिखाएं. इससे पहले, फ़्लेक्स और ग्रिड आइटम दोनों जगहों पर रैंडम तरीके से मौजूद नहीं थे. (1340441, 1273992)
• अगर DevTools को ऐसी स्क्रिप्ट मिलती है जिसकी वजह से फ़्रेम को विज्ञापन के तौर पर लेबल किया गया है, तो विज्ञापन फ़्रेम के लिए, क्रिएटर की विज्ञापन स्क्रिप्ट का नया लिंक उपलब्ध होता है. ऐप्लिकेशन > फ़्रेम में जाकर, कोई फ़्रेम खोला जा सकता है. (1217041)

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

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

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

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

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

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

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