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

Sofia Emelianova
Sofia Emelianova

ऑटोमैटिक भरने की सुविधा वाला नया पैनल

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

इस डेमो पेज पर टेस्ट डेटा के साथ नया पैनल आज़माएं:

  1. प्रोफ़ाइल ऑटोमैटिक भरना में, फ़ॉर्म भरें ... में से किसी भी बटन पर क्लिक करें, फिर सबमिट करें पर क्लिक करें. इसके बाद, पता सेव करें? डायलॉग विंडो में सेव करें पर क्लिक करें और फ़ॉर्म वाले पेज पर वापस जाएं.
  2. DevTools खोलें और अपने-आप भरने वाला इवेंट ट्रिगर करें: कोई फ़ॉर्म फ़ील्ड चुनें और ड्रॉप-डाउन सूची से पता चुनें.

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

ऑटोमैटिक भरने की सुविधा वाला पैनल.

ज़्यादा जानने के लिए, फ़ॉर्म के बारे में जानें और ऑटोमैटिक भरने की सुविधा को देखें.

WebRTC के लिए नेटवर्क थ्रॉटलिंग को बेहतर बनाया गया

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

नए पैरामीटर ये हैं: पैकेट लॉस (प्रतिशत), पैकेट की सूची की लंबाई (पैकेट की संख्या), और check_box Packet Reordering फ़्लैग.

कस्टम थ्रॉटलिंग प्रोफ़ाइल में पैकेट से जुड़े नए विकल्प जोड़ने से पहले और बाद में.

WebRTC कनेक्शन को थ्रॉटल करने के लिए, सेटिंग सेटिंग > में जाकर कस्टम प्रोफ़ाइल में पैकेट से जुड़े पैरामीटर तय करें थ्रॉटलिंग करें और नेटवर्क पैनल में इसे चुनें.

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

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

ऐनिमेशन पैनल में स्क्रोल किए जाने वाले ऐनिमेशन काम करते हैं

ऐनिमेशन पैनल की मदद से अब स्क्रोल किए गए ऐनिमेशन की जांच की जा सकती है.

इस सुविधा को इस डेमो पेज पर आज़माएं. ऐनिमेशन पैनल खोलें और स्क्रोल करके चलने वाले ऐनिमेशन कैप्चर करने के लिए, पेज को फिर से लोड करें.

स्क्रोल की मदद से चलने वाले ऐनिमेशन का एक ग्रुप, जिस पर माउस का आइकॉन दिख रहा है.

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

एलिमेंट में सीएसएस नेस्टिंग की बेहतर सुविधा > शैलियां

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

ब्रेसेस में इंडेंट करने और नेस्ट किए गए स्टाइल जोड़ने से पहले और बाद का.

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

बेहतर परफ़ॉर्मेंस वाला पैनल

इस वर्शन से, परफ़ॉर्मेंस पैनल में कई सुधार किए गए हैं.

फ़्लेम चार्ट में फ़ंक्शन और उनके चिल्ड्रन छिपाएं

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

संदर्भ मेन्यू जोड़ने से पहले और बाद में, फ़ंक्शन और उनके चाइल्ड एंट्री को छिपाया जा सकता है.

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

शुरू करने वाले चुने गए लोगों से उनके शुरू किए गए इवेंट तक के ऐरो

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

चुने गए से शुरू किए गए इवेंट तक के ऐरो को पहले और बाद में और 'रीवील' के बजाय नाम वाले लिंक दिखाए गए.

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

Chromium से जुड़ी समस्याएं: 325604258, 325024819, 326055289.

लाइटहाउस 11.6.0

Lighthouse पैनल अब लाइटहाउस 11.6.0 पर चलता है. बदलावों की पूरी सूची देखें.

इनमें नए ऑप्ट-इन check_box_outline_blank JS सैंपलिंग सेटिंग को चालू किया गया है, जो ध्यान देने लायक हैं. यह सेटिंग डिफ़ॉल्ट रूप से बंद होती है.

ऑप्ट-इन JS सैंपलिंग सेटिंग जोड़ने से पहले और बाद में.

JS सैंपलिंग की सुविधा चालू करने से, परफ़ॉर्मेंस ट्रेस में ज़्यादा जानकारी वाले JavaScript कॉल स्टैक जुड़ जाते हैं. हालांकि, इससे रिपोर्ट जनरेट होने की प्रोसेस धीमी हो सकती है.

(बाएं) और (दाएं) JS सैंपलिंग के बिना परफ़ॉर्मेंस ट्रेस.

ट्रेस more_vert टूल मेन्यू > में उपलब्ध है Lighthouse रिपोर्ट जनरेट होने के बाद, थ्रॉटल नहीं किया गया ट्रेस देखें.

DevTools में Lighthouse पैनल का इस्तेमाल करने के बारे में बुनियादी जानकारी पाने के लिए, Lighthouse: वेबसाइट की स्पीड ऑप्टिमाइज़ करें लेख पढ़ें.

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

मेमोरी में विशेष श्रेणियों के लिए टूलटिप > हीप स्नैपशॉट

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

