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

अपने-आप भरने की सुविधा वाला नया पैनल

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

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

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

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

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

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

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

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

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

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

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

ऐनिमेशन पैनल में स्क्रोल-ड्रिवन ऐनिमेशन की सुविधा

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

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

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

Elements > Styles में सीएसएस नेस्टिंग के लिए बेहतर सहायता

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

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

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

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

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

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

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

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

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

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

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

Lighthouse 11.6.0

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

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

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

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

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

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

मेमोरी > हीप स्नैपशॉट में खास कैटगरी के लिए टूलटिप

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

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

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

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

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

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

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

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

Web SQL अब काम नहीं करता

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

इसी तरह, DevTools ने ऐप्लिकेशन पैनल से Web SQL सेक्शन को हटा दिया है.

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

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

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

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

• इस्तेमाल किए गए कोड का रंग अब हरा नहीं, बल्कि स्लेटी है. इससे कोड को बेहतर तरीके से देखा जा सकता है. खास तौर पर, उन लोगों के लिए जो हरे रंग की पहचान नहीं कर पाते.

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

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

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

टीम के फ़ैसले लेने से पहले, अपनी राय और समस्याएं शेयर करें.

JavaScript प्रोफ़ाइलर बंद होना: चौथा और आखिरी चरण

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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

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