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

Kayce Basques

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

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

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

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

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

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

DOM नोड को ग्लोबल वैरिएबल के रूप में स्टोर करें

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

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

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

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

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

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

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

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

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

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

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

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

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

इनिशिएटर कॉलम.

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

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

शुरुआत करने वाले और डिपेंडेंसी देखना.

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

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

प्राथमिकता कॉलम.

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

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

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

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

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

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

कमांड मेन्यू.

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

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

मुख्य मेन्यू से कमांड मेन्यू खोल रही हूँ.

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

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

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

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

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

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

(बोनस टिप) किसी एलिमेंट के इवेंट को सक्रिय होने पर देखने के लिए, Console में Monitor Events() चलाएं

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

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

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

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

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

    monitorEvents() फ़ंक्शन में नोड पास करना.

    18वीं इमेज. नोड को monitorEvents() में पास किया जा रहा है

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

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

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

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

unmonitorEvents(temp1);

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

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

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

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

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

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

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

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

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

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