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 में HWB कलर फ़ॉर्मैट देखा जा सकता है और उसमें बदलाव किया जा सकता है.

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

इसके अलावा, कलर पिकर में कलर फ़ॉर्मैट को 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 का दस्तावेज़ देखें.

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

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

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

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

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

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

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

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