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

रिकॉर्डर में सिलसिलेवार तरीके से रिकॉर्डिंग फिर से चलाना

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

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

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

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

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

Recorder पैनल में माउस घुमाने पर होने वाले इवेंट की सुविधा

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एलिमेंट पैनल में सबसे ऊपर मौजूद लेयर का बैज

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@scope एट नियम, सीएसएस कैस्केडिंग और इनहेरिटेंस लेवल 6 स्पेसिफ़िकेशन का हिस्सा है. इन नियमों की मदद से, डेवलपर सीएसएस में स्टाइल नियमों का दायरा तय कर सकते हैं.

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

की मदद से वेब प्लैटफ़ॉर्म की एक्सपेरिमेंटल सुविधाएं फ़्लैग को चालू करें.

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

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

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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

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