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

Jecelyn Yeen

सोर्स पैनल में, 'लिखे गए / डिप्लॉय किए गए' के हिसाब से फ़ाइलों का ग्रुप बनाएं

लिखे गए / डिप्लॉय किए गए के हिसाब से फ़ाइलों का ग्रुप बनाएं विकल्प अब तीन बिंदु वाले मेन्यू में दिखता है. पहले, यह सीधे तौर पर नेविगेशन पैन में दिखता था.

यह डेमो खोलें. अपने ओरिजनल सोर्स कोड (Authored) को सबसे पहले देखने और उन पर तेज़ी से नेविगेट करने के लिए, Authored / Deployed के हिसाब से फ़ाइलें ग्रुप करें सेटिंग चालू करें.

'लिखे गए / डिप्लॉय किए गए' के हिसाब से फ़ाइलों का ग्रुप बनाएं

Chromium की गड़बड़ी: 1352488

बेहतर स्टैक ट्रेस

एसिंक्रोनस ऑपरेशन के लिए लिंक किए गए स्टैक ट्रेस

जब कुछ कार्रवाइयों को एसिंक्रोनस तरीके से पूरा करने के लिए शेड्यूल किया जाता है, तो DevTools में मौजूद स्टैक ट्रेस अब कार्रवाई की “पूरी जानकारी” देते हैं. पहले, इससे सिर्फ़ कुछ जानकारी मिलती थी.

उदाहरण के लिए, यह डेमो खोलें और इंक्रीमेंट बटन पर क्लिक करें. Console में गड़बड़ी के मैसेज को बड़ा करें. हमारे सोर्स कोड में, ऑपरेशन में एक एसिंक timeout ऑपरेशन शामिल है.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

इससे पहले, स्टैक ट्रेस में सिर्फ़ टाइमआउट ऑपरेशन दिखता था. इसमें ऑपरेशन की “मूल वजह” नहीं बताई गई है.

नए बदलावों के साथ, DevTools अब दिखाता है कि ऑपरेशन, बटन कॉम्पोनेंट में मौजूद onClick इवेंट से शुरू होता है. इसके बाद, increment फ़ंक्शन और फिर टाइमआउट ऑपरेशन होता है.

एसिंक्रोनस ऑपरेशन के लिए लिंक किए गए स्टैक ट्रेस

DevTools ने पर्दे के पीछे, “एसिंक स्टैक टैगिंग” नाम की नई सुविधा लॉन्च की है. एसिंक कोड के दोनों हिस्सों को नए console.createTask() तरीके से लिंक करके, ऑपरेशन की पूरी जानकारी दी जा सकती है. ज़्यादा जानने के लिए, DevTools में मॉडर्न डीबगिंग देखें.

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

Chromium की गड़बड़ी: 1334585

Chrome की जानकारी में मौजूद, तीसरे पक्ष की स्क्रिप्ट को अपने-आप अनदेखा करने की सेटिंग चुनें

डीबग करने के दौरान, अपने कोड में मौजूद समस्याओं का पता तेज़ी से लगाएं. ऐसा इसलिए, क्योंकि DevTools अब तीसरे पक्ष की जानी-पहचानी स्क्रिप्ट को अनदेखा करने की सूची में अपने-आप जोड़ देता है.

इस डेमो को खोलें और इंक्रीमेंट बटन पर क्लिक करें. Console में गड़बड़ी के मैसेज को बड़ा करें. स्टैक ट्रेस में सिर्फ़ आपका कोड दिखता है. जैसे, app.component.ts button.component.ts. पूरी स्टैक ट्रेस देखने के लिए, ज़्यादा फ़्रेम दिखाएं पर क्लिक करें.

इससे पहले, स्टैक ट्रेस में तीसरे पक्ष की स्क्रिप्ट शामिल थीं. जैसे, zone.js और core.mjs. ये आपके सोर्स कोड नहीं हैं. इन्हें बंडलर (जैसे कि webpack) या फ़्रेमवर्क (जैसे कि Angular) जनरेट करते हैं. गड़बड़ी की मुख्य वजह का पता लगाने में ज़्यादा समय लगा.

स्टैक ट्रेस में, Chrome की जानकारी में मौजूद तीसरे पक्ष की स्क्रिप्ट को अपने-आप अनदेखा करने की सेटिंग चुनें

बैकग्राउंड में, DevTools, सोर्स मैप में मौजूद नई x_google_ignoreList प्रॉपर्टी के आधार पर, तीसरे पक्ष की स्क्रिप्ट को अनदेखा करता है. फ़्रेमवर्क और बंडलर को यह जानकारी देनी होगी. केस स्टडी: DevTools की मदद से Angular को बेहतर तरीके से डीबग करना देखें.

अगर आपको हमेशा पूरी स्टैक ट्रेस देखनी हैं, तो इस सेटिंग को बंद किया जा सकता है. इसके लिए, सेटिंग > अनदेखा करने की सूची > Chrome की जानकारी में मौजूद, तीसरे पक्ष की स्क्रिप्ट को अनदेखा करने की सूची में, अपने-आप जोड़ने की सेटिंग पर जाएं.

Chrome की जानकारी में मौजूद, तीसरे पक्ष की स्क्रिप्ट को अनदेखा करने की सूची में, अपने-आप जोड़ने की सेटिंग

Chromium की गड़बड़ी: 1323199

डीबग करने के दौरान बेहतर कॉल स्टैक

