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

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

Console में टॉप-लेवल await ऑपरेटर

Console में अब टॉप-लेवल await ऑपरेटर काम करते हैं.

Console में टॉप-लेवल await ऑपरेटर का इस्तेमाल करना

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

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

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

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

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

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

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

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

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

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

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

    नोड का उदाहरण

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

  2. कमांड मेन्यू खोलें.

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

    'नोड का स्क्रीनशॉट लें' निर्देश का नतीजा

    चौथी इमेज. Capture node screenshot कमांड का नतीजा

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

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

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

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

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

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

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

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

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

Console के नए फ़िल्टर

Console में अब नेगेटिव और यूआरएल फ़िल्टर की सुविधा उपलब्ध है.

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

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

फ़िल्टर किए जाने वाले तीन मैसेज का उदाहरण

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

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

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

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

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

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

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

यूआरएल फ़िल्टर करने का उदाहरण

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

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

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

HAR फ़ाइल इंपोर्ट करना

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

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

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

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

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

रिस्पॉन्सिव कैश मेमोरी को बेहतर तरीके से डीबग करना

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

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

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

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

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

Chrome 61 में कवरेज टैब का उदाहरण

10वीं इमेज. Chrome 61 में कवरेज टैब का उदाहरण. चौथी लाइन को इस्तेमाल किया गया के तौर पर मार्क किया गया है, फिर भी यह कभी भी लागू नहीं होती

Chrome 62 से, कवरेज टैब में अब यह जानकारी मिलती है कि किसी फ़ंक्शन में कौनसा कोड कॉल किया गया है.

Chrome 62 में कवरेज टैब का उदाहरण

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

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

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

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

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

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

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