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

Kayce Basques

Chrome 71 में Chrome DevTools के लिए नई सुविधाएं और मुख्य बदलाव शामिल हैं:

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

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

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

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

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

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

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

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

इसके अलावा, डीओएम ट्री में मौजूद नोड पर राइट क्लिक करके, Store as global variable को चुनें.

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

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

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

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

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

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

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

नौवीं इमेज. इनीशिएटर कॉलम

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

दसवीं इमेज. इनीशिएटर और डिपेंडेंसी देखना

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

ग्यारहवीं इमेज. 'प्राथमिकता' कॉलम

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

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

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

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

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

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

चौथी इमेज. मुख्य मेन्यू से कमांड मेन्यू खोलना

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

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

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

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

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

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

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

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

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

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

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