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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

hwb() कलर फ़ंक्शन के साथ काम करता है

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

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

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

निजी प्रॉपर्टी को बेहतर तरीके से दिखाने की सुविधा

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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