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

Kayce Basques

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

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

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

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

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

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

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

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

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

या DOM ट्री में नोड पर राइट-क्लिक करें और ग्लोबल वैरिएबल के रूप में स्टोर करें चुनें.

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

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

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

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

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

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

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

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

आप को Shift दबाकर भी रख सकते हैं और अनुरोध पर माउस घुमाकर अनुरोध का और निर्भरता.

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

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

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

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

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

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

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

13वीं इमेज. निर्देश मेन्यू

अब आप मुख्य मेन्यू से निर्देश मेन्यू खोल सकते हैं. मुख्य मेन्यू पर क्लिक करें बटन पर क्लिक करें और Run command चुनें.

14वीं इमेज. मुख्य मेन्यू से निर्देश मेन्यू खोलना

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

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

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

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

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

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

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

   

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

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

   

   आकृति 18. नोड को monitorEvents() में पास किया जा रहा है

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

   

   इमेज 19. कंसोल में नोड के इवेंट

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

unmonitorEvents(temp1);

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

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

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

कंसोल से कॉल करने वाले दूसरे आसान फ़ंक्शन के बारे में जानने के लिए कमांड लाइन रेफ़रंस देखें.

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

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

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

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

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

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

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