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

Jecelyn Yeen

डीबग करने के दौरान फ़्रेम को रीस्टार्ट करना

फ़्रेम को रीस्टार्ट करें सुविधा वापस आ गई है! किसी फ़ंक्शन में कहीं भी रुकने पर, पिछले कोड को फिर से चलाया जा सकता है. पहले, स्थिरता से जुड़ी समस्याओं की वजह से, इस सुविधा को Chrome 92 में बंद कर दिया गया था और हटा दिया गया था.

इस उदाहरण में, डीबगर ने शुरुआत में ब्रेकपॉइंट (लाइन 343) पर रोक दिया था. यह ब्रेकपॉइंट, toggleColorScheme फ़ंक्शन के आखिर में मौजूद है. toggleColorScheme फ़ंक्शन की शुरुआत से डीबग करने की प्रोसेस को फिर से शुरू करने के लिए, डीबगर पैन में कॉल स्टैक सेक्शन को बड़ा करें. इसके बाद, toggleColorScheme पर राइट क्लिक करें और फ़्रेम रीस्टार्ट करें चुनें.

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

रिकॉर्डर पैनल में, धीरे-धीरे चलाने के विकल्प

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

Recorder पैनल खोलें और नई रिकॉर्डिंग शुरू करें. रिकॉर्डिंग पूरी होने के बाद, फिर से चलाएं ड्रॉप-डाउन बटन पर क्लिक करें. दोबारा चलाने के लिए, कोई स्पीड चुनें.

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

रिकॉर्डर पैनल के लिए एक्सटेंशन बनाना

अब अपनी पसंद के फ़ॉर्मैट में रीप्ले स्क्रिप्ट एक्सपोर्ट करने के लिए, Chrome एक्सटेंशन बनाया या इंस्टॉल किया जा सकता है. इसे बनाने का तरीका जानने के लिए, Recorder extension API से जुड़ा दस्तावेज़ देखें.

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

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

सोर्स पैनल में, 'लिखे गए / डिप्लॉय किए गए' के हिसाब से फ़ाइलों का ग्रुप बनाएं

सोर्स पैनल में अपनी फ़ाइलों को व्यवस्थित करने के लिए, लिखे गए / डिप्लॉय किए गए के हिसाब से फ़ाइलों का ग्रुप बनाएं विकल्प चालू करें. फ़्रेमवर्क (जैसे, React, Angular) की मदद से वेब ऐप्लिकेशन डेवलप करते समय, सोर्स फ़ाइलों को नेविगेट करना मुश्किल हो सकता है. ऐसा इसलिए होता है, क्योंकि बिल्ड टूल (जैसे, Webpack, Vite) से जनरेट की गई फ़ाइलें छोटी होती हैं.

इस चेकबॉक्स की मदद से, फ़ाइलों को दो कैटगरी में ग्रुप किया जा सकता है, ताकि उन्हें आसानी से ढूंढा जा सके:

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

इस React डेमो को खुद आज़माकर देखें!

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

परफ़ॉर्मेंस की अहम जानकारी देने वाले पैनल में, नए उपयोगकर्ता के लिए टाइमिंग ट्रैक करने की सुविधा

परफ़ॉर्मेंस की अहम जानकारी पैनल में मौजूद, नई उपयोगकर्ता के समय ट्रैक की मदद से, अपनी रिकॉर्डिंग में performance.measure() मार्क देखें.

उदाहरण के लिए, यह वेब पेज, टेक्स्ट लोड होने में लगे समय का हिसाब लगाने के लिए performance.measure() तरीके का इस्तेमाल करता है.

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

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

किसी एलिमेंट का असाइन किया गया स्लॉट दिखाएं

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

इस उदाहरण में, कुछ नाम वाले स्लॉट वाले कार्ड शामिल हैं. किसी कार्ड के person-occupation स्लॉट की जांच करें. इसके लिए, उसके बगल में मौजूद slot बैज पर क्लिक करें, ताकि आपको असाइन किया गया स्लॉट दिख सके.

जानें कि <template> और <slot> एलिमेंट का इस्तेमाल करके, एक ऐसा टेंप्लेट कैसे बनाया जा सकता है जिसे आसानी से बदला जा सके. इसके बाद, इस टेंप्लेट का इस्तेमाल करके, किसी वेब कॉम्पोनेंट के शैडो डीओएम को भरा जा सकता है.

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

परफ़ॉर्मेंस रिकॉर्डिंग के लिए, हार्डवेयर के एक साथ कई काम करने के लेवल का सिम्युलेट करें

