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

Gemini की मदद से, नेटवर्क के अनुरोधों, सोर्स फ़ाइलों, और परफ़ॉर्मेंस ट्रेस को डीबग करना

अब सीएसएस स्टाइलिंग के साथ-साथ, नेटवर्क के अनुरोधों, सोर्स फ़ाइलों, और परफ़ॉर्मेंस ट्रेस के बारे में भी Gemini से चैट की जा सकती है.

एलिमेंट पैनल में मौजूद कॉन्टेक्स्ट मेन्यू की तरह ही, एआई की मदद पैनल को खोलने और Gemini के साथ चैट शुरू करने के लिए, इनमें से कोई एक तरीका अपनाएं: दायाँ क्लिक करें और एआई से पूछें को चुनें या इनके बगल में मौजूद एआई से पूछें बटन पर क्लिक करें:

• नेटवर्क पैनल में नेटवर्क का अनुरोध.
• सोर्स > पेज टैब में मौजूद कोई फ़ाइल.
• परफ़ॉर्मेंस > मुख्य ट्रैक में मौजूद कोई गतिविधि.

Gemini, चुनी गई फ़ाइल, गतिविधि या अनुरोध के कॉन्टेक्स्ट को ध्यान में रखेगा.

DevTools टीम को crbug.com/364805393 पर आपके सुझाव/राय/शिकायत का इंतज़ार रहेगा.

एआई से की गई चैट का इतिहास

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

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

ऐप्लिकेशन > स्टोरेज में जाकर, एक्सटेंशन का स्टोरेज मैनेज करें

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

Chromium से जुड़ी समस्या: crbug.com/40963428.

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

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

लाइव मेट्रिक में इंटरैक्शन के फ़ेज़

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

Web Vitals एक्सटेंशन, अब DevTools में उपलब्ध है लेख में बताया गया है कि इन सुविधाओं के रिलीज़ होने के बाद, Web Vitals एक्सटेंशन के लिए सहायता बंद कर दी जाएगी.

Chromium से जुड़ी समस्या: crbug.com/369097528.

खास जानकारी वाले टैब में, रेंडर होने से रोकने वाली जानकारी

परफ़ॉर्मेंस > नेटवर्क ट्रैक में, लाल रंग के त्रिकोण से मार्क किया गया नेटवर्क अनुरोध चुनने पर, खास जानकारी टैब में (रीफ़ैक्टर की गई) टूलटिप के साथ-साथ यह भी बताया जाता है कि अनुरोध रेंडरिंग को ब्लॉक कर रहा है.

scheduler.postTask इवेंट और उन्हें शुरू करने वाले ऐरो के लिए सहायता

परफ़ॉर्मेंस > मुख्य ट्रैक में अब scheduler.postTask() इवेंट और इनके बीच ये इनिशिएटर ऐरो दिखते हैं:

• Schedule postTask -> Fire postTask
• Schedule postTask -> Abort postTask

Chromium से जुड़ी समस्या: crbug.com/40775984.

ऐनिमेशन पैनल और एलिमेंट > स्टाइल टैब में सुधार

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

तत्व > स्टाइल से ऐनिमेशन पर जाएं

तत्व > स्टाइल टैब में, animation प्रॉपर्टी की वैल्यू के बगल में ऐनिमेशन ऐनिमेशन पैनल पर जाएं आइकॉन दिखते हैं. इससे, ऐनिमेशन की जांच करना आसान हो जाता है.

'कैलकुलेट किया गया' टैब में रीयल-टाइम अपडेट

तत्व > कैलकुलेट की गई वैल्यू टैब में, अब कैलकुलेट की गई वैल्यू रीयल-टाइम में अपडेट होती हैं. उदाहरण के लिए, जब ऐनिमेशन उन्हें अपडेट करते हैं.

सेंसर में प्रेशर एम्युलेशन की प्रोसेस करना

सेंसर पैनल की मदद से, अब Nominal, Fair, Serious, और Critical सीपीयू प्रेशर को एमुलेट किया जा सकता है.

Chromium से जुड़ी समस्या: crbug.com/362277525.

मेमोरी पैनल में, एक ही नाम वाले JS ऑब्जेक्ट को सोर्स के हिसाब से ग्रुप किया गया है

मेमोरी पैनल अब एक ही नाम वाले उन JS ऑब्जेक्ट के बीच अंतर कर सकता है जो अलग-अलग सोर्स से आते हैं. साथ ही, उन्हें उनके हिसाब से ग्रुप कर सकता है.

Chromium से जुड़ी समस्या: crbug.com/357902505.

सेटिंग का नया लुक

यूज़र इंटरफ़ेस के डिज़ाइन को बेहतर तरीके से अलाइन करने के लिए, DevTools की सेटिंग अब Chrome की सेटिंग से मिलती-जुलती हैं. खास तौर पर, सेक्शन को अब "कार्ड" के तौर पर विज़ुअल तरीके से अलग किया गया है.

परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाले पैनल को बंद कर दिया गया है. इसे DevTools से हटा दिया गया है

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

DevTools की टीम, इस पैनल को बंद करने और परफ़ॉर्मेंस डीबग करने के अनुभव के बारे में आपके दिए गए सुझाव, शिकायत या राय के लिए आभारी है. हम हमेशा आपकी राय और सुझावों का स्वागत करते हैं. हमें ऐसे और सुझाव दें!

अन्य हाइलाइट

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

• परफ़ॉर्मेंस:
  • खोज क्वेरी के लिए, तीन वर्णों की ग़ैर-ज़रूरी सीमा हटा दी गई है.
  • होम होम बटन जोड़ा गया है. इससे आपको लाइव मेट्रिक वाली स्क्रीन पर वापस जाने में मदद मिलती है.
  • Shift+S/W की मदद से, ट्रेस को ज़ूम करने के शॉर्टकट की सुविधा को ठीक किया गया है. यह सुविधा पहले काम नहीं कर रही थी.
• तत्व > स्टाइल:
  • ऑटोकंप्लीट 341991541 में anchor-center जोड़ा गया.
  • दो शब्दों वाली वैल्यू के लिए, फ़्लेक्सबॉक्स एडिटर उपलब्ध न होने की गड़बड़ी को ठीक किया गया है 341964645.
• नेटवर्क: प्रीफ़ेच करने में होने वाली गड़बड़ियों को अब लाल रंग की गड़बड़ियों के बजाय, पीले रंग की चेतावनियों के तौर पर दिखाया जाता है. इससे यह पता चलता है कि कॉन्टेंट के दिखने पर कोई असर नहीं पड़ा है 372055494.

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

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

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

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

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

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

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