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

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

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

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

सीएसएस की खास जानकारी पैनल, सिर्फ़ झलक देखने की सुविधा है. हमारी टीम अब भी इस पर काम कर रही है. इसमें सुधार करने के लिए, हमें आपके सुझाव, शिकायत या राय का इंतज़ार है.

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

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

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

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

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

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

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

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

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

टैब के अपडेट रेंडर करना

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

सीएसएस प्राथमिकता-कंट्रास्ट मीडिया सुविधा को एम्युलेट करें

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

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

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

Chrome की ऑटो डार्क थीम सुविधा को एम्युलेट करें

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

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

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

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

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

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

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

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

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

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

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

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

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

नेटवर्क पैनल में मौजूद पेलोड टैब

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

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

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

Chrome 95 के प्रॉपर्टी पैनल में बेहतर बनाने की सुविधा की मदद से, अब काम की प्रॉपर्टी आसानी से ढूंढी जा सकती हैं.

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

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

Console से जुड़े अपडेट

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

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

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

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

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

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

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

Console में 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 पैनल

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

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

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

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

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

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

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