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

Kayce Basques

Chrome 72 में Chrome DevTools में नई सुविधाएं और बड़े बदलाव शामिल हैं:

• परफ़ॉर्मेंस पैनल में परफ़ॉर्मेंस मेट्रिक को विज़ुअलाइज़ करें.
• डीओएम ट्री में टेक्स्ट नोड हाइलाइट करें.
• डीओएम ट्री से किसी डीओएम नोड का जेएस पाथ कॉपी करें.
• ऑडिट पैनल से जुड़े अपडेट. इनमें एक नई ऑडिट शामिल है, जो JS लाइब्रेरी और नए कीवर्ड का पता लगाती है. साथ ही, कमांड मेन्यू से ऑडिट पैनल को ऐक्सेस करने की सुविधा भी शामिल है.

इन रिलीज़ नोट का वीडियो वर्शन

परफ़ॉर्मेंस मेट्रिक देखना

अब DevTools, पेज लोड होने की प्रोसेस रिकॉर्ड करने के बाद, टाइमिंग सेक्शन में परफ़ॉर्मेंस मेट्रिक को मार्क करता है. जैसे, DOMContentLoaded और फ़र्स्ट मीनिंगफ़ुल पेंट.

पहली इमेज. टाइमिंग सेक्शन में फ़र्स्ट मीनिंगफ़ुल पेंट

टेक्स्ट नोड हाइलाइट करना

अब डीओएम ट्री में किसी टेक्स्ट नोड पर कर्सर घुमाने पर, DevTools उस टेक्स्ट नोड को व्यूपोर्ट में हाइलाइट करता है.

दूसरी इमेज. टेक्स्ट नोड को हाइलाइट करना

JS पाथ कॉपी करें

मान लें कि आपको एक ऑटोमेशन टेस्ट लिखना है. इसमें किसी नोड पर क्लिक करना है. इसके लिए, Puppeteer के page.click() फ़ंक्शन का इस्तेमाल किया जा सकता है. साथ ही, आपको उस डीओएम नोड का रेफ़रंस तुरंत चाहिए. आम तौर पर, यह तरीका अपनाया जाता है: Elements पैनल पर जाएं, DOM ट्री में मौजूद नोड पर राइट क्लिक करें, Copy > Copy selector चुनें, और फिर उस सीएसएस सिलेक्टर को document.querySelector() पर भेजें. हालांकि, अगर नोड शैडो DOM में है, तो यह तरीका काम नहीं करता. ऐसा इसलिए, क्योंकि सिलेक्टर शैडो ट्री के अंदर से पाथ देता है.

किसी DOM नोड का रेफ़रंस तुरंत पाने के लिए, उस पर राइट क्लिक करें. इसके बाद, कॉपी करें > JS पाथ कॉपी करें को चुनें. DevTools, आपके क्लिपबोर्ड पर एक document.querySelector() एक्सप्रेशन कॉपी करता है. यह एक्सप्रेशन, नोड की ओर इशारा करता है. ऊपर बताया गया है कि यह सुविधा, शैडो डीओएम के साथ काम करते समय खास तौर पर मददगार होती है. हालांकि, इसका इस्तेमाल किसी भी डीओएम नोड के लिए किया जा सकता है.

तीसरी इमेज. JS पाथ कॉपी करें

DevTools, नीचे दिए गए उदाहरण की तरह किसी एक्सप्रेशन को आपके क्लिपबोर्ड पर कॉपी करता है:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

ऑडिट पैनल से जुड़े अपडेट

ऑडिट पैनल अब Lighthouse 3.2 का इस्तेमाल कर रहा है. वर्शन 3.2 में, पहचानी गई JavaScript लाइब्रेरी नाम का एक नया ऑडिट शामिल है. इस ऑडिट में, उन JS लाइब्रेरी की सूची दी जाती है जिनकी पहचान Lighthouse ने पेज पर की है. आपको यह ऑडिट, अपनी रिपोर्ट में सबसे सही तरीके > पास किए गए ऑडिट में दिखेगा.

चौथी इमेज. पहचानी गई JavaScript लाइब्रेरी

इसके अलावा, अब कमांड मेन्यू से ऑडिट पैनल को ऐक्सेस किया जा सकता है. इसके लिए, Lighthouse या PWA टाइप करें.

पांचवीं इमेज. कमांड मेन्यू में lighthouse टाइप करना

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

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

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

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

• हमें सुझाव/राय देने या शिकायत करने के लिए, crbug.com पर जाएं. साथ ही, किसी सुविधा का अनुरोध करने के लिए भी इसी लिंक पर जाएं.
• DevTools में, more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी किसी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणी करें.

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

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