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

Jecelyn Yeen

रिकॉर्डर: चरणों के लिए 'इस तरह कॉपी करें' विकल्प, पेज पर फिर से चलाने की सुविधा, चरण का कॉन्टेक्स्ट मेन्यू

रिकॉर्डर में कोई मौजूदा यूज़र फ़्लो खोलें. इससे पहले, उपयोगकर्ता फ़्लो को फिर से चलाने पर, DevTools हमेशा पेज पर जाकर या उसे फिर से लोड करके, फिर से चलाना शुरू करता था.

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

इसके अलावा, पूरे उपयोगकर्ता फ़्लो को एक्सपोर्ट करने के बजाय, किसी चरण पर राइट क्लिक करके उसे *Recorder पैनल में क्लिपबोर्ड पर कॉपी किया जा सकता है. यह एक्सटेंशन के साथ भी काम करता है. उदाहरण के लिए, किसी चरण को Nightwatch Test स्क्रिप्ट के तौर पर कॉपी करने की कोशिश करें. इस सुविधा की मदद से, किसी भी मौजूदा स्क्रिप्ट को आसानी से अपडेट किया जा सकता है.

पहले, तीन बिंदु वाले बटन से ही चरण मेन्यू को ऐक्सेस किया जा सकता था. अब मेन्यू को ऐक्सेस करने के लिए, चरण पर कहीं भी राइट क्लिक किया जा सकता है.

Chromium से जुड़ी समस्याएं: 1322313, 1351649, 1322313, 1339767

परफ़ॉर्मेंस की रिकॉर्डिंग में फ़ंक्शन के असली नाम दिखाएं

अगर सोर्स मैप मौजूद है, तो परफ़ॉर्मेंस पैनल अब ट्रेस में फ़ंक्शन के असली नाम और उनके सोर्स दिखाता है.

इस उदाहरण में, प्रोडक्शन के दौरान सोर्स फ़ाइल को छोटा किया गया है. उदाहरण के लिए, इस डेमो में sayHi फ़ंक्शन को छोटा करके n और takeABreak फ़ंक्शन को छोटा करके o किया गया है.

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

हाल ही में हुए बदलावों के बाद, DevTools अब सोर्स मैप को पढ़ता है. साथ ही, फ़ंक्शन के असली नाम और सोर्स की जगह दिखाता है.

Chromium से जुड़ी समस्याएं: 1364601, 1364601

Console और Sources पैनल में कीबोर्ड के नए शॉर्टकट

सोर्स पैनल में टैब के बीच स्विच करने के लिए, इनका इस्तेमाल करें: MacOS पर, Function + Command + अप ऐरो और डाउन ऐरो Windows और Linux पर, Control + Page up या down

इसके अलावा, MacOS पर Emacs की तरह ही, Ctrl + N और Ctrl + P का इस्तेमाल करके, अपने-आप पूरे होने वाले सुझावों पर नेविगेट किया जा सकता है. उदाहरण के लिए, Console में window. टाइप करें और नेविगेट करने के लिए इन शॉर्टकट का इस्तेमाल करें.

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

Chromium से जुड़ी समस्या: 1167965, 1172535, 1371585. 1369503

JavaScript को डीबग करने की बेहतर सुविधा

इस रिलीज़ में, JavaScript डीबग करने से जुड़े कुछ सुधार किए गए हैं:

• new.target एक मेटा-प्रॉपर्टी है. इससे यह पता लगाया जा सकता है कि किसी फ़ंक्शन या कंस्ट्रक्टर को new ऑपरेटर का इस्तेमाल करके कॉल किया गया था या नहीं. अब डीबग करने के दौरान इसकी वैल्यू देखने के लिए, new.target को Console में लॉग किया जा सकता है. पहले, new.target डालने पर गड़बड़ियां दिखती थीं.
• WeakRef ऑब्जेक्ट की मदद से, किसी दूसरे ऑब्जेक्ट का कमज़ोर रेफ़रंस रखा जा सकता है. इससे उस ऑब्जेक्ट को गार्बेज-कलेक्ट होने से नहीं रोका जाता. DevTools अब वैल्यू के लिए इनलाइन झलक दिखाता है. साथ ही, डीबग करने के दौरान कंसोल में सीधे तौर पर वीक रेफ़रंस का आकलन करता है. पहले, इस समस्या को ठीक करने के लिए, आपको उन पर “deref” को साफ़ तौर पर कॉल करना पड़ता था.
• शेडो किए गए वैरिएबल के लिए, इनलाइन झलक को ठीक किया गया. पहले, डिसप्ले वैल्यू गलत थी.
• सोर्स पैनल में मौजूद स्कोप पैन में, Generator और async फ़ंक्शन में वैरिएबल के नामों को डीऑब्फ़स्केट करें.

