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

Kayce Basques

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

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

परफ़ॉर्मेंस मेट्रिक को विज़ुअलाइज़ करना

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

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

पहली इमेज. 'समय' सेक्शन में पहला सार्थक पेंट

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

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

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

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

JS पाथ कॉपी करना

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

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

JS पाथ कॉपी करना

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

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

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

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

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

पहचानी गई JavaScript लाइब्रेरी

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

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

कमांड मेन्यू में 'lighthouse' टाइप करना

पांचवी इमेज. निर्देश मेन्यू में lighthouse टाइप किया जा रहा है

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

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

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

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

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

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