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

Jecelyn Yeen

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

रिकॉर्डर पैनल अब दो बार क्लिक करने और दायां क्लिक करने से जुड़े इवेंट कैप्चर कर सकता है.

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

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

Recorder ने इन इवेंट को कैसे कैप्चर किया, यह समझने के लिए चरणों को बड़ा करें:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एलिमेंट पैनल में पैनल का क्रम बदलना

अब अपनी पसंद के हिसाब से एलिमेंट पैनल में पैनल का क्रम बदला जा सकता है.

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

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

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

DevTools में अब ब्राउज़र के बाहर से रंग चुनने की सुविधा उपलब्ध है. पहले, ब्राउज़र में ही रंग चुना जा सकता था.

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

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

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

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

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

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

वर्चुअल ऑथेंटिकेटर के लिए, बड़े ब्लॉब को सपोर्ट करें

WebAuthn टैब में, वर्चुअल ऑथेंटिकेटर के लिए लार्ज ब्लॉब के साथ काम करता है चेकबॉक्स जोड़ा गया है.

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

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

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

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

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

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

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

पहले, डेवलपर को इन कामों के दौरान कभी-कभी गड़बड़ियां आती थीं:

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

डीबग करने के अनुभव को बेहतर बनाने के लिए, सोर्स मैप में मौजूद कुछ गड़बड़ियां यहां दी गई हैं:

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

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

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

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

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

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

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

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

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