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

Chrome 62 में, DevTools में नई सुविधाएं और बदलाव आने वाले हैं:

• कंसोल में टॉप-लेवल के await ऑपरेटर के लिए सहायता.
• व्यूपोर्ट के किसी हिस्से के स्क्रीनशॉट और खास एचटीएमएल नोड के स्क्रीनशॉट.
• सीएसएस ग्रिड हाइलाइट करना.
• ऑब्जेक्ट क्वेरी करने के लिए, नया Console एपीआई.
• कंसोल में, नेगेटिव फ़िल्टर और यूआरएल फ़िल्टर.
• नेटवर्क पैनल में हर बार इंपोर्ट करना.
• कैश मेमोरी में सेव किए गए ऐसे संसाधन जिनकी झलक देखी जा सकती है.
• कैश मेमोरी में सेव की गई जानकारी को बेहतर तरीके से डीबग करना.
• ब्लॉक-लेवल पर कोड का कवरेज.

कंसोल में टॉप-लेवल इंवेट ऑपरेटर

कंसोल में अब टॉप-लेवल के await ऑपरेटर इस्तेमाल किए जा सकते हैं.

पहली इमेज. कंसोल में टॉप लेवल await ऑपरेटर का इस्तेमाल करना

स्क्रीनशॉट लेने के नए वर्कफ़्लो

अब आप व्यूपोर्ट के एक हिस्से या किसी खास एचटीएमएल नोड का स्क्रीनशॉट ले सकते हैं.

व्यूपोर्ट के किसी हिस्से के स्क्रीनशॉट

अपने व्यूपोर्ट के किसी हिस्से का स्क्रीनशॉट लेने के लिए:

1. जांच करें पर क्लिक करें या दबाएं Command+Shift+C (Mac) या एलिमेंट मोड की जांच करने के लिए, Control+Shift+C (Windows, Linux) पर जाएं.
2. Command (Mac) या Control (Windows, Linux) को दबाकर रखें और वह व्यूपोर्ट जिसका आप स्क्रीनशॉट लेना चाहते हैं.
3. अपना माउस छोड़ दें. DevTools आपके चुने गए हिस्से का स्क्रीनशॉट डाउनलोड करता है.

दूसरी इमेज. व्यूपोर्ट के एक हिस्से का स्क्रीनशॉट लिया जा रहा है

खास एचटीएमएल नोड के स्क्रीनशॉट

किसी खास एचटीएमएल नोड का स्क्रीनशॉट लेने के लिए:

1. एलिमेंट पैनल में, कोई एलिमेंट चुनें.

   

   तीसरी इमेज. इस उदाहरण में, लक्ष्य नीले हेडर का स्क्रीनशॉट लेना है, जिसमें टेक्स्ट Tools. ध्यान दें कि यह नोड पहले से ही एलिमेंट पैनल

2. Command मेन्यू खोलें.

3. node टाइप करना शुरू करें और Capture node screenshot चुनें. DevTools इसका स्क्रीनशॉट डाउनलोड करता है: चुना गया नोड.

   

   चौथी इमेज. Capture node screenshot निर्देश का नतीजा

सीएसएस ग्रिड हाइलाइट करना

किसी एलिमेंट पर असर डालने वाली सीएसएस ग्रिड को देखने के लिए, इसके DOM ट्री में किसी एलिमेंट पर कर्सर घुमाएं एलिमेंट पैनल. हर ग्रिड आइटम के चारों ओर डैश वाला बॉर्डर दिखता है. यह केवल तब काम करता है जब चुने गए आइटम या उसके पैरंट ने उस पर display:grid लागू किया है.

पांचवी इमेज. सीएसएस ग्रिड को हाइलाइट करना

दो मिनट से भी कम समय में, सीएसएस ग्रिड की बुनियादी बातें जानने के लिए यह वीडियो देखें.

हीप ऑब्जेक्ट से क्वेरी करने के लिए एक नया एपीआई

कंसोल से queryObjects(Constructor) को कॉल करके, उन ऑब्जेक्ट का कलेक्शन दिखाएं जो को बताए गए कंस्ट्रक्टर की मदद से बनाया गया. उदाहरण के लिए:

• queryObjects(Promise). सभी प्रॉमिस दिखाता है.
• queryObjects(HTMLElement). सभी एचटीएमएल एलिमेंट दिखाता है.
• queryObjects(foo), जहां foo एक फ़ंक्शन का नाम है. वे सभी ऑब्जेक्ट लौटाता है जिन्हें इंस्टैंशिएट किया गया था new foo() के ज़रिए.

