DevTools और Chrome 140 में नया क्या है

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini की मदद से, ज़्यादा इनसाइट डीबग करना

परफ़ॉर्मेंस > अहम जानकारी में जाकर, अब एआई की मदद से डीबग करें (पहले एआई से पूछें) पर क्लिक करें. इससे आपको एआई की मदद पैनल में Gemini से चैट करने और डीबग करने की सुविधा मिलेगी. साथ ही, परफ़ॉर्मेंस के बारे में ज़्यादा अहम जानकारी मिलेगी:

  • इमेज की डिलीवरी बेहतर बनाएं
  • लेगसी JavaScript
  • डुप्लीकेट JavaScript
  • मॉडर्न एचटीटीपी

परफ़ॉर्मेंस से जुड़ी ज़्यादा अहम जानकारी में 'एआई की मदद से डीबग करें' बटन जोड़ने से पहले और बाद की इमेज.

'नेटवर्क की स्थितियां' में 'डेटा सेव करें' हेडर को एम्युलेट करना

नेटवर्क की स्थितियां पैनल में, अब Save-Data अनुरोध हेडर के व्यवहार का पता लगाया जा सकता है. यह हेडर, नेटवर्क क्लाइंट हिंट है. इससे पता चलता है कि क्लाइंट, डेटा का इस्तेमाल कम करना चाहता है. यह navigator.connection.saveData एपीआई के ज़रिए भी उपलब्ध है.

'नेटवर्क की स्थितियां' में 'Save-Data' अनुरोध हेडर इम्यूलेशन जोड़ने से पहले और बाद की इमेज.

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

सीएसएस प्रॉपर्टी के टूलटिप में बेसलाइन की स्थिति देखना

Elements > Styles में जाकर, किसी भी सीएसएस प्रॉपर्टी पर कर्सर घुमाने पर, अब आपको प्रॉपर्टी की परिभाषा के नीचे, Baseline स्टेटस के हिसाब से, मुख्य ब्राउज़र पर उसकी उपलब्धता दिख सकती है.

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

Chromium की समस्या: 417749762.

उपयोगकर्ता एजेंट क्लाइंट के संकेतों में डिवाइसों के टाइप को बदलना

नेटवर्क की स्थितियां > यूज़र-एजेंट क्लाइंट हिंट ड्रॉप-डाउन में, अब आपके पास फ़ॉर्म फ़ैक्टर को बदलने के विकल्प हैं. खास तौर पर, Sec-CH-UA-Form-Factors अनुरोध हेडर की वैल्यू को बदलने के विकल्प हैं.

उपयोगकर्ता एजेंट क्लाइंट के संकेतों में, डिवाइस के साइज़, डाइमेंशन या कॉन्फ़िगरेशन को बदलने के विकल्प जोड़ने से पहले और बाद की इमेज.

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

Lighthouse 12.8.0

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

इस वर्शन में, Lighthouse एक नई रिपोर्ट जोड़ता है: Trusted Types की मदद से, डीओएम पर आधारित XSS से अपनी साइट को सुरक्षित रखें.

बदलावों की पूरी सूची भी देखें.

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

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

अन्य हाइलाइट

इस वर्शन में, कई गड़बड़ियां ठीक की गई हैं और सुधार किए गए हैं. इनमें से कुछ के बारे में यहां बताया गया है:

  • एआई से मदद पाने की सुविधा:
    • सेटिंग में जाकर, एआई की सुविधा बंद करने पर अब चैट का इतिहास मिट जाता है.
    • सुलभता: स्क्रीन रीडर अब कॉन्टेक्स्ट के टाइटल को पहले ही बोलकर सुनाते हैं. साथ ही, जवाब स्ट्रीम होना शुरू होने पर "जवाब लोड हो रहा है" और जवाब पूरा होने पर "जवाब तैयार है" बोलते हैं.
  • Elements:
    • स्टाइल टैब अब sibling-index(), sibling-count(), और env() सीएसएस फ़ंक्शन का आकलन कर सकता है (crbug.com/417128001, crbug.com/40196710).
    • ::view-transition-group-children स्यूडो एलिमेंट के लिए सपोर्ट जोड़ा गया (crbug.com/425901164).
    • <summary> एलिमेंट में मौजूद इंटरैक्टिव कॉन्टेंट से जुड़ी सुलभता की समस्याओं के लिए सपोर्ट जोड़ा गया (crbug.com/427172874).
    • अब कैलकुलेट की गई टैब से, स्टाइल में मौजूद लॉन्गहैंड प्रॉपर्टी पर जाया जा सकता है (crbug.com/41486012).
    • ईज़िंग और रंग एडिटर: अब कीबोर्ड का इस्तेमाल करके, ऐनिमेशन ट्रांज़िशन और कलर स्वैच के लिए बेज़ियर स्वैच से इंटरैक्ट किया जा सकता है (crbug.com/401213421).
  • नेटवर्क: HAR फ़ाइलों को इंपोर्ट करने की सुविधा में अब अनुरोध और जवाब वाली कुकी भी शामिल हैं (crbug.com/432995868).
  • डिवाइस मोड: Apple डिवाइसों के लिए, उपयोगकर्ता एजेंटों को Safari 18.5 के नए वर्शन पर अपडेट किया गया है.

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

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

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

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

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

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