ऑब्जेक्ट के खास ग्रुप की जानकारी देने वाला टूलटिप दिखाने से पहले और बाद में.

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

ऐप्लिकेशन > स्टोरेज से जुड़े अपडेट

इस वर्शन में ऐप्लिकेशन में कुछ अपडेट शामिल हैं > स्टोरेज.

शेयर किए गए स्टोरेज के लिए इस्तेमाल किए जाने वाले बाइट

ऐप्लिकेशन > डिवाइस का स्टोरेज > शेयर किया गया स्टोरेज सेक्शन में, अब आपको ऑरिजिन में इस्तेमाल किए गए बाइट की संख्या दिखेगी.

पहले और बाद में, यह दिखाया जाता है कि शेयर किए गए स्टोरेज के लिए कितनी बाइट इस्तेमाल की गई हैं.

शेयर किया गया स्टोरेज: आपको, निजता को बनाए रखने वाले कॉन्टेंट को पढ़ने का ऐक्सेस मिलता है. साथ ही, क्रॉस-साइट और अनलिमिटेड स्टोरेज का इस्तेमाल किया जा सकता है.

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

वेब एसक्यूएल की सुविधा पूरी तरह से काम नहीं करती है

Chrome ने Web SQL के वर्शन 119 को बंद कर दिया है. साथ ही, इस वर्शन में, काम न करने वाले ट्रायल टोकन को हटा दिया है. ऐसा इसलिए किया गया है, ताकि आप वेब एसक्यूएल का इस्तेमाल न कर पाएं.

इस सूट के बाद, DevTools ने ऐप्लिकेशन पैनल से वेब एसक्यूएल सेक्शन हटा दिया.

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

कवरेज पैनल में सुधार

इस वर्शन में कवरेज पैनल में कुछ अपडेट शामिल हैं:

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

चाइल्ड मेट्रिक से मेल खाने वाले आंकड़ों का सही तरीके से हिसाब लगाने से पहले और बाद का डेटा.

  • दृश्यता बढ़ाने के लिए उपयोग किए गए कोड का रंग अब हरे के बजाय धूसर हो गया है, विशेषकर हरे रंग की पहचान में कमी.

इस्तेमाल किए गए कोड का रंग बदलकर ग्रे करने से पहले और बाद में.

Chromium से जुड़ी समस्या: 41494198, 329253687.

हो सकता है कि लेयर पैनल के इस्तेमाल पर रोक लगा दी गई हो

कम इस्तेमाल की वजह से, लेयर पैनल जल्द ही बंद हो सकता है. अब पैनल में सबसे ऊपर चेतावनी वाला बैनर दिखेगा.

लेयर पैनल के सबसे ऊपर, चेतावनी वाला बैनर, जिसमें बंद होने की संभावना के बारे में बताया गया है.

इससे पहले कि टीम पैनल का बहिष्कार करने का आखिरी फ़ैसला ले, उससे पहले बेझिझक अपनी राय और समस्याएं शेयर करें.

JavaScript प्रोफ़ाइलर का इस्तेमाल बंद करना: चौथा चरण, आखिरी चरण

इस वर्शन में, JS प्रोफ़ाइलर पैनल को पूरी तरह से बंद कर दिया गया है. इसे अब फिर से चालू नहीं किया जा सकता.

सीपीयू की परफ़ॉर्मेंस का पता लगाने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करें.

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

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

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

  • नेटवर्क:
    • मल्टी-लाइन कुकी (325410304) को गलत तरीके से पार्स करने वाली गड़बड़ी को ठीक किया गया.
    • शुरू करने वाले कॉलम (327665602) में, कॉल स्टैक की झलक को ठीक कर दिया गया है.
  • परफ़ॉर्मेंस मॉनिटर: ट्रैक वाले चेकबॉक्स, अब बाकी यूज़र इंटरफ़ेस (यूआई) (1467464) की तरह ही काम करते हैं.
  • सोर्स: एक्सएचटीएमएल दस्तावेज़ों के लिए सिंटैक्स हाइलाइट करने की सुविधा (327940244).
  • सेटिंग > डिवाइस: पुराने Galaxy Fold को नए Galaxy Z Fold5 (40113439) से बदल दिया गया है.
  • परफ़ॉर्मेंस: Ctrl/Ctrl+Ctrl (1523279) का इस्तेमाल करके खोज करते समय, मेल खाने वाले सभी खोज नतीजे हाइलाइट किए जाते हैं.
  • डेवलपर के लिए संसाधन: अब भाषा एक्सटेंशन के ज़रिए लोड किए गए संसाधन भी दिखाए जाते हैं, जैसे कि C/C++ DevTools Support (DWARF) Chrome एक्सटेंशन (40746829).
  • परफ़ॉर्मेंस: खास जानकारी टैब (325314708) में काटे गए कॉल स्टैक और उसके खराब लेआउट को ठीक किया गया है.
  • ड्रॉर: close बंद करें के बटन पर अब फ़ोकस किया जा सकता है, ताकि कीबोर्ड का इस्तेमाल करके पैनल को बंद किया जा सके.

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

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

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

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

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

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

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