इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Jecelyn Yeen

Recorder: चरण, पेज में फिर से चलाने, और संदर्भ मेन्यू के विकल्पों के तौर पर कॉपी करें

रिकॉर्डर पैनल में, कॉपी करने के नए विकल्प मौजूद हैं.

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

नए अपडेट के साथ, Recorder नेविगेशन चरण को अलग से दिखाता है. इन-पेज फिर से चलाने के लिए, राइट क्लिक करके उसे हटाया जा सकता है!

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

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

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

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

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

परफ़ॉर्मेंस पैनल में, फ़ंक्शन के नाम दिखने से पहले और बाद में वैल्यू दिखती है.

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

कम करने से पहले और बाद की फ़ाइलें दिखाएं.

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

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

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

कंसोल और सोर्स पैनल में मौजूद नए कीबोर्ड शॉर्टकट

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

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

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

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

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

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

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

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

अन्य हाइलाइट

इस रिलीज़ में ये कुछ अहम सुधार हैं:

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

[प्रयोग के तौर पर] ब्रेकपॉइंट मैनेज करने के लिए उपयोगकर्ता अनुभव को बेहतर बनाया गया है

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

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

यहां कुछ हाइलाइट दिए गए हैं:

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

आरएफ़सी (बंद है) में हुए सभी बदलावों की पूरी जानकारी पढ़ें और अपना सुझाव यहां दें.

फिर से डिज़ाइन करने से पहले और बाद में, ब्रेकपॉइंट पैनल दिखाएं.

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

[एक्सपेरिमेंट] अपने-आप जगह पर सुंदर प्रिंट

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

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

अपने-आप जगह आने से पहले और बाद में, कम से कम की गई फ़ाइल दिखाएं.

Chromium की समस्या: 1164184

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

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

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

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

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