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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

Chrome 78 में Console का स्क्रीनशॉट. इसमें दिखाया गया है कि let को फिर से डिक्लेयर नहीं किया जा सकता.

अब Console में, फिर से जानकारी देने की अनुमति है:

Chrome 80 में Console का स्क्रीनशॉट. इसमें दिखाया गया है कि let को फिर से डिक्लेयर किया जा सकता है.

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

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

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

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

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

'शुरू करने वाला' टैब में, अनुरोध शुरू करने वाली चेन

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

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

नेटवर्क पैनल में नेटवर्क गतिविधि लॉग करने के बाद, किसी संसाधन पर क्लिक करें. इसके बाद, Initiator टैब पर जाकर, उसका Request Initiator Chain देखें:

  • जांचे गए संसाधन को बोल्ड किया गया है. ऊपर दिए गए स्क्रीनशॉट में, 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

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

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

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

Chromium की समस्या #988253

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

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

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

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

Chromium की समस्या #993366

User-Agent की अपडेट की गई स्ट्रिंग

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

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

नेटवर्क की स्थिति बताने वाले टैब में मौजूद, उपयोगकर्ता एजेंट मेन्यू का स्क्रीनशॉट.

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

Chromium की समस्या #1029031

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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