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

Jecelyn Yeen

रीफ़्रेश करने पर परफ़ॉर्मेंस पैनल खाली हो जाना

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

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

रीफ़्रेश करने पर, परफ़ॉर्मेंस पैनल खाली हो जाता है.

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

रिकॉर्डर से जुड़े अपडेट

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

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

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

रिकॉर्डर में कोड व्यू.

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

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

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

चुनने के लिए उपलब्ध टूल के टाइप को पसंद के मुताबिक बनाने का नया विकल्प.

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

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

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

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

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

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

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

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

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

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

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

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

Vue में सिंटैक्स हाइलाइटिंग.

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

Vue के लिए इनलाइन झलक.

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

SASS के लिए सोर्स मैप का लिंक.

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

Console में, काम के हिसाब से और एक जैसी ऑटोकंप्लीट सुविधा

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

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

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

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

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

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

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

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

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

अन्य हाइलाइट

इस रिलीज़ में, कुछ ऐसी समस्याएं ठीक की गई हैं जिन पर ध्यान देने की ज़रूरत है:

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

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

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

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

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

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

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