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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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