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

Recorder, Firefox के लिए Puppeteer में एक्सपोर्ट करने की सुविधा देता है

WebDriver BiDi की सुविधा के तहत, Recorder पैनल अब रिकॉर्डिंग को Puppeteer for Firefox में एक्सपोर्ट कर सकता है. Puppeteer के साथ Firefox का इस्तेमाल किया जा सकता है. अब Chrome DevTools के रिकॉर्डर पैनल का इस्तेमाल करके, उपयोगकर्ता फ़्लो रिकॉर्ड किए जा सकते हैं. साथ ही, उन्हें एक्सपोर्ट किया जा सकता है. इसके अलावा, उन्हें Firefox और Chrome, दोनों पर चलाया जा सकता है.

ज़्यादा जानकारी के लिए, WebDriver BiDi - The future of cross-browser automation लेख पढ़ें.

परफ़ॉर्मेंस पैनल में सुधार

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

लाइव मेट्रिक से जुड़ी टिप्पणियां

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

एलसीपी और सीएलएस पर लाइव ऑब्ज़र्वेशन देखने के लिए, परफ़ॉर्मेंस पैनल खोलें. आईएनपी देखने के लिए, किसी पेज पर इंटरैक्शन करें. Chrome UX Report से मिले, एग्रीगेट किए गए उपयोगकर्ता अनुभव की तुलना अपनी लोकल मेट्रिक से करने के लिए, फ़ील्ड डेटा जोड़ें: दाईं ओर मौजूद फ़ील्ड डेटा सेक्शन में जाकर, सेट अप करें पर क्लिक करें. इसके बाद, डायलॉग विंडो में जाकर ठीक है पर क्लिक करें. ज़्यादा जानकारी वाली टूलटिप देखने के लिए, किसी मेट्रिक वैल्यू पर कर्सर घुमाएं.

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

नेटवर्क ट्रैक में खोज के अनुरोध

परफ़ॉर्मेंस पैनल में मौजूद खोजें बॉक्स अब नेटवर्क ट्रैक पर भी काम करता है. इसलिए, Ctrl / Cmd + F शॉर्टकट का इस्तेमाल करके अनुरोध ढूंढे जा सकते हैं.

performance.mark और performance.measure कॉल के स्टैक ट्रेस देखना

खास जानकारी टैब में, परफ़ॉर्मेंस पैनल में अब आपको performance.mark और performance.measure कॉल के स्टैक ट्रेस दिखेंगे. इन कॉल का इस्तेमाल करके, परफ़ॉर्मेंस ट्रेस को अपने कस्टम डेटा के साथ बढ़ाया जा सकता है.

ज़्यादा जानकारी के लिए, एक्सटेंसिबिलिटी एपीआई की मदद से, परफ़ॉर्मेंस डेटा को अपनी पसंद के मुताबिक बनाना लेख पढ़ें.

'जानकारी अपने-आप भरने की सुविधा' पैनल में टेस्ट अड्रेस के डेटा का इस्तेमाल करना

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

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

Elements पैनल में किए गए सुधार

इस वर्शन में, Elements पैनल में कुछ सुधार किए गए हैं.

चुने गए एलिमेंट की स्थितियों को ज़बरदस्ती लागू करना

स्टाइल > स्टाइल में मौजूद :hov सेक्शन में अब आपको ज़्यादा स्यूडो-क्लास मिलती हैं. इन्हें ज़बरदस्ती चालू किया जा सकता है. विकल्पों का नया सेट, चुनिंदा एलिमेंट को फ़ोर्स करें स्टेट ड्रॉप-डाउन में मौजूद है. यह आपके चुने गए कुछ एलिमेंट के लिए खास है. उदाहरण के लिए, <label> और <input> के लिए विकल्पों के अलग-अलग सेट हैं.

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

तत्व > स्टाइल अब ज़्यादा ग्रिड प्रॉपर्टी अपने-आप पूरी करता है

Elements > Styles टैब में अब ग्रिड एरिया और लाइन के नाम में बदलाव करते समय, अपने-आप पूरा होने वाले विकल्प मिलते हैं.

ज़्यादा जानकारी के लिए, सीएसएस ग्रिड लेआउट की जांच करना लेख पढ़ें. साथ ही, खास तौर पर लाइन के नाम दिखाएं सेक्शन देखें.

Lighthouse 12.2.0

Lighthouse पैनल अब Lighthouse 12.2.0 पर काम करता है.

इस अपडेट में कई गड़बड़ियां ठीक की गई हैं. बदलावों की पूरी सूची देखें.

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

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

अन्य हाइलाइट

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

• Elements:
  • लंबाई की ज़्यादा प्रॉपर्टी 357020613 के गलत रेंडरिंग की गड़बड़ी को ठीक किया गया.
  • position-try-options का नाम बदलकर स्पेसिफ़िकेशन के मुताबिक position-try-fallbacks कर दिया गया है.
  • पेज रीफ़्रेश करने पर, अब चुने गए नोड को वापस लाया जाता है. भले ही, वह iframe 40719145 के अंदर हो.
  • सुलभता: स्क्रीन रीडर अब तत्व दिखाएं बटन 357382536 के बारे में सूचना देंगे.
• परफ़ॉर्मेंस > नेटवर्क: नेटवर्क में दिखाएं मेन्यू का विकल्प चुनने पर, अब नेटवर्क के काम के अनुरोध का हेडर टैब खुलता है.
• Console:
  • C/C++ एक्सटेंशन से जुड़ी गड़बड़ियों की वजह से, अब कंसोल अपने-आप नहीं खुलता 356320158.
  • JS मॉड्यूल में import.meta फ़ंक्शन के काम न करने से जुड़ी गड़बड़ी को ठीक किया गया है. यह गड़बड़ी तब होती थी, जब मॉड्यूल को रोका जाता था 40743793.
• मेमोरी: अनदेखा किए गए रिटेनर को पहले जैसा करने की सुविधा से जुड़ी गड़बड़ी को ठीक किया गया है. इस गड़बड़ी की वजह से, रिटेनर 327337527 को अनदेखा करने के बाद, यह सुविधा नहीं दिखती थी.

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

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

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

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

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

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

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