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

Jecelyn Yeen

झलक देखने की सुविधा: सीएसएस की खास जानकारी वाला नया पैनल

अपने पेज पर सीएसएस में किए जा सकने वाले सुधारों का पता लगाने के लिए, सीएसएस की खास जानकारी वाले नए पैनल का इस्तेमाल करें. सीएसएस की खास जानकारी पैनल खोलें. इसके बाद, अपने पेज की सीएसएस की रिपोर्ट जनरेट करने के लिए, खास जानकारी कैप्चर करें पर क्लिक करें.

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

सीएसएस की खास जानकारी वाला पैनल, सिर्फ़ झलक के लिए उपलब्ध सुविधा है. हमारी टीम इस सुविधा पर लगातार काम कर रही है. इसे और बेहतर बनाने के लिए, हमें आपके सुझावों का इंतज़ार है.

सीएसएस की खास जानकारी वाले पैनल के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें.

सीएसएस की खास जानकारी वाला पैनल

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

सीएसएस की लंबाई में बदलाव करने और उसे कॉपी करने की सुविधा को पहले जैसा कर दिया गया है. साथ ही, इसे बेहतर बनाया गया है

लंबाई वाली सीएसएस प्रॉपर्टी के लिए, सीएसएस कॉपी करें और टेक्स्ट के तौर पर बदलाव करें की सुविधा फिर से उपलब्ध कराई गई है. पिछली रिलीज़ में ये अनुभव काम नहीं कर रहे हैं.

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

अगर आपको कोई समस्या मिलती है, तो कृपया goo.gle/length-feedback पर जाकर इसकी शिकायत करें.

इसे बंद करने के लिए, सेटिंग > एक्सपेरिमेंट > स्टाइल पैनल में सीएसएस की लंबाई तय करने वाले टूल चालू करें चेकबॉक्स पर जाएं.

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

टैब के अपडेट रेंडर किए जा रहे हैं

सीएसएस prefers-contrast मीडिया फ़ीचर को एम्युलेट करें

सीएसएस prefers-contrast मीडिया फ़ीचर को एम्युलेट करें

prefers-contrast मीडिया फ़ीचर का इस्तेमाल यह पता लगाने के लिए किया जाता है कि उपयोगकर्ता ने पेज पर ज़्यादा या कम कंट्रास्ट का अनुरोध किया है या नहीं.

निर्देश मेन्यू खोलें. इसके बाद, रेंडरिंग दिखाएं निर्देश चलाएं. इसके बाद, सीएसएस मीडिया फ़ीचर prefers-contrast को एम्युलेट करें ड्रॉपडाउन सेट करें.

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

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

DevTools का इस्तेमाल करके, गहरे रंग वाली थीम अपने-आप चालू होने की सुविधा को चालू करें. इससे आपको आसानी से यह पता चल जाएगा कि Chrome की गहरे रंग वाली थीम अपने-आप चालू होने की सुविधा चालू होने पर, आपका पेज कैसा दिखता है.

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

कमांड मेन्यू खोलें. इसके बाद, Show Rendering कमांड चलाएं. इसके बाद, Emulate auto dark mode ड्रॉपडाउन सेट करें.

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

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

स्टाइल पैनल में, एलान को JavaScript के तौर पर कॉपी करना

आपके लिए कॉन्टेक्स्ट मेन्यू में दो नए विकल्प जोड़े गए हैं. इनकी मदद से, सीएसएस के नियमों को JavaScript प्रॉपर्टी के तौर पर आसानी से कॉपी किया जा सकता है. ये शॉर्टकट विकल्प, खास तौर पर उन डेवलपर के लिए काम के हैं जो CSS-in-JS लाइब्रेरी के साथ काम कर रहे हैं.

स्टाइल पैनल में, किसी सीएसएस नियम पर राइट क्लिक करें. किसी एक नियम को कॉपी करने के लिए, एलान को JS के तौर पर कॉपी करें चुनें. सभी नियमों को कॉपी करने के लिए, सभी एलान को JS के तौर पर कॉपी करें चुनें.

उदाहरण के लिए, नीचे दिया गया कोड paddingLeft: '1.5rem' को क्लिपबोर्ड पर कॉपी करेगा.

एलान को JavaScript के तौर पर कॉपी करें

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

नेटवर्क पैनल में नया पेलोड टैब

