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 में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.