Chromium से जुड़ी समस्याएं: 1267690, 1246863 1371322, 1311637

अन्य हाइलाइट

इस रिलीज़ में, इन समस्याओं को ठीक किया गया है:

• स्टाइल पैनल में, सीएसएस की उन प्रॉपर्टी के लिए ज़्यादा हिंट उपलब्ध कराए गए हैं जो काम नहीं कर रही हैं. जैसे, इनलाइन ऊंचाई और चौड़ाई, फ़्लेक्स, और ग्रिड प्रॉपर्टी. (1373597, 1178508, 1178508,1178508)
• सिंटैक्स हाइलाइट करने की सुविधा ठीक की गई. DevTools में हाल ही में कोड एडिटर को अपग्रेड किया गया था. इसके बाद से, यह सुविधा ठीक से काम नहीं कर रही थी. (1290182)
• Recorder में, on blur इवेंट के बाद इनपुट में हुए बदलावों से जुड़े इवेंट को सही तरीके से कैप्चर किया गया है. (1378488)
• Recorder में डीबग करने के बेहतर अनुभव के लिए, एक्सपोर्ट करने पर Puppeteer replay स्क्रिप्ट को अपडेट किया गया है. (1351649)
• रिमोट डीबगिंग के लिए, Recorder में रिकॉर्ड और रीप्ले करने की सुविधा उपलब्ध है. (1185727)
• var() में, सीएसएस के खास वैरिएबल के नामों को पार्स करने की समस्या ठीक की गई. इससे पहले, DevTools में var(--fo\ o) जैसे एस्केप्ड वर्णों वाले वैरिएबल को पार्स करने की सुविधा नहीं थी. , (1378992)

[एक्सपेरिमेंट के तौर पर उपलब्ध] ब्रेकपॉइंट मैनेज करने के लिए बेहतर यूज़र एक्सपीरियंस

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

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

यहां कुछ हाइलाइट दी गई हैं:

• रोकने के दोनों विकल्प, ब्रेकपॉइंट पैनल में मौजूद होते हैं. इनमें साफ़ तौर पर टेक्स्ट लेबल दिए गए हैं, जिनसे विकल्पों के बारे में आसानी से पता चलता है.
• ब्रेकपॉइंट को फ़ाइल के हिसाब से ग्रुप किया जाता है. साथ ही, इन्हें लाइन या कॉलम नंबर के हिसाब से क्रम में लगाया जाता है. इन्हें छोटा और बड़ा किया जा सकता है.**
• ब्रेकपॉइंट पैन में, ब्रेकपॉइंट या फ़ाइल के नाम पर कर्सर घुमाने पर, ब्रेकपॉइंट हटाने और उसमें बदलाव करने के नए विकल्प.

बदलावों के बारे में पूरी जानकारी पाने के लिए, RFC (बंद) पढ़ें. साथ ही, यहां अपने सुझाव/राय दें या शिकायत करें.

Chromium से जुड़ी समस्याएं: 1346231, 1324904

[एक्सपेरिमेंट के तौर पर उपलब्ध] अपने-आप प्रिटी प्रिंट होने की सुविधा

सोर्स पैनल अब छोटी की गई सोर्स फ़ाइलों को अपने-आप प्रिटी-प्रिंट करता है. इसे पहले जैसा करने के लिए, बेहतर फ़ॉर्मैट में प्रिंट करें बटन { } पर क्लिक करें.

इससे पहले, सोर्स पैनल में डिफ़ॉल्ट रूप से छोटा किया गया कॉन्टेंट दिखता था. कॉन्टेंट को फ़ॉर्मैट करने के लिए, आपको मैन्युअल तरीके से प्रीटी प्रिंट बटन पर क्लिक करना पड़ता था. इसके अलावा, सुंदर तरीके से प्रिंट किया गया कॉन्टेंट उसी फ़ाइल में नहीं, बल्कि दूसरे ::formatted टैब में दिखाया गया था.

Chromium से जुड़ी समस्या: 1164184

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

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

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

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

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

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

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