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

Jecelyn Yeen

WebSocket अनुरोधों को कम करना

नेटवर्क पैनल में अब वेब सॉकेट अनुरोधों को कम करने की सुविधा उपलब्ध है. इससे पहले, वेब सॉकेट अनुरोधों पर नेटवर्क थ्रॉटलिंग काम नहीं करती थी.

नेटवर्क पैनल खोलें. इसके बाद, वेब सॉकेट अनुरोध पर क्लिक करें और मैसेज ट्रांसफ़र देखने के लिए, मैसेज टैब खोलें. स्पीड कम करने के लिए, धीमा 3G चुनें.

WebSocket अनुरोधों को कम करना

Chromium से जुड़ी समस्या: 423246

ऐप्लिकेशन पैनल में नया Reporting API पैनल

अपने पेज पर जनरेट की गई रिपोर्ट और उनकी स्थिति पर नज़र रखने के लिए, नए Reporting API पैनल का इस्तेमाल करें.

Reporting API को इस तरह से डिज़ाइन किया गया है कि आप अपने पेज के सुरक्षा उल्लंघनों, काम न करने वाले एपीआई कॉल वगैरह की निगरानी कर सकें.

Reporting API का इस्तेमाल करने वाला कोई पेज खोलें. जैसे, डेमो पेज. ऐप्लिकेशन पैनल में, नीचे की ओर स्क्रोल करके बैकग्राउंड सेवाएं सेक्शन पर जाएं और Reporting API पैनल चुनें.

रिपोर्ट सेक्शन में, आपके पेज पर जनरेट हुई रिपोर्ट और उनकी स्थिति की सूची दिखती है. रिपोर्ट की जानकारी देखने के लिए, उस पर क्लिक करें.

एंडपॉइंट सेक्शन में, आपको Reporting-Endpoints हेडर में कॉन्फ़िगर किए गए सभी एंडपॉइंट की खास जानकारी मिलती है.

Reporting API पैनल

Chromium से जुड़ी समस्या: 1205856

सहायता टीम को तब तक इंतज़ार करना होगा, जब तक कि एलिमेंट, Recorder पैनल में दिखने/क्लिक करने लायक न हो जाए

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

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

Chromium से जुड़ी समस्या: 1257499

कंसोल की स्टाइल, फ़ॉर्मैटिंग, और फ़िल्टर करने की सुविधा को बेहतर बनाया गया है

ANSI escape कोड की मदद से, लॉग मैसेज को सही तरीके से स्टाइल करना

कंसोल मैसेज को सही तरीके से स्टाइल करने के लिए, अब एएनएसआई एस्केप सीक्वेंस का इस्तेमाल किया जा सकता है. पहले, DevTools कंसोल में ANSI एस्केप सीक्वेंस के लिए बहुत सीमित (और कुछ हद तक काम न करने वाला) सपोर्ट था.

Node.js डेवलपर, आम तौर पर ANSI एस्केप सीक्वेंस की मदद से लॉग मैसेज को रंग देते हैं. इसके लिए, वे chalk, colors, ansi-colors, kleur वगैरह जैसी स्टाइलिंग लाइब्रेरी का इस्तेमाल करते हैं.

इन बदलावों के बाद, DevTools का इस्तेमाल करके अपने Node.js ऐप्लिकेशन को आसानी से डीबग किया जा सकता है. साथ ही, सही रंग वाले कंसोल मैसेज भी देखे जा सकते हैं. इसे खुद देखने के लिए, यह डेमो खोलें!

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

कंसोल स्टाइल

Chromium से जुड़ी समस्याएं: 1282837, 1282076

%s, %d, %i, और %f फ़ॉर्मैट के लिए सही तरीके से काम करना

Console अब Console के स्टैंडर्ड में बताए गए तरीके से, %s, %d, %i, और %f टाइप के कन्वर्ज़न को सही तरीके से पूरा करता है. पहले, बातचीत के नतीजे अलग-अलग होते थे.

