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

Jecelyn Yeen

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

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

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

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

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

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

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

समस्याओं के टैब में समस्याएं छिपाना

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

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

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

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

छिपी हुई समस्याओं का पैनल

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

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

DevTools, प्रॉपर्टी के डिसप्ले को बेहतर बनाता है. इसके लिए, यह:

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

उदाहरण के लिए, नीचे दिया गया स्निपेट अपनी दो प्रॉपर्टी के साथ एक 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) के लिए.

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

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

प्रॉपर्टी फ़्लैट करें

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

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

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

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

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