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

Kayce Basques

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

इन प्रॉडक्ट की जानकारी का वीडियो वर्शन

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

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

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

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

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

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

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

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

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

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

किसी DOM नोड का संदर्भ तुरंत पाने के लिए, DOM नोड पर राइट क्लिक करें और कॉपी करें चुनें > JS कॉपी करें पाथ. DevTools आपके क्लिपबोर्ड पर एक document.querySelector() एक्सप्रेशन कॉपी करता है, जो नोड के लिए अलग-अलग हैं. जैसा कि ऊपर बताया गया है, यह खास तौर पर Shadow 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 टाइप किया जा रहा है

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

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

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

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

  • crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
  • ज़्यादा विकल्प   ज़्यादा दिखाएँ > का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें सहायता > DevTools में DevTools से जुड़ी समस्याओं की शिकायत करें.
  • @ChromeDevTools पर ट्वीट करें.
  • DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.

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

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