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

Kayce Basques

Console में let और class में फिर से किए गए एलान के लिए सहायता

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

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

Chrome 78 में Console का एक स्क्रीनशॉट, जिसमें दिखाया गया है कि फिर से एलान करने की प्रोसेस पूरी नहीं हो सकी.

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

Chrome 80 में कंसोल का एक स्क्रीनशॉट, जिसमें दिखाया गया है कि फिर से एलान करने की प्रोसेस पूरी हो गई है.

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 एचटीटीपी हेडर पर असर डालती है. मान navigator.userAgent है.

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

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

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

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

ऑडिट पैनल के अपडेट

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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