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

Recorder में सिलसिलेवार तरीके से वीडियो फिर से चलाएं

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

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

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

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

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

Recorder पैनल में, माउस ओवर इवेंट की सुविधा चालू की जा सकती है

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एलिमेंट पैनल में टॉप लेयर बैज

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

सोर्स मैप में सुधार

डीबग करने के अनुभव को बेहतर बनाने के लिए, सोर्स मैप में मौजूद कुछ गड़बड़ियां यहां दी गई हैं:

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

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

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

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

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

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

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

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

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

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

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

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