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

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

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

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

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

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

Chromium की समस्या #1029031

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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