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

Jecelyn Yeen

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

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

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

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

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

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

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

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

अब आप पेज लोड के अलावा अपनी वेबसाइट की परफ़ॉर्मेंस को मापने के लिए 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

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

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

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

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

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

इससे पहले, डेवलपर को इस दौरान किसी भी तरह की गड़बड़ी का सामना करना पड़ता है:

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

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

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

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

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

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

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

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

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

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

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