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

Jecelyn Yeen

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

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

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

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

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

ऐप्लिकेशन पैनल में मौजूद, Reporting API का नया पैनल

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

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

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

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

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

Reporting API पैनल

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

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

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

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

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

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

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

कंसोल मैसेज को सही तरीके से स्टाइल करने के लिए, अब ANSI एस्केप सीक्वेंस का इस्तेमाल किया जा सकता है. पहले, 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 मैसेज को फ़िल्टर करते समय, अब वह मैसेज तब दिखता है, जब उसका मैसेज कॉन्टेंट फ़िल्टर से मैच करता हो या ग्रुप (या पैरंट ग्रुप) का टाइटल फ़िल्टर से मैच करता हो. पहले, फ़िल्टर के बावजूद कंसोल ग्रुप का टाइटल दिखता था.

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

console group filter

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

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

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

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

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