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

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

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

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

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

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

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

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

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

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

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

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

यह डेमो खोलें और 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

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

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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