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

Jecelyn Yeen

सीएसएस की लंबाई तय करने वाले नए टूल

DevTools ने सीएसएस में लंबाई अपडेट करने का एक आसान और सुविधाजनक तरीका जोड़ा है!

स्टाइल पैन में, लंबाई वाली किसी भी सीएसएस प्रॉपर्टी को ढूंढें. उदाहरण के लिए, height, padding.

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

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

हालांकि, यूनिट वैल्यू में अब भी टेक्स्ट के तौर पर बदलाव किया जा सकता है. इसके लिए, वैल्यू पर क्लिक करें और बदलाव करना शुरू करें.

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

'समस्याएं' टैब में गड़बड़ियां छिपाना

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

समस्याएं टैब में, उस समस्या पर कर्सर घुमाएं जिसे आपको छिपाना है. ज़्यादा विकल्प   ज़्यादा दिखाएँ   > इस तरह की समस्याएं छिपाएं पर क्लिक करें.

समस्याएं दिखाने वाला मेन्यू छिपाएं

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

छिपाई गई गड़बड़ियों का पैनल

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

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

DevTools, प्रॉपर्टी को बेहतर तरीके से दिखाने के लिए ये काम करता है:

  • Console, सोर्स पैनल, और प्रॉपर्टी पैन में, अपनी प्रॉपर्टी को हमेशा बोल्ड करें और उन्हें सबसे ऊपर रखें.
  • प्रॉपर्टी पैन में प्रॉपर्टी के डिसप्ले को फ़्लैट करें.

उदाहरण के लिए, नीचे दिया गया स्निपेट, URL ऑब्जेक्ट link बनाता है. इसमें दो प्रॉपर्टी होती हैं: user और access. साथ ही, यह इनहेरिट की गई प्रॉपर्टी search की वैल्यू को अपडेट करता है.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Console में लॉग link करके देखें. अब अपनी प्रॉपर्टी को बोल्ड किया गया है और उन्हें सबसे ऊपर रखा गया है. इन बदलावों से, कस्टम प्रॉपर्टी को पहचानना आसान हो जाता है. खास तौर पर, वेब एपीआई (जैसे, URL) के लिए, जिनमें कई इनहेरिट की गई प्रॉपर्टी होती हैं.

अपनी प्रॉपर्टी को बोल्ड किया जाता है और उन्हें सबसे ऊपर दिखाया जाता है

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

प्रॉपर्टी को फ़्लैट करना

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

Lighthouse पैनल में Lighthouse 8.4

Lighthouse पैनल अब Lighthouse 8.4 पर चल रहा है. Lighthouse अब यह पता लगाएगा कि क्या सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) एलिमेंट, लेज़ी लोड की गई इमेज थी. साथ ही, वह इसमें से loading एट्रिब्यूट हटाने का सुझाव देगा.

अपडेट के बारे में ज़्यादा जानकारी के लिए, Lighthouse 8.4 में नया क्या है लेख पढ़ें.

Lighthouse रिपोर्ट में लेज़ी लोड किए गए एलसीपी का ऑडिट

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

सोर्स पैनल में स्निपेट क्रम से लगाना

सोर्स पैनल में मौजूद स्निपेट पैनल में मौजूद स्निपेट को अब वर्णमाला के क्रम में लगाया गया है. इससे पहले, इसे क्रम से नहीं लगाया जाता था.

कमांड को तेज़ी से चलाने के लिए, स्निपेट सुविधा का इस्तेमाल करें. सलाह पाने के लिए, यह वीडियो देखें!

सोर्स पैनल में स्निपेट क्रम से लगाना

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

अनुवाद की गई रिलीज़ की जानकारी के नए लिंक और अनुवाद से जुड़ी गड़बड़ी की शिकायत करना

'नया क्या है' टैब में जाकर, अब DevTools के रिलीज़ नोट को छह अन्य भाषाओं में पढ़ा जा सकता है. ये भाषाएं हैं - रशियन, चाइनीज़, स्पैनिश, जैपनीज़, पॉर्चुगीज़, और कोरियन.

Chrome 94 से, DevTools में अपनी पसंदीदा भाषा सेट की जा सकती है. अगर आपको अनुवाद में कोई समस्या मिलती है, तो ज़्यादा विकल्प > सहायता > अनुवाद से जुड़ी गड़बड़ी की शिकायत करें पर जाकर, अनुवाद से जुड़ी समस्या की शिकायत करें. इससे हमें अनुवाद को बेहतर बनाने में मदद मिलेगी.

अनुवाद की गई रिलीज़ की जानकारी के नए लिंक और अनुवाद से जुड़ी गड़बड़ी की शिकायत करना

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

DevTools के कमांड मेन्यू के लिए बेहतर यूज़र इंटरफ़ेस (यूआई)

क्या आपको कमांड मेन्यू में कोई फ़ाइल ढूंढने में मुश्किल हुई? आपके लिए खुशखबरी है! कमांड मेन्यू के यूज़र इंटरफ़ेस को अब बेहतर बना दिया गया है!

Windows और Linux में, Control+P या MacOS में Command+P कीबोर्ड शॉर्टकट का इस्तेमाल करके, कोई फ़ाइल खोजने के लिए कमांड मेन्यू खोलें.

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

कमांड मेन्यू

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

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

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

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

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

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

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