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

Kayce Basques

Console में let और class के लिए, फिर से एलान करने की सुविधा

Console अब let और class स्टेटमेंट को फिर से घोषित करने की सुविधा देता है. नए JavaScript कोड के साथ प्रयोग करने के लिए, Console का इस्तेमाल करने वाले वेब डेवलपर के लिए, फिर से एलान न कर पाना एक आम समस्या थी.

उदाहरण के लिए, पहले let के साथ किसी स्थानीय वैरिएबल को फिर से घोषित करने पर, Console में गड़बड़ी का मैसेज दिखता था:

Chrome 78 में Console का स्क्रीनशॉट, जिसमें दिखाया गया है कि let फ़ंक्शन को फिर से घोषित करने में समस्या आ रही है.

अब Console में, फिर से एलान करने की सुविधा उपलब्ध है:

Chrome 80 में Console का स्क्रीनशॉट, जिसमें दिख रहा है कि let फ़ंक्शन को फिर से घोषित करने की प्रोसेस पूरी हो गई है.

Chromium से जुड़ी समस्या #1004193

WebAssembly को डीबग करने की बेहतर सुविधा

DevTools में DWARF डीबगिंग स्टैंडर्ड का इस्तेमाल शुरू हो गया है. इसका मतलब है कि DevTools में, सोर्स भाषाओं में कोड को आगे बढ़ाने, ब्रेकपॉइंट सेट करने, और स्टैक ट्रेस को हल करने के लिए ज़्यादा सहायता मिलेगी. पूरी जानकारी के लिए, Chrome DevTools में बेहतर WebAssembly डीबगिंग लेख पढ़ें.

DWARF की मदद से काम करने वाली नई WebAssembly डीबगिंग की सुविधा का स्क्रीनशॉट.

नेटवर्क पैनल से जुड़े अपडेट

इनिशिएटर टैब में इनिशिएटर चेन का अनुरोध करना

अब नेटवर्क अनुरोध के इनिशिएटर और डिपेंडेंसी को नेस्ट की गई सूची के तौर पर देखा जा सकता है. इससे आपको यह समझने में मदद मिल सकती है कि किसी संसाधन का अनुरोध क्यों किया गया था या किसी संसाधन (जैसे, स्क्रिप्ट) की वजह से नेटवर्क पर कौनसी गतिविधि हुई.

इनिशिएटर टैब में, अनुरोध इनिशिएटर चेन का स्क्रीनशॉट

नेटवर्क पैनल में नेटवर्क गतिविधि को लॉग करने के बाद, किसी संसाधन पर क्लिक करें. इसके बाद, अनुरोध शुरू करने वाले की चेन देखने के लिए, शुरू करने वाला टैब पर जाएं:

  • जांच किए गए रिसॉर्स को बोल्ड किया गया है. ऊपर दिए गए स्क्रीनशॉट में, https://web.dev/default-627898b5.js जांच किया गया संसाधन है.
  • जांचे गए संसाधन के ऊपर मौजूद संसाधन, शुरुआत करने वाले होते हैं. ऊपर दिए गए स्क्रीनशॉट में, https://web.dev/bootstrap.js ने https://web.dev/default-627898b5.js को शुरू किया है. दूसरे शब्दों में, https://web.dev/bootstrap.js ने https://web.dev/default-627898b5.js के लिए नेटवर्क अनुरोध किया.
  • जांचे गए संसाधन के नीचे मौजूद संसाधन, डिपेंडेंसी हैं. ऊपर दिए गए स्क्रीनशॉट में, https://web.dev/chunk-f34f99f7.js, https://web.dev/default-627898b5.js की डिपेंडेंसी है. दूसरे शब्दों में, https://web.dev/default-627898b5.js ने https://web.dev/chunk-f34f99f7.js के लिए नेटवर्क का अनुरोध किया.

Chromium से जुड़ी समस्या #842488

खास जानकारी में, चुने गए नेटवर्क अनुरोध को हाइलाइट करना

किसी नेटवर्क रिसॉर्स की जांच करने के लिए उस पर क्लिक करने के बाद, नेटवर्क पैनल अब खास जानकारी में उस रिसॉर्स के चारों ओर नीला बॉर्डर लगा देता है. इससे आपको यह पता चल सकता है कि नेटवर्क अनुरोध, उम्मीद से पहले हो रहा है या बाद में.

