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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

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

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

चुनिंदा एचटीएमएल नोड के स्क्रीनशॉट

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

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

    नोड का उदाहरण

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

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

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

    'नोड का स्क्रीनशॉट कैप्चर करें' कमांड का नतीजा

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

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

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

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

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

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

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

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

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

queryObjects() का स्कोप, कंसोल में अभी चुना गया एक्ज़ीक्यूशन कॉन्टेक्स्ट है. एक्ज़ीक्यूशन कॉन्टेक्स्ट चुनना लेख पढ़ें.

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

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

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

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

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

छठी इमेज. पहले स्टेटमेंट में, one, two, three, और four को Console में लॉग किया जाता है. 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 में कवरेज टैब का उदाहरण

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

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

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

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

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

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

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

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

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

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