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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

निजी प्रॉपर्टी के डिसप्ले को बेहतर बनाया गया

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

Console में निजी प्रॉपर्टी

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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

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

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

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

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

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

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