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

Jecelyn Yeen

रिकॉर्डर पैनल में, डबल-क्लिक और राइट-क्लिक इवेंट कैप्चर करना

Recorder पैनल अब डबल-क्लिक और राइट-क्लिक इवेंट कैप्चर कर सकता है.

इस उदाहरण में, रिकॉर्डिंग शुरू करें और यह तरीका अपनाएं:

• कार्ड को बड़ा करने के लिए, उस पर दो बार क्लिक करें
• कार्ड पर राइट क्लिक करें और कॉन्टेक्स्ट मेन्यू से कोई कार्रवाई चुनें

Recorder ने इन इवेंट को कैसे कैप्चर किया, यह जानने के लिए, यह तरीका अपनाएं:

• दो बार क्लिक करने को type: doubleClick के तौर पर कैप्चर किया जाता है.
• राइट क्लिक इवेंट को type: click के तौर पर कैप्चर किया जाता है. हालांकि, button प्रॉपर्टी को secondary पर सेट किया जाता है. माउस के सामान्य क्लिक की button वैल्यू primary होती है.

Chromium से जुड़ी समस्याएं: 1300839, 1322879, 1299701, 1323688

Lighthouse पैनल में टाइमस्पैन और स्नैपशॉट मोड की नई सुविधा

अब Lighthouse का इस्तेमाल करके, पेज लोड होने के अलावा अपनी वेबसाइट की परफ़ॉर्मेंस का आकलन किया जा सकता है.

Lighthouse पैनल में अब यूज़र फ़्लो मेज़रमेंट के तीन मोड इस्तेमाल किए जा सकते हैं:

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

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

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

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

परफ़ॉर्मेंस की अहम जानकारी से जुड़े अपडेट

परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाले पैनल में ज़ूम करने की सुविधा को बेहतर बनाया गया है

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

कार्रवाई करने लायक अहम जानकारी पाने और पैनल की मदद से अपनी वेबसाइट की परफ़ॉर्मेंस को बेहतर बनाने का तरीका जानने के लिए, परफ़ॉर्मेंस की अहम जानकारी देखें.

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

परफ़ॉर्मेंस रिकॉर्डिंग मिटाने की पुष्टि करना

DevTools अब परफ़ॉर्मेंस रिकॉर्डिंग मिटाने से पहले, पुष्टि करने वाला डायलॉग दिखाता है.

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

Elements पैनल में मौजूद पैन का क्रम बदलना

अब अपनी पसंद के मुताबिक, तत्व पैनल में मौजूद पैन का क्रम बदला जा सकता है.

उदाहरण के लिए, जब किसी छोटी स्क्रीन पर DevTools खोला जाता है, तो सुलभता पैनल, ज़्यादा दिखाएं बटन के नीचे छिपा होता है. अगर आपको सुलभता से जुड़ी समस्याओं को बार-बार डीबग करना पड़ता है, तो अब आसानी से ऐक्सेस करने के लिए, इस पैनल को सबसे ऊपर ले जाएं.

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

ब्राउज़र के बाहर से कोई रंग चुनना

DevTools में अब ब्राउज़र के बाहर से भी कोई रंग चुना जा सकता है. पहले, सिर्फ़ ब्राउज़र में मौजूद रंगों में से कोई रंग चुना जा सकता था.

स्टाइल पैनल में, किसी भी रंग की झलक पर क्लिक करके कलर पिकर खोलें. आईड्रॉपर का इस्तेमाल करके, किसी भी जगह से रंग चुनें.

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

डीबग करने के दौरान, इनलाइन वैल्यू की बेहतर झलक

डीबगर अब इनलाइन वैल्यू की झलक सही तरीके से दिखाता है.

इस उदाहरण में, double फ़ंक्शन में एक इनपुट पैरामीटर a और एक वैरिएबल x है. return लाइन पर ब्रेकपॉइंट लगाएं और कोड चलाएं. इनलाइन झलक में, a और x वैल्यू सही तरीके से दिखती हैं. इससे पहले, डीबगर, इनलाइन प्रीव्यू में x वैल्यू नहीं दिखाता था.

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

वर्चुअल ऑथेंटिकेटर के लिए बड़े BLOB का इस्तेमाल करने की सुविधा

WebAuthn टैब में अब वर्चुअल ऑथेंटिकेटर के लिए, नया लार्ज BLOB के साथ काम करता है चेकबॉक्स मौजूद है.

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

Chromium की समस्या: 1321803

सोर्स पैनल में नए कीबोर्ड शॉर्टकट

सोर्स पैनल में, अब दो नए कीबोर्ड शॉर्टकट उपलब्ध हैं:

• Control / Command + Shift + Y दबाकर, बाईं ओर मौजूद नेविगेशन साइडबार को टॉगल करें
• Control / Command + Shift + H दबाकर, debugger साइडबार (दाईं ओर) को टॉगल करें

Chromium से जुड़ी समस्याएं: 1226363

सोर्स मैप में किए गए सुधार

पहले, डेवलपर को इन कामों के दौरान अचानक गड़बड़ी का सामना करना पड़ता था:

• Codepen के उदाहरण की मदद से डीबग करना
• Codepen के उदाहरण में, परफ़ॉर्मेंस से जुड़ी समस्याओं की सोर्स लोकेशन की पहचान करना
• React DevTools चालू होने पर, Component टैब मौजूद नहीं है

सोर्स मैप में कुछ सुधार किए गए हैं, ताकि डीबग करने का अनुभव बेहतर हो सके:

• इनलाइन स्क्रिप्ट और सोर्स लोकेशन के लिए, जगह और ऑफ़सेट के बीच सही मैपिंग
• फ़्रेम के टेक्स्ट की जगह की जानकारी के लिए फ़ॉलबैक जानकारी का इस्तेमाल करें
• फ़्रेम के यूआरएल के साथ मिलते-जुलते यूआरएल को ठीक से हल करें

Chromium से जुड़ी समस्याएं: 1319828, 1318635, 1305475

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

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

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

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

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

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

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