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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

Recorder में कोड व्यू.

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

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

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

सिलेक्टर के टाइप को पसंद के मुताबिक बनाने का नया विकल्प.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

कंसोल में, एर्गोनॉमिक और एक जैसे ऑटोकंप्लीट की सुविधा

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

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

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

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

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

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

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

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

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 में नया क्या है सीरीज़ में शामिल की गई सभी चीज़ों की सूची.