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

Jecelyn Yeen

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

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

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

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

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

रिकॉर्डर में अपने उपयोगकर्ता फ़्लो का कोड देखना और हाइलाइट करना

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

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

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

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

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

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

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

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

Chromium की समस्या: 1381971

अपने-आप प्रिटी प्रिंट होने की सुविधा

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

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

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

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

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

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

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

Chromium से जुड़ी समस्याएं: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Console में सुझाव के अपने-आप पूरा होने की सुविधा, इस्तेमाल में आसान और एक जैसी है

DevTools में, अपने-आप पूरा होने की सुविधा को बेहतर बनाया गया है. इसके लिए, ये बदलाव किए गए हैं:

• Tab का इस्तेमाल हमेशा अपने-आप पूरा होने वाली सुविधा के लिए किया जाता है.
• Arrow right और Enter का व्यवहार, कॉन्टेक्स्ट के हिसाब से अलग-अलग होता है.
• टेक्स्ट एडिटर, Console, Sources, और Elements पैनल में, अपने-आप पूरा होने की सुविधा एक जैसी होती है

उदाहरण के लिए, कंसोल में cons टाइप करने पर, यह होता है:

• कंसोल में, अपने-आप पूरा होने वाले सुझावों की सूची दिखती है. सबसे ऊपर मौजूद विकल्प के चारों ओर हल्के रंग की डॉटेड बॉर्डर दिखती है. इससे पता चलता है कि नेविगेशन अभी शुरू नहीं हुआ है.

• Enter दबाने पर, Console लाइन को एक्ज़ीक्यूट करता है. इससे पहले, सबसे ऊपर दिए गए सुझाव के हिसाब से लाइन अपने-आप पूरी हो जाती थी. अपने-आप पूरा होने की सुविधा का इस्तेमाल करने के लिए, Tab या Arrow Right दबाएं.

• Arrow up और Arrow down शॉर्टकट का इस्तेमाल करके, सुझावों की सूची में नेविगेट करते समय, Console चुने गए विकल्प को हाइलाइट करता है.

• नेविगेशन के दौरान चुने गए विकल्प के साथ अपने-आप पूरा होने की सुविधा का इस्तेमाल करने के लिए, कीबोर्ड की Tab, Enter या Arrow Right कुंजियों का इस्तेमाल करें.

• कोड के बीच में बदलाव करते समय, जैसे कि जब कर्सर n और s के बीच में हो, तो अपने-आप पूरा होने वाली सुविधा के लिए Tab, लाइन को चलाने के लिए Enter, और कर्सर को आगे ले जाने के लिए Arrow Right का इस्तेमाल करें.

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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

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