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

Jecelyn Yeen

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

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

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

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

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

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

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

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

Recorder पैनल के लिए एक्सटेंशन बनाना

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

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

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

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

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

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

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

इस प्रतिक्रिया डेमो को खुद आज़माकर देखें!

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

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

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

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

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

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

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

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

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

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

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)
• परफ़ॉर्मेंस की अहम जानकारी पैनल, अब iframes को लेआउट शिफ़्ट की संभावित वजहों के तौर पर पहचानता है. ब्यौरा पैनल में iframe की जानकारी देखी जा सकती है. (1328873)
• कमांड मेन्यू में फ़ाइल खोलने पर, जनरेट की गई फ़ाइलों (सोर्स मैप से जनरेट की गई फ़ाइलें) की रैंक अब ऊपर होती है, ताकि वे मिलती-जुलती डिप्लॉय की गई स्क्रिप्ट के ऊपर दिखें. (1312929)

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

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

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

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

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

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

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