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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

performance.mark और performance. measure कॉल के लिए, स्टैक ट्रेस दिखाने से पहले और बाद की इमेज.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Lighthouse 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.
    • JS मॉड्यूल में import.meta से जुड़ी एक गड़बड़ी को ठीक किया गया है. इस गड़बड़ी की वजह से, रोके जाने पर 40743793 का आकलन नहीं किया जा रहा था.
  • यादें: रिटेनर 327337527 को अनदेखा करने के बाद, 'अनदेखा किए गए रिटेनर को पहले जैसा करें' विकल्प न दिखने की गड़बड़ी को ठीक किया गया.

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

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

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

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

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

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