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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• new.target एक मेटा-प्रॉपर्टी है. इससे यह पता चलता है कि नए ऑपरेटर का इस्तेमाल करके, किसी फ़ंक्शन या कंस्ट्रक्टर को कॉल किया गया था या नहीं. अब Console में new.target को लॉग किया जा सकता है, ताकि डीबग करने के दौरान इसकी वैल्यू देखी जा सके. पहले, new.target डालने पर गड़बड़ियां दिखती थीं.
• WeakRef ऑब्जेक्ट की मदद से, किसी दूसरे ऑब्जेक्ट का वेक रेफ़रंस रखा जा सकता है. ऐसा करने से, उस ऑब्जेक्ट को कचरे के तौर पर हटाने से नहीं रोका जाता. DevTools अब वैल्यू की इनलाइन झलक दिखाता है. साथ ही, डीबग करने के दौरान सीधे कंसोल में, कमज़ोर रेफ़रंस का आकलन करता है. पहले, इसे ठीक करने के लिए आपको उन पर साफ़ तौर पर “deref” कॉल करना पड़ता था.
• शेडो किए गए वैरिएबल के लिए, इनलाइन झलक को ठीक किया गया. पहले, डिसप्ले वैल्यू गलत थी.
• सोर्स पैनल में स्कोप पैनल में, 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 में more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणियां करें.

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

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