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

Sofia Emelianova
Sofia Emelianova

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

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

रिकॉर्डर के एक्सपोर्ट मेन्यू में 'Firefox के लिए Puppeteer' विकल्प जोड़ने से पहले और बाद की इमेज.

ज़्यादा जानकारी के लिए, WebDriver BiDi - क्रॉस-ब्राउज़र ऑटोमेशन का भविष्य देखें.

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

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

लाइव मेट्रिक से जुड़े आंकड़े

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

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

परफ़ॉर्मेंस पैनल में मेट्रिक के बारे में लाइव जानकारी.

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

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

खोज के साथ नेटवर्क अनुरोध मिला.

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

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

परफ़ॉर्मेंस.मार्क और परफ़ॉर्मेंस के लिए स्टैक ट्रेस दिखाने से पहले और बाद में. साथ ही, कॉल को मेज़र करने के लिए.

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

ऑटोमैटिक भरने की सुविधा पैनल में टेस्ट पते का डेटा इस्तेमाल करें

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

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

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

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

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

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

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

एलिमेंट की खास स्थितियों को ज़बरदस्ती लागू करने की सुविधा जोड़ने से पहले और बाद में.

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

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

अब एलिमेंट > स्टाइल टैब में, ग्रिड एरिया और लाइन के नामों में बदलाव करने पर ऑटोकंप्लीट की सुविधा मिलती है.

ग्रिड लाइन के नामों में बदलाव करने पर, अपने-आप पूरा होने वाले विकल्पों को जोड़ने से पहले और बाद की इमेज.

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

लाइटहाउस 12.2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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