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

Jecelyn Yeen

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

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

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

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

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

एसिंक्रोनस कार्रवाइयों के लिए लिंक किए गए स्टैक ट्रेस

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

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

// application.component.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

परफ़ॉर्मेंस की अहम जानकारी वाले पैनल में, एलसीपी टाइमिंग का ब्रेकडाउन

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

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

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

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

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

अन्य खास बातें

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

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

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

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

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

• crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
• ज़्यादा विकल्प   > का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें सहायता > DevTools में DevTools से जुड़ी समस्याओं की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.

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

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