परफ़ॉर्मेंस पैनल में मौजूद हार्डवेयर कंकरेंसी की नई सेटिंग की मदद से, डेवलपर navigator.hardwareConcurrency की रिपोर्ट की गई वैल्यू को कॉन्फ़िगर कर सकते हैं.

कुछ ऐप्लिकेशन, अपने ऐप्लिकेशन की पैरलल प्रोसेसिंग को कंट्रोल करने के लिए navigator.hardwareConcurrency का इस्तेमाल करते हैं. उदाहरण के लिए, Emscripten pthread पूल के साइज़ को कंट्रोल करने के लिए. इस सुविधा की मदद से डेवलपर, अलग-अलग कोर काउंट के साथ अपने ऐप्लिकेशन की परफ़ॉर्मेंस की जांच कर सकते हैं.

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

सीएसएस वैरिएबल को अपने-आप पूरा करते समय, रंग के अलावा अन्य वैल्यू की झलक देखें

सीएसएस वैरिएबल को अपने-आप पूरा करने की सुविधा का इस्तेमाल करते समय, DevTools अब रंग के अलावा अन्य वैरिएबल में काम की वैल्यू भरता है. इससे आपको यह देखने में मदद मिलती है कि वैल्यू में बदलाव करने से नोड पर किस तरह का बदलाव होगा.

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

बैक/फ़ॉरवर्ड कैश मेमोरी वाले पैनल में, ब्लॉक करने वाले फ़्रेम की पहचान करना

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

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

JavaScript ऑब्जेक्ट के लिए, अपने-आप पूरे होने वाले सुझावों को बेहतर बनाया गया

JavaScript ऑब्जेक्ट प्रॉपर्टी के लिए अपने-आप पूरा होने वाली सुविधा, अब इस क्रम के हिसाब से दिखती है:

1. गिनती की जा सकने वाली प्रॉपर्टी
2. गिनती न की जा सकने वाली प्रॉपर्टी
3. इन्यूमरेबल प्रॉपर्टी इनहेरिट की गई हैं
4. इनहेरिट की गई ऐसी प्रॉपर्टी जिन्हें गिना नहीं जा सकता

पहले, डेवलपर को काम की प्रॉपर्टी ढूंढने में मुश्किल होती थी. ऐसा इसलिए, क्योंकि सुझाव में सिर्फ़ अपनी प्रॉपर्टी को इनहेरिट की गई प्रॉपर्टी से ज़्यादा प्राथमिकता दी जाती थी. साथ ही, इनहेरिट की गई सभी प्रॉपर्टी को बराबर प्राथमिकता दी जाती थी.

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

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

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

• ब्रेकपॉइंट अब सोर्स यूआरएल एनोटेशन के साथ इनलाइन <script> में काम करते हैं.
• अब डीबगर, सोर्स मैप की मदद से स्कोप व्यू में ब्लॉक स्कोप वाले वैरिएबल को हल करता है.
• डीबगर अब सोर्स मैप के साथ स्कोप व्यू में, ऐरो फ़ंक्शन में मौजूद वैरिएबल को हल करता है.

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

अन्य हाइलाइट

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

• सोर्स पैनल के लिए, अपने-आप पूरा होने की सेटिंग ठीक की गई है. इससे पहले, सेटिंग बंद होने पर भी अपने-आप पूरा होने की सुविधा हमेशा चालू रहती थी. (1323286)
• ऐप्लिकेशन पैनल में मौजूद मेनिफ़ेस्ट टैब को अपडेट किया गया है, ताकि कलर स्कीम के नए फ़ॉर्मैट को पार्स किया जा सके. (1318305)
• परफ़ॉर्मेंस इनसाइट पैनल में, <script async> रेंडरिंग ब्लॉक करने से जुड़ी समस्याओं के लिए बेहतर सुझाव दिए गए हैं. इससे पहले, DevTools ने add async attribute to the script tag को सुझाव दिया था, जबकि स्क्रिप्ट को पहले ही एसिंक के तौर पर मार्क किया जा चुका है. (1334096)
• परफ़ॉर्मेंस की अहम जानकारी देने वाला पैनल अब लेआउट में बदलाव की संभावित वजहों के तौर पर, iframe का पता लगाता है. जानकारी पैनल में जाकर, iframe की जानकारी देखी जा सकती है. (1328873)
• कमांड मेन्यू में फ़ाइल खोलें विकल्प चुनने पर, अब सोर्स मैप से जनरेट की गई फ़ाइलों को ज़्यादा प्राथमिकता दी जाती है. इसलिए, वे एक ही नाम वाली डिप्लॉय की गई स्क्रिप्ट से ऊपर दिखती हैं. (1312929)

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

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

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

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

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

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

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