Chrome की जानकारी में मौजूद, तीसरे पक्ष की स्क्रिप्ट को अनदेखा करने की सूची में, अपने-आप जोड़ने की सेटिंग चालू होने पर, कॉल स्टैक में अब सिर्फ़ वे फ़्रेम दिखते हैं जो आपके कोड से जुड़े होते हैं.

इस डेमो को खोलें और app.component.ts में मौजूद increment() फ़ंक्शन पर ब्रेकपॉइंट सेट करें. ब्रेकपॉइंट को ट्रिगर करने के लिए, पेज पर मौजूद इंक्रीमेंट बटन पर क्लिक करें. कॉल स्टैक में, सिर्फ़ आपके कोड के फ़्रेम दिखते हैं. जैसे, app.component.ts और button.component.ts.

सभी फ़्रेम देखने के लिए, नज़रअंदाज़ किए जाने की सूची में शामिल फ़्रेम दिखाएं को चालू करें. इससे पहले, DevTools में सभी फ़्रेम डिफ़ॉल्ट रूप से दिखते थे.

डीबग करने के दौरान बेहतर कॉल स्टैक

Chromium की गड़बड़ी: 1352488

सोर्स पैनल में, 'अनदेखा करें' की सूची में शामिल सोर्स छिपाना

नेविगेशन पैनल में, काम की फ़ाइलें छिपाने के लिए 'अनदेखा करें' की सूची में शामिल सोर्स पैनल छिपाएं को चालू करें. इस तरह, सिर्फ़ अपने कोड पर फ़ोकस किया जा सकता है.

यह डेमो खोलें. सोर्स पैनल में. node_modules और webpack, तीसरे पक्ष की स्क्रिप्ट हैं. तीन बिंदु वाले मेन्यू पर क्लिक करें. इसके बाद, ignore-listed sources को छिपाएं को चुनें, ताकि उन्हें पैनल से छिपाया जा सके.

सोर्स पैनल में, 'अनदेखा करें' की सूची में शामिल सोर्स छिपाना

Chromium की गड़बड़ी: 1352488

इग्नोर की गई सूची में शामिल सोर्स छिपाएं सेटिंग की मदद से, कमांड मेन्यू में जाकर अपनी फ़ाइल को तेज़ी से ढूंढा जा सकता है. इससे पहले, कमांड मेन्यू में फ़ाइलें खोजने पर, तीसरे पक्ष की ऐसी फ़ाइलें दिखती थीं जो आपके काम की नहीं होती थीं.

उदाहरण के लिए, ignore-listed sources को छिपाएं सेटिंग चालू करें और तीन बिंदु वाले मेन्यू पर क्लिक करें. फ़ाइल खोलें को चुनें. बटन कॉम्पोनेंट खोजने के लिए, “ton” टाइप करें. पहले, नतीजों में node_modules की फ़ाइलें शामिल होती थीं. node_modules की एक फ़ाइल, पहले नतीजे के तौर पर भी दिखाई गई थी.

कमांड मेन्यू में, अनदेखा की गई फ़ाइलों को छिपाना

Chromium की गड़बड़ी: 1336604

परफ़ॉर्मेंस पैनल में इंटरैक्शन का नया ट्रैक

परफ़ॉर्मेंस पैनल में मौजूद, इंटरैक्शन के नए ट्रैक का इस्तेमाल करके, इंटरैक्शन को विज़ुअलाइज़ करें. साथ ही, रिस्पॉन्स मिलने में होने वाली संभावित समस्याओं को ट्रैक करें.

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

परफ़ॉर्मेंस पैनल में ट्रैक किए गए इंटरैक्शन

Chromium की गड़बड़ी: 1347390

परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाले पैनल में एलसीपी के समय का ब्रेकडाउन

परफ़ॉर्मेंस की अहम जानकारी पैनल में अब सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के समय का ब्रेकडाउन दिखता है. इस समय की जानकारी का इस्तेमाल करके, एलसीपी की परफ़ॉर्मेंस को बेहतर बनाने के अवसर को समझें और उसकी पहचान करें.

परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाले पैनल में एलसीपी के समय का ब्रेकडाउन

Chromium की गड़बड़ी: 1351735

रिकॉर्डर पैनल में रिकॉर्डिंग के लिए, डिफ़ॉल्ट नाम अपने-आप जनरेट करना

रिकॉर्डर पैनल अब नई रिकॉर्डिंग के लिए, अपने-आप नाम जनरेट करता है.

Recorder पैनल में रिकॉर्डिंग का डिफ़ॉल्ट नाम

Chromium की गड़बड़ी: 1351383

अन्य हाइलाइट

  • पहले, Recorder एक्सटेंशन, Recorder पैनल में कभी-कभी नहीं दिखते थे. (1351416)
  • स्टाइल पैनल में अब SVG <stop> एलिमेंट की stop-color प्रॉपर्टी के लिए, कलर पिकर दिखता है. (1351096)
  • परफ़ॉर्मेंस की अहम जानकारी पैनल में, लेआउट में बदलाव की संभावित मुख्य वजहों के तौर पर, लेआउट थ्रैशिंग करने वाली स्क्रिप्ट की पहचान करें. (1343019)
  • परफ़ॉर्मेंस के बारे में अहम जानकारी पैनल में, एलसीपी वेब फ़ॉन्ट के लिए क्रिटिकल पाथ दिखाएं. (1350390)

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

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

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

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

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

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