अगर आपको पेलोड वाले नेटवर्क अनुरोध की जांच करनी है, तो नेटवर्क पैनल में मौजूद नए Payload टैब का इस्तेमाल करें. इससे पहले, पेलोड की जानकारी हेडर टैब में उपलब्ध होती थी.

नेटवर्क पैनल में पेलोड टैब

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

प्रॉपर्टी पैन में प्रॉपर्टी दिखाने की सुविधा को बेहतर बनाया गया है

प्रॉपर्टी पैनल में अब इंस्टेंस की सभी प्रॉपर्टी दिखाने के बजाय, सिर्फ़ काम की प्रॉपर्टी दिखती हैं. डीओएम प्रोटोटाइप और तरीकों को अब हटा दिया गया है.

Chrome 95 में, प्रॉपर्टी पैनल को बेहतर बनाया गया है. अब इससे, काम की प्रॉपर्टी को आसानी से ढूंढा जा सकता है.

प्रॉपर्टीज़ पैन में प्रॉपर्टी का डिसप्ले

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

Console के अपडेट

कंसोल में सीओआरएस से जुड़ी गड़बड़ियों को छिपाने का विकल्प

कंसोल में जाकर, सीओआरएस से जुड़ी गड़बड़ियां छिपाई जा सकती हैं. सीओआरएस से जुड़ी गड़बड़ियों की जानकारी अब 'समस्याएं' टैब में दिखती है. इसलिए, कंसोल में सीओआरएस से जुड़ी गड़बड़ियों को छिपाने से, गड़बड़ियों की संख्या कम हो सकती है.

कंसोल में, सेटिंग आइकॉन पर क्लिक करें. इसके बाद, कंसोल में सीओआरएस से जुड़ी गड़बड़ियां दिखाएं चेकबॉक्स से सही का निशान हटाएं.

कंसोल में सीओआरएस से जुड़ी गड़बड़ियों को छिपाने का विकल्प

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

Console में Intl ऑब्जेक्ट की झलक और आकलन की सुविधा

Intl ऑब्जेक्ट की झलक अब ठीक से दिखती है. साथ ही, Console में इनका तुरंत आकलन किया जाता है. इससे पहले, Intl ऑब्जेक्ट का आकलन तुरंत नहीं किया जाता था.

कंसोल में Intl ऑब्जेक्ट

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

एसिंक्रोनस स्टैक ट्रेस में एक जैसा डेटा होना

Console अब async फ़ंक्शन के लिए async स्टैक ट्रेस की रिपोर्ट करता है, ताकि अन्य एसिंक टास्क के साथ-साथ कॉल स्टैक में दिखने वाली जानकारी भी एक जैसी हो.

एक साथ काम नहीं करने वाली स्टैक ट्रेस

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

कंसोल साइडबार को बनाए रखना

कंसोल साइडबार की सुविधा हमेशा उपलब्ध रहेगी. हमने Chrome 94 में, Console के साइडबार को बंद करने का एलान किया था. साथ ही, डेवलपर से इस बारे में सुझाव/राय देने या शिकायत करने के लिए कहा था.

हमें अब सूचना से जुड़े काफ़ी सुझाव, राय या शिकायतें मिल गई हैं. इसलिए, हम साइडबार को हटाने के बजाय, उसे बेहतर बनाने पर काम करेंगे.

कंसोल साइडबार

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

ऐप्लिकेशन पैनल में ऐप्लिकेशन की कैश मेमोरी वाला पैन अब काम नहीं करता

ऐप्लिकेशन पैनल में मौजूद ऐप्लिकेशन कैश मेमोरी पैनल को अब हटा दिया गया है. ऐसा इसलिए किया गया है, क्योंकि Chrome और Chromium पर आधारित अन्य ब्राउज़र से AppCache के लिए सहायता सेवा हटा दी गई है.

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

[एक्सपेरिमेंट के तौर पर उपलब्ध] ऐप्लिकेशन पैनल में नया Reporting API पैनल

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

इस एक्सपेरिमेंट को चालू करने के बाद, अब ऐप्लिकेशन पैनल में मौजूद Reporting API के नए वर्शन के पैनल में, रिपोर्ट की स्थिति देखी जा सकती है.

कृपया ध्यान दें कि एंडपॉइंट सेक्शन पर अब भी काम चल रहा है. इसलिए, फ़िलहाल इसमें रिपोर्टिंग एंडपॉइंट नहीं दिख रहे हैं.

इस लेख में, Reporting API के बारे में ज़्यादा जानें.

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

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

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

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

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

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

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

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