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 अब प्राइवेट ऐक्सेसर का सही तरीके से आकलन करता है और उन्हें दिखाता है. पहले, Console और Sources पैनल में, प्राइवेट ऐक्सेसर वाली क्लास को बड़ा नहीं किया जा सकता था.

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

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

अन्य हाइलाइट

इस रिलीज़ में, इन समस्याओं को ठीक किया गया है:

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

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

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

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

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

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

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

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

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

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

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

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

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