खास जानकारी वाले पैनल का स्क्रीनशॉट, जिसमें जांचे गए संसाधन को हाइलाइट किया गया है.

Chromium से जुड़ी समस्या #988253

नेटवर्क पैनल में यूआरएल और पाथ कॉलम

हर नेटवर्क रिसॉर्स का पूरा पाथ या यूआरएल देखने के लिए, नेटवर्क पैनल में नए पाथ और यूआरएल कॉलम का इस्तेमाल करें.

नेटवर्क पैनल में नए पाथ और यूआरएल कॉलम का स्क्रीनशॉट.

नए कॉलम दिखाने के लिए, वॉटरफ़ॉल टेबल के हेडर पर दायां क्लिक करें और पाथ या यूआरएल चुनें.

Chromium से जुड़ी समस्या #993366

अपडेट की गई उपयोगकर्ता एजेंट स्ट्रिंग

DevTools में, नेटवर्क की स्थितियां टैब की मदद से, कस्टम उपयोगकर्ता एजेंट स्ट्रिंग सेट की जा सकती है. User-Agent स्ट्रिंग, नेटवर्क संसाधनों से जुड़े User-Agent एचटीटीपी हेडर और navigator.userAgent की वैल्यू पर असर डालती है.

आधुनिक ब्राउज़र वर्शन दिखाने के लिए, पहले से तय उपयोगकर्ता एजेंट स्ट्रिंग को अपडेट किया गया है.

'नेटवर्क की स्थिति' टैब में, यूज़र एजेंट मेन्यू का स्क्रीनशॉट.

नेटवर्क की स्थिति देखने के लिए, कमांड मेन्यू खोलें और Show Network Conditions कमांड चलाएं.

Chromium से जुड़ी समस्या #1029031

ऑडिट पैनल से जुड़े अपडेट

कॉन्फ़िगरेशन का नया यूज़र इंटरफ़ेस (यूआई)

कॉन्फ़िगरेशन यूज़र इंटरफ़ेस (यूआई) का नया और रिस्पॉन्सिव डिज़ाइन है. साथ ही, थ्रॉटलिंग कॉन्फ़िगरेशन के विकल्पों को आसान बनाया गया है. यूज़र इंटरफ़ेस (यूआई) में बदलावों को कम करने के बारे में ज़्यादा जानकारी के लिए, ऑडिट पैनल को कम करना देखें.

कॉन्फ़िगरेशन का नया यूज़र इंटरफ़ेस.

कवरेज टैब से जुड़े अपडेट

हर फ़ंक्शन या हर ब्लॉक के लिए कवरेज मोड

कवरेज टैब में एक नया ड्रॉपडाउन मेन्यू है. इसकी मदद से, यह तय किया जा सकता है कि कोड कवरेज का डेटा हर फ़ंक्शन या हर ब्लॉक के हिसाब से इकट्ठा किया जाए. हर ब्लॉक के हिसाब से कवरेज ज़्यादा जानकारी वाली होती है, लेकिन इसे इकट्ठा करना काफ़ी महंगा होता है. DevTools अब डिफ़ॉल्ट रूप से, हर फ़ंक्शन के लिए कवरेज का इस्तेमाल करता है.

कवरेज मोड का ड्रॉपडाउन मेन्यू.

कवरेज अब पेज को फिर से लोड करके शुरू किया जाना चाहिए

पेज को रीलोड किए बिना कोड कवरेज को टॉगल करने की सुविधा हटा दी गई है, क्योंकि कवरेज का डेटा भरोसेमंद नहीं था. उदाहरण के लिए, किसी फ़ंक्शन को इस्तेमाल न किए जाने के तौर पर रिपोर्ट किया जा सकता है. ऐसा तब होता है, जब फ़ंक्शन को बहुत समय पहले इस्तेमाल किया गया हो और V8 के गै़रबेज कलेक्टर ने उसे हटा दिया हो.

Chromium से जुड़ी समस्या #1004203

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

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

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

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

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

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