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

Jecelyn Yeen

WebSocket अनुरोधों को थ्रॉट करना

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

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

WebSocket अनुरोधों को थ्रॉट करना

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

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

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

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

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

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

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

रिपोर्टिंग एपीआई पैनल

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

रिकॉर्डर पैनल में एलिमेंट के दिखने या उस पर क्लिक करने की सुविधा मिलने तक इंतज़ार करें

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

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

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

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

एएनएसआई एस्केप कोड के साथ सही तरीके से स्टाइल लॉग मैसेज

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

आम तौर पर, Node.js डेवलपर एएनएसआई एस्केप सीक्वेंस के ज़रिए लॉग मैसेज को रंगीन बनाते हैं. ऐसा अक्सर चॉक, रंग, एंसी-कलर, kleur वगैरह जैसी स्टाइलिंग लाइब्रेरी की मदद से किया जाता है.

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

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

कंसोल स्टाइलिंग

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

%s, %d, %i, और %f फ़ॉर्मैट की खास जानकारी देने वाले डिवाइसों के साथ काम किया जा सकता है

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

कंसोल मैसेज में, सहायता के फ़ॉर्मैट की जानकारी देने वाले ऐप्लिकेशन

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ALT_TEXT_HERE

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

Chrome की ऑटो डार्क थीम में किए गए अपडेट

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

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

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 में नया क्या है सीरीज़ में शामिल की गई सभी चीज़ों की सूची.