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

Jecelyn Yeen

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

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

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

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

रिकॉर्डर पैनल में, वीडियो को धीमी गति से चलाने के विकल्प

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

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

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

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

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

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

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

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

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

इस चेकबॉक्स की मदद से, फ़ाइलों को दो कैटगरी में बांटा जा सकता है, ताकि फ़ाइलों को तेज़ी से खोजा जा सके:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. खुद की गिनती की जा सकने वाली प्रॉपर्टी
2. ऐसी प्रॉपर्टी जिनकी गिनती नहीं की जा सकती
3. इनहेरिट की गई सूची वाली प्रॉपर्टी
4. इनहेरिट की गई ऐसी प्रॉपर्टी जिन्हें एनोटेट नहीं किया जा सकता

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

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

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

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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

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