queryObjects() का स्कोप, कंसोल में फ़िलहाल चुना गया एक्ज़ीक्यूशन कॉन्टेक्स्ट है. यहां जाएं: लागू करने का कॉन्टेक्स्ट चुनना.

कंसोल के नए फ़िल्टर

कंसोल में अब नेगेटिव और यूआरएल फ़िल्टर काम करते हैं.

नेगेटिव फ़िल्टर

<text> वाले किसी भी कंसोल मैसेज को फ़िल्टर करने के लिए, फ़िल्टर बॉक्स में -<text> टाइप करें.

छठी इमेज. पहले स्टेटमेंट में, one, two, three, और four को कंसोल में लॉग किया जाता है. two अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है छिपा हुआ है, क्योंकि फ़िल्टर बॉक्स में -two डाला गया है

अगर <text> का पता चलता है, तो DevTools मैसेज को फ़िल्टर कर देगा:

• मैसेज टेक्स्ट में.
• उस फ़ाइल के नाम में जिससे मैसेज आया था.
• स्टैक ट्रेस टेक्स्ट में.

नेगेटिव फ़िल्टर -/[4-5]*ms/ जैसे रेगुलर एक्सप्रेशन के साथ भी काम करता है.

यूआरएल फ़िल्टर

जिस स्क्रिप्ट से जनरेट हुए हैं सिर्फ़ उसी स्क्रिप्ट को दिखाने के लिए फ़िल्टर बॉक्स में url:<text> टाइप करें यूआरएल में <text> शामिल है.

फ़िल्टर अस्पष्ट मिलान का उपयोग करता है. अगर <text>, यूआरएल में कहीं भी दिखता है, तो DevTools दिखाई देगा.

सातवीं इमेज. सिर्फ़ उन स्क्रिप्ट से आने वाले मैसेज दिखाने के लिए यूआरएल फ़िल्टर करने की सुविधा का इस्तेमाल करना जिनका यूआरएल hymn शामिल है. स्क्रिप्ट के नाम पर कर्सर घुमाकर, यह देखा जा सकता है कि होस्ट के नाम में यह टेक्स्ट शामिल है

नेटवर्क पैनल में HAR इंपोर्ट

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

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

ऐप्लिकेशन पैनल में, कैश मेमोरी के उन संसाधनों की झलक देखी जा सकती है जिनकी झलक देखी जा सकती है

टेबल के नीचे मौजूद उस संसाधन की झलक देखने के लिए, कैश मेमोरी टेबल में किसी पंक्ति पर क्लिक करें.

नौवीं इमेज. कैश मेमोरी में सेव किए गए संसाधन की झलक देखना

ज़्यादा रिस्पॉन्सिव कैश मेमोरी डीबग करना

Chrome 61 और इससे पहले के वर्शन में, कैश एपीआई की मदद से बनाई गई कैश मेमोरी को डीबग करना... आम तौर पर ऐसा होता है. इसके लिए उदाहरण के लिए, जब किसी पेज पर नई कैश मेमोरी बनती है, तो आपको पेज या DevTools को मैन्युअल तौर पर रीफ़्रेश करना होगा पर क्लिक करें.

Chrome 62 में, जब भी आप कुछ बनाते हैं, अपडेट करते हैं या कोई कैश मेमोरी या संसाधन मिटाएं. इसका उदाहरण देखने के लिए यह वीडियो देखें.

इसे आज़माने के लिए कैश मेमोरी का डेमो देखें.

ब्लॉक-लेवल पर कोड का कवरेज

Chrome 61 और उससे पहले के वर्शन के लिए, कवरेज टैब, फ़ंक्शन में मौजूद सभी कोड को इस्तेमाल किए गए कोड के तौर पर मार्क करता है. इसलिए, जब तक फ़ंक्शन को कॉल किया जाए.

आकृति 10. Chrome 61 में कवरेज टैब का उदाहरण. लाइन 4 को 'इस्तेमाल किया गया' के तौर पर मार्क किया गया है यह कभी काम नहीं करता

Chrome 62 और इसके बाद के वर्शन में, कवरेज टैब अब आपको बताता है कि फ़ंक्शन में मौजूद किस कोड को कॉल किया जाता है.

आकृति 11. Chrome 62 में, कवरेज टैब का उदाहरण. लाइन 4 को 'इस्तेमाल नहीं किया गया' के तौर पर मार्क किया गया है

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

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

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

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

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

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

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