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

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

Jecelyn Yeen

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

रिकॉर्डर पैनल में, कॉपी करने के नए विकल्प.

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

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

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

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

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

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

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

परफ़ॉर्मेंस पैनल में फ़ंक्शन के नामों की तुलना करने से पहले और बाद में दिखाएं.

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

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

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

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

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

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

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

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

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

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

बेहतर JavaScript डीबगिंग

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

new.target एक मेटा-प्रॉपर्टी है, जिसकी मदद से यह पता लगाया जा सकता है कि किसी फ़ंक्शन या कंस्ट्रक्टर को नए ऑपरेटर का इस्तेमाल करके कॉल किया गया है या नहीं. अब कंसोल में 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 Canary, Dev या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. झलक दिखाने वाले इन चैनलों की मदद से, DevTools की नई सुविधाओं को ऐक्सेस किया जा सकता है और वेब प्लैटफ़ॉर्म के बेहतरीन एपीआई की जांच की जा सकती है. साथ ही, उपयोगकर्ताओं से पहले ही अपनी साइट की समस्याओं का पता लगाया जा सकता है!

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

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

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