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

Matthias Rohmer

Gemini से कोड के सुझाव पाना

अब आपको Console और Sources पैनल में, एआई से जनरेट किए गए टाइप-अहेड सुझाव मिल सकते हैं.

कंसोल और सोर्स पैनल में कोड के सुझाव पाने की सुविधा

इस सुविधा को चालू करने के लिए, सेटिंग > एआई इनोवेशन पर जाएं. इसके बाद, कोड के सुझाव को टॉगल करें.

DevTools MCP सर्वर के लिए बेहतर सुविधाएं

हमने v0.2.1 के साथ DevTools MCP सर्वर की पब्लिक प्रीव्यू सुविधा लॉन्च की थी. इसके बाद, हमने कम्यूनिटी के योगदान से कई सुधार किए और v0.9.0 रिलीज़ किया.

  • Node.js के साथ काम करने की सुविधा को Node.js 20 तक बढ़ा दिया गया है.
  • टोकन सेव करने के लिए, नेटवर्क अनुरोधों और कंसोल मैसेज को पेज के हिसाब से बांटा जा सकता है. साथ ही, इन्हें अनुरोध के टाइप (उदाहरण के लिए, स्क्रिप्ट, स्टाइलशीट, इमेज) और मैसेज के टाइप (लॉग, चेतावनी, गड़बड़ी) के आधार पर फ़िल्टर किया जा सकता है.
  • स्क्रीनशॉट को किसी खास पाथ पर और अलग-अलग फ़ॉर्मैट में सेव किया जा सकता है.
  • कॉन्फ़िगर की जा सकने वाली टूल कैटगरी की मदद से, यह तय किया जा सकता है कि कौनसी सुविधाएं उपलब्ध कराई जाएं. इससे ग़ैर-ज़रूरी शोर कम होता है.
  • अब MCP सर्वर के इस्तेमाल किए गए Chrome इंस्टेंस को लॉन्च करने के लिए आर्ग्युमेंट पास किए जा सकते हैं.

बदलावों और गड़बड़ियों को ठीक करने से जुड़ी पूरी सूची देखने के लिए, GitHub पर सार्वजनिक तौर पर उपलब्ध बदलावों का लॉग देखें. साथ ही, DevTools MCP सर्वर के बारे में ज़्यादा जानने के लिए, सूचना वाली ब्लॉग पोस्ट पढ़ें.

एआई असिस्टेंट की सुविधा को तुरंत ऐक्सेस करना

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

DevTools के सबसे ऊपर दाएं कोने में मौजूद नए बटन की मदद से, DevTools में कहीं से भी एआई असिस्टेंस को खोला जा सकता है.

DevTools में एआई असिस्टेंस के नए एंट्री पॉइंट

Gemini की मदद से, पूरे परफ़ॉर्मेंस ट्रेस को डीबग करना

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

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

इसी तरह, परफ़ॉर्मेंस > अहम जानकारी में मौजूद सभी अहम जानकारी के बारे में, अब Gemini से चैट की जा सकती है.

ड्रॉवर ओरिएंटेशन को टॉगल करें

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

⋮ > ज़्यादा टूल से, ड्रॉअर में अतिरिक्त पैनल जोड़ें.

ओरिएंटेशन बदलने के लिए, ड्रॉवर में नया टॉगल

Google Developer Program

Google Developer Program को अब DevTools में इंटिग्रेट कर दिया गया है. इसमें प्रोफ़ाइल मैनेज करने के लिए सीधे लिंक दिए गए हैं. साथ ही, नए बैज पाने का विकल्प भी दिया गया है.

DevTools की सेटिंग में, Google डेवलपर प्रोफ़ाइल के लिए कंट्रोल

बैज की सुविधा के लिए ऑप्ट-इन करना ज़रूरी है. बैज पाने की सुविधा चालू करने के लिए, सेटिंग > प्राथमिकताएं > खाता पर जाएं. इसके बाद, बैज पाएं को टॉगल करके चालू करें.

अन्य हाइलाइट

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

  • ऐप्लिकेशन पैनल में अब सभी तरह के वर्कर के लिए स्टोरेज की जांच करने की सुविधा उपलब्ध है. इनमें सर्विस वर्कर, शेयर किए गए वर्कर, और डेडिकेटेड वर्कर शामिल हैं.
  • :target-current अब स्टाइल पैनल में दिखता है.
  • नेटवर्क पैनल अब नए Is ad-related बूलियन के आधार पर अनुरोधों को फ़िल्टर कर सकता है.

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

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

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

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

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

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