कंसोल मैसेज में फ़ॉर्मैट के लिए निर्देश देने वाले टैग का इस्तेमाल किया जा सकता है

Chromium से जुड़ी समस्याएं: 1277944, 1282076

कंसोल ग्रुप में बेहतर तरीके से दिखने वाला फ़िल्टर

Console मैसेज को फ़िल्टर करते समय, अब वह मैसेज तब दिखता है, जब उसका मैसेज कॉन्टेंट फ़िल्टर से मैच करता हो या ग्रुप (या पैरंट ग्रुप) का टाइटल फ़िल्टर से मैच करता हो. पहले, फ़िल्टर के बावजूद कंसोल ग्रुप का टाइटल दिखता था.

इसके अलावा, अगर कोई कंसोल मैसेज दिखता है, तो वह ग्रुप (या पैरंट ग्रुप) भी दिखता है जिससे वह मैसेज जुड़ा है.

कंसोल ग्रुप फ़िल्टर

Chromium से जुड़ी समस्या: 1068788

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

सोर्स मैप फ़ाइलों की मदद से Chrome एक्सटेंशन को डीबग करना

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

सोर्स मैप फ़ाइलों की मदद से Chrome एक्सटेंशन को डीबग करना

Chromium से जुड़ी समस्या: 212374

सोर्स पैनल में बेहतर सोर्स फ़ोल्डर ट्री

सोर्स पैनल में, सोर्स फ़ोल्डर ट्री को बेहतर बनाया गया है. अब फ़ोल्डर के स्ट्रक्चर और नाम (जैसे, “../”, “./” वगैरह) में कम गड़बड़ी होती है. हुड के तहत, यह सोर्स मैप में ऐब्सलूट सोर्स यूआरएल को नॉर्मलाइज़ करने का नतीजा है.

सोर्स पैनल में सोर्स फ़ोल्डर ट्री को बेहतर बनाया गया

Chromium से जुड़ी समस्या: 1284737

सोर्स पैनल में वर्कर की सोर्स फ़ाइलें दिखाएं

रिलेटिव SourceURL वाली वर्कर्स (जैसे, वेब वर्कर्स, सर्विस वर्कर्स) सोर्स फ़ाइलें अब सोर्स पैनल में दिखती हैं. पहले, वर्कर सोर्स फ़ाइलों को सही तरीके से मैनेज नहीं किया जाता था.

ALT_TEXT_HERE

Chromium से जुड़ी समस्या: 1277002

Chrome की अपने-आप डार्क थीम चालू होने की सुविधा से जुड़े अपडेट

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

इसके अलावा, गहरे रंग वाली थीम अपने-आप चालू होने की सुविधा चालू होने पर, prefers-color-scheme को एम्युलेट करें ड्रॉपडाउन बंद हो जाएगा और prefers-color-scheme: dark पर अपने-आप सेट हो जाएगा.

Chrome 96 में, Android पर गहरे रंग वाली थीम अपने-आप चालू होने की सुविधा के लिए ऑरिजिन ट्रायल की सुविधा जोड़ी गई है. इस सुविधा की मदद से, ब्राउज़र हल्के रंग वाली थीम वाली साइटों पर, अपने-आप जनरेट हुई गहरे रंग वाली थीम लागू करता है. ऐसा तब होता है, जब उपयोगकर्ता ने ऑपरेटिंग सिस्टम में गहरे रंग वाली थीम के लिए ऑप्ट इन किया हो.

अपने-आप चालू होने वाली गहरे रंग वाली थीम का एम्युलेट करना

Chromium से जुड़ी समस्या: 1243309

टच-फ़्रेंडली कलर-पिकर और स्प्लिट पैनल

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

यहां Google Pixelbook डिवाइस की टचस्क्रीन से कैप्चर किया गया एक उदाहरण दिया गया है.

Chromium से जुड़ी समस्याएं: 1284245, 1284995

अन्य हाइलाइट

इस रिलीज़ में, कुछ ऐसी समस्याएं ठीक की गई हैं जिन पर ध्यान देने की ज़रूरत है:

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

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

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

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

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

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

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