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

Jecelyn Yeen

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

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

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

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

Chromium में मौजूद गड़बड़ी: 1352488

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

एक साथ काम नहीं करने वाले ऑपरेशन के लिए लिंक की गई स्टैक ट्रेस

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

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

// application.component.ts

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

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

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

एक साथ काम नहीं करने वाले ऑपरेशन के लिए लिंक की गई स्टैक ट्रेस

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

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

Chromium में मौजूद गड़बड़ी: 1334585

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

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

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

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

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

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

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

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

Chromium में मौजूद गड़बड़ी: 1323199

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

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

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

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

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

Chromium में मौजूद गड़बड़ी: 1352488

सोर्स पैनल में, अनदेखा की गई सूची में शामिल सोर्स छिपाए जा रहे हैं

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

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

सोर्स पैनल में, अनदेखा की गई सूची में शामिल सोर्स छिपाए जा रहे हैं

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

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

उदाहरण के लिए, 'अनदेखा करें' सूची में शामिल सोर्स छिपाएं सेटिंग चालू करें और तीन बिंदु वाले मेन्यू पर क्लिक करें. फ़ाइल खोलें को चुनें. बटन कॉम्पोनेंट खोजने के लिए, “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 कैनरी, डेवलपर या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. झलक दिखाने वाले इन चैनलों की मदद से, DevTools की नई सुविधाओं को ऐक्सेस किया जा सकता है. साथ ही, वेब प्लैटफ़ॉर्म के आधुनिक एपीआई को आज़माया जा सकता है. साथ ही, उपयोगकर्ताओं के उपलब्ध होने से पहले, अपनी साइट की समस्याओं का पता लगाया जा सकता है!

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

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

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

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