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

Kayce Basques

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

• किसी डीओएम नोड को हाइलाइट करने के लिए, लाइव एक्सप्रेशन पर कर्सर घुमाएं
• डीओएम नोड को ग्लोबल वैरिएबल के तौर पर सेव करना
• HAR इंपोर्ट और एक्सपोर्ट में, अब इंटिएटर और प्राथमिकता की जानकारी शामिल है
• मुख्य मेन्यू से कमांड मेन्यू को ऐक्सेस करना
• पिक्चर में पिक्चर मोड के ब्रेकपॉइंट
• (बोनस सलाह) किसी एलिमेंट के इवेंट ट्रिगर होने की जानकारी देखने के लिए, कंसोल में monitorEvents() चलाएं

आगे पढ़ें या इस पेज का वीडियो वर्शन देखें:

डीओएम नोड को हाइलाइट करने के लिए, लाइव एक्सप्रेशन पर कर्सर घुमाएं

जब कोई लाइव एक्सप्रेशन किसी DOM नोड का आकलन करता है, तो व्यूपोर्ट में उस नोड को हाइलाइट करने के लिए, लाइव एक्सप्रेशन के नतीजे पर कर्सर घुमाएं.

पहली इमेज. व्यूपोर्ट में मौजूद नोड को हाइलाइट करने के लिए, लाइव एक्सप्रेशन के नतीजे पर कर्सर घुमाना

डीओएम नोड को ग्लोबल वैरिएबल के तौर पर सेव करना

किसी DOM नोड को ग्लोबल वैरिएबल के तौर पर सेव करने के लिए, Console में कोई ऐसा एक्सप्रेशन चलाएं जो किसी नोड का आकलन करता हो. इसके बाद, नतीजे पर दायां क्लिक करें और ग्लोबल वैरिएबल के तौर पर सेव करें को चुनें.

दूसरी इमेज. Console में ग्लोबल वैरिएबल के तौर पर सेव करना

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

तीसरी इमेज. डीओएम ट्री में ग्लोबल वैरिएबल के तौर पर सेव करना

HAR इंपोर्ट और एक्सपोर्ट में, अब इंटिएटर और प्राथमिकता की जानकारी

अगर आपको साथ काम करने वाले लोगों के साथ नेटवर्क लॉग का विश्लेषण करना है, तो नेटवर्क अनुरोधों को HAR फ़ाइल में एक्सपोर्ट किया जा सकता है.

आठवीं इमेज. नेटवर्क अनुरोधों को HAR फ़ाइल में एक्सपोर्ट करना

फ़ाइल को नेटवर्क पैनल में वापस इंपोर्ट करने के लिए, उसे खींचें और छोड़ें.

HAR फ़ाइल एक्सपोर्ट करने पर, DevTools अब HAR फ़ाइल में, शुरू करने वाले व्यक्ति और प्राथमिकता की जानकारी शामिल करता है. जब HAR फ़ाइलों को वापस DevTools में इंपोर्ट किया जाता है, तो शुरू करने वाला और प्राथमिकता कॉलम में अब जानकारी अपने-आप भर जाती है.

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

नौवीं इमेज. शुरुआत करने वाला कॉलम

इसके अलावा, Shift को दबाकर रखें और किसी अनुरोध पर कर्सर घुमाएं. इससे, अनुरोध करने वाले व्यक्ति और उससे जुड़ी डिपेंडेंसी के बारे में पता चलता है.

10वीं इमेज. शुरू करने वाले और डिपेंडेंसी देखना

_priority फ़ील्ड से पता चलता है कि ब्राउज़र ने संसाधन को प्राथमिकता का कौनसा लेवल असाइन किया है. यह अनुरोध टेबल में प्राथमिकता कॉलम से मैप होता है, जो डिफ़ॉल्ट रूप से छिपा होता है.

11वीं इमेज. प्राथमिकता कॉलम

अनुरोधों की टेबल के हेडर पर राइट क्लिक करें और प्राथमिकता कॉलम दिखाने के लिए, प्राथमिकता चुनें.

इमेज 12. प्राथमिकता कॉलम को दिखाने का तरीका

मुख्य मेन्यू से कमांड मेन्यू ऐक्सेस करना

DevTools के पैनल, टैब, और सुविधाओं को तुरंत ऐक्सेस करने के लिए, कमांड मेन्यू का इस्तेमाल करें.

13वीं इमेज. कमांड मेन्यू

अब मेन्यू से कमांड मेन्यू खोला जा सकता है. मुख्य मेन्यू बटन पर क्लिक करें और कमांड चलाएं को चुनें.

इमेज 14. मुख्य मेन्यू से कमांड मेन्यू खोलना

पिक्चर में पिक्चर मोड के ब्रेकपॉइंट

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

इवेंट लिसनर के ब्रेकपॉइंट पैनल में enterpictureinpicture, leavepictureinpicture, और resize चेकबॉक्स चालू करें, ताकि इनमें से कोई भी पिक्चर में पिक्चर इवेंट ट्रिगर होने पर, वीडियो को रोका जा सके. DevTools, हैंडलर की पहली लाइन पर रुक जाता है.

16वीं इमेज. इवेंट लिसनर ब्रेकपॉइंट पैनल में पिक्चर में पिक्चर इवेंट

(बोनस सलाह) किसी एलिमेंट के इवेंट ट्रिगर होने की जानकारी देखने के लिए, कंसोल में monitorEvents() चलाएं

मान लें कि आपको किसी बटन पर फ़ोकस करने और R, E, D को दबाने के बाद, उसके चारों ओर लाल बॉर्डर जोड़ना है, लेकिन आपको नहीं पता कि किन इवेंट के लिए लिसनर जोड़ने हैं. Console में एलिमेंट के सभी इवेंट को लॉग करने के लिए, monitorEvents() का इस्तेमाल करें.

1. नोड का रेफ़रंस पाएं.

   

   17वीं इमेज. नोड का रेफ़रंस पाने के लिए, ग्लोबल वैरिएबल के तौर पर सेव करें का इस्तेमाल करना

2. monitorEvents() में पहले आर्ग्युमेंट के तौर पर नोड पास करें.

   

   18वीं इमेज. नोड को monitorEvents() पर भेजना

3. नोड के साथ इंटरैक्ट करें. DevTools, कंसोल में नोड के सभी इवेंट को लॉग करता है.

   

   19वीं इमेज. Console में मौजूद नोड के इवेंट

Console में इवेंट लॉग करना बंद करने के लिए, unmonitorEvents() को कॉल करें.

unmonitorEvents(temp1);

अगर आपको सिर्फ़ कुछ इवेंट या इवेंट के टाइप पर नज़र रखनी है, तो monitorEvents() के दूसरे आर्ग्युमेंट के तौर पर ऐरे पास करें:

monitorEvents(temp1, ['mouse', 'focus']);

mouse टाइप, DevTools को माउस से जुड़े सभी इवेंट को लॉग करने के लिए कहता है. जैसे, mousedown और click. इसके अलावा, key, touch, और control टाइप की फ़ाइलें भी इस्तेमाल की जा सकती हैं.

Console से कॉल किए जा सकने वाले अन्य काम के फ़ंक्शन के लिए, कमांड लाइन रेफ़रंस देखें.

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

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

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

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

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

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

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