इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Jecelyn Yeen

रिकॉर्ड किए गए यूज़र फ़्लो को JSON फ़ाइल के तौर पर इंपोर्ट और एक्सपोर्ट करना

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

उदाहरण के लिए, इस JSON फ़ाइल को डाउनलोड करें. इसे इंपोर्ट करने के बटन से इंपोर्ट किया जा सकता है और यूज़र फ़्लो फिर से देखा जा सकता है.

इसके अलावा, रिकॉर्डिंग को एक्सपोर्ट भी किया जा सकता है. यूज़र फ़्लो रिकॉर्ड करने के बाद, 'एक्सपोर्ट करें' बटन पर क्लिक करें. एक्सपोर्ट करने के तीन विकल्प हैं:

JSON फ़ाइल के तौर पर एक्सपोर्ट करें. रिकॉर्डिंग को JSON फ़ाइल के तौर पर डाउनलोड करें.
@puppeteer/replay Script के तौर पर एक्सपोर्ट करें. रिकॉर्डिंग को कठपुतली फिर से चलाने की स्क्रिप्ट के तौर पर डाउनलोड करें.
Puppeteer स्क्रिप्ट के तौर पर एक्सपोर्ट करें . रिकॉर्डिंग को Puppeteer स्क्रिप्ट के तौर पर डाउनलोड करें.

इन विकल्पों के बीच अंतर के बारे में ज़्यादा जानने के लिए, दस्तावेज़ देखें.

Recorder पैनल में एक्सपोर्ट करने के विकल्प

Chromium की समस्या: 1257499

स्टाइल पैनल में कैस्केड लेयर देखें

कैस्केड लेयर की मदद से, अपनी सीएसएस फ़ाइलों को बेहतर तरीके से कंट्रोल किया जा सकता है. इससे, स्टाइल के हिसाब से अलग-अलग सेटिंग में कोई टकराव नहीं होता. यह खास तौर पर बड़े कोडबेस, डिज़ाइन सिस्टम, और ऐप्लिकेशन में तीसरे पक्ष की स्टाइल को मैनेज करते समय काम आता है.

इस उदाहरण में, तीन कैस्केड लेयर दी गई हैं: page, component, और base. स्टाइल पैनल में, हर लेयर और उसकी स्टाइल को देखा जा सकता है.

लेयर का क्रम देखने के लिए, लेयर के नाम पर क्लिक करें. page लेयर की खासियत सबसे ज़्यादा है. इसलिए, box का बैकग्राउंड हरा है.

स्टाइल पैनल में कैस्केड लेयर देखें

Chromium की समस्या: 1240596

hwb() कलर फ़ंक्शन के लिए सहायता

अब DevTools में HWB कलर फ़ॉर्मैट को देखा जा सकता है और उसमें बदलाव किया जा सकता है.

स्टाइल पैनल में, Shift बटन को दबाकर रखें. इसके बाद, रंग का फ़ॉर्मैट बदलने के लिए किसी भी रंग की झलक पर क्लिक करें. HWB कलर फ़ॉर्मैट जोड़ा गया है.

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

hwb() कलर फ़ंक्शन

निजी प्रॉपर्टी के डिसप्ले में सुधार किया गया

DevTools अब निजी ऐक्सेसर का सही तरीके से आकलन करता है और उन्हें दिखाता है. इससे पहले, कंसोल और सोर्स पैनल में निजी ऐक्सेसर वाली क्लास को बड़ा नहीं किया जा सकता था.

कंसोल में मौजूद निजी प्रॉपर्टी के लिए

Chromium से जुड़ी समस्याएं: 1296855, https://crbug.com/1303407

अन्य हाइलाइट

इस रिलीज़ में ये कुछ अहम सुधार हैं:

बैक/फ़ॉरवर्ड कैश मेमोरी में, अब वह एक्सटेंशन आईडी दिखता है जिससे bfcache को ब्लॉक किया गया था.( 1284548)
अरे जैसे ऑब्जेक्ट, सीएसएस क्लास के नाम, map.get, और एचटीएमएल टैग के लिए, अपने-आप पूरा होने की सुविधा को ठीक किया गया. (1297101, 1297491, 1293807, 1296983)
शब्दों पर दो बार क्लिक करने और ऑटोकंप्लीट को पहले जैसा करने पर, गलत हाइलाइट ठीक किए गए. (1298437, 1298667)
सोर्स पैनल में, टिप्पणी करने का कीबोर्ड शॉर्टकट ठीक किया गया. (1296535)
सोर्स पैनल में, एक से ज़्यादा आइटम चुनने के लिए, Alt (विकल्प) बटन का इस्तेमाल करने की सुविधा फिर से चालू करें. (1304070)

[प्रयोग के तौर पर] लाइटहाउस पैनल में नया टाइमस्पैन और स्नैपशॉट मोड

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

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

हर मोड के इस्तेमाल के अलग-अलग उदाहरण, फ़ायदे, और सीमाएं हैं. ज़्यादा जानकारी के लिए, कृपया Lighthouse का दस्तावेज़ देखें.

लाइटहाउस पैनलहाउस में टाइमस्पैन और स्नैपशॉट मोड

Chromium की समस्या: 772558

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

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

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

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

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