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

Jecelyn Yeen

फिर से लोड करने पर परफ़ॉर्मेंस पैनल मिटाया जा रहा है

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

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

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

Recorder से जुड़े अपडेट

Recorder में अपने यूज़र फ़्लो का कोड देखना और उसे हाइलाइट करना

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

बाईं ओर हर चरण पर कर्सर घुमाने पर, Recorder इससे जुड़े कोड को हाइलाइट करता है. इससे फ़्लो को ट्रैक करना आसान हो जाता है. ड्रॉपडाउन का इस्तेमाल करके कोड का फ़ॉर्मैट बदला जा सकता है. यह आपको नाइटवॉच टेस्ट स्क्रिप्ट जैसे फ़ॉर्मैट के बीच स्विच करने में मदद करता है.

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

रिकॉर्डिंग के लिए चुने गए विकल्पों को पसंद के मुताबिक बनाना

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

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

रिकॉर्डिंग के दौरान, यूज़र फ़्लो में बदलाव करें

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

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

ऑटोमैटिक इन-प्लेस प्रिटी प्रिंट

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

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

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

Vue, SCSS वगैरह के लिए बेहतर सिंटैक्स हाइलाइट और इनलाइन झलक

सोर्स पैनल की मदद से, बड़े पैमाने पर इस्तेमाल होने वाले कई फ़ाइल फ़ॉर्मैट के लिए सिंटैक्स हाइलाइट करने की प्रोसेस बेहतर हुई. इससे, कोड को आसानी से पढ़ने और इसकी बनावट को पहचानने में मदद मिली. इनमें Vue, JSX, Dart, LESS, SCSS, SASS, और इनलाइन सीएसएस शामिल हैं.

इसके अलावा, DevTools ने Vue, इनलाइन एचटीएमएल, और TSX के लिए इनलाइन झलक की सुविधा को भी बेहतर बनाया है. किसी वैरिएबल की वैल्यू की झलक देखने के लिए, उस पर कर्सर घुमाएं.

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

Chromium से जुड़ी समस्याएं: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 13834513, 1391}109}

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

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

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

• DevTools में रिग्रेशन की एक समस्या को ठीक कर दिया गया है, जिसकी वजह से इनलाइन स्क्रिप्ट में debugger स्टेटमेंट पर नहीं पहुंचा जा सका. (1385374)
• नई कंसोल सेटिंग, जो आपको console.trace() मैसेज को डिफ़ॉल्ट रूप से बड़ा या छोटा करने की सुविधा देती है. इसके लिए, सेटिंग में जाकर सेटिंग को टॉगल करें > प्राथमिकताएं > Console.trace() को डिफ़ॉल्ट रूप से बड़ा करें. (1139616)
• सोर्स पैनल में मौजूद स्निपेट पैनल, कंसोल की तरह ही बेहतर ऑटोकंप्लीट सुविधा के साथ काम करता है. (772949)

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

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

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

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

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

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

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