Chrome 144 में टीम ने Chrome DevTools MCP सर्वर के लिए, एक ऐसी सुविधा लॉन्च की है जिसका लंबे समय से इंतज़ार किया जा रहा था. यह सुविधा, अनुरोध की शर्तों वाला नया पैनल है. साथ ही, इसमें फ़ॉन्ट और अडॉप्ट की गई स्टाइलशीट को डीबग करने से जुड़ी सुविधाओं को बेहतर बनाया गया है.
यहां 2025 में लॉन्च की गई सुविधाओं की शानदार सूची खत्म होती है. क्या आपको यह देखना है कि आपने इनमें से कोई सूचना मिस तो नहीं कर दी? इसके बाद, हाइलाइट देखें या DevTools के पिछले अपडेट ब्राउज़ करें.
DevTools एमसीपी सर्वर के अपडेट
हमने DevTools MCP सर्वर से जुड़ी कई समस्याओं को ठीक किया है. साथ ही, v0.12.1 रिलीज़ किया है. इस वर्शन में, अपने-आप कनेक्ट होने की नई सुविधा जोड़ी गई है. इसकी मदद से, मौजूदा ब्राउज़र सेशन का फिर से इस्तेमाल किया जा सकता है. अपने-आप कनेक्ट होने की सुविधा की मदद से, Chrome में खुद ही डीबग करना शुरू किया जा सकता है. इसके बाद, DevTools MCP को उसी Chrome इंस्टेंस पर ले जाएं जहां आपने काम छोड़ा था.
DevTools MCP के लिए, अपने-आप कनेक्ट होने की सुविधा के बारे में ज़्यादा जानने के लिए, इससे जुड़ी ब्लॉग पोस्ट पढ़ें. बदलावों और बग ठीक करने से जुड़ी पूरी जानकारी के लिए, GitHub पर सार्वजनिक तौर पर उपलब्ध बदलावों का लॉग देखें.
नेटवर्क के अनुरोध को अलग-अलग थ्रॉटल करना
नेटवर्क के अनुरोध को ब्लॉक करने वाले पैनल का नाम बदलकर अनुरोध की स्थितियां कर दिया गया है. अनुरोधों को ब्लॉक करने के साथ-साथ, अब इस पैनल की मदद से अलग-अलग अनुरोधों को थ्रॉटल भी किया जा सकता है.
पैनल को ⋮ > ज़्यादा टूल > अनुरोध की शर्तें से खोलें. अनुरोध ब्लॉक करने की सुविधा चालू करने के लिए, ब्लॉक और थ्रॉटल करने की सेटिंग चालू करें चेकबॉक्स को टॉगल करें. नया टेक्स्ट पैटर्न जोड़ने के लिए, + बटन पर क्लिक करें. सभी नियमों को खारिज करने के लिए, आइकॉन पर क्लिक करें.
अपडेट किए गए दस्तावेज़ों में, नेटवर्क के अलग-अलग अनुरोधों को थ्रॉटल करने का तरीका जानें.
@font-face और @font-feature-values नियमों में बदलाव करना
@font-face और @font-feature-values अब स्टाइल पैनल में दिखते हैं. इनमें बदलाव भी यहीं से किया जा सकता है.
एलिमेंट पैनल में अडॉप्ट की गई स्टाइलशीट
Elements पैनल में अब शैडो रूट और दस्तावेज़ रूट के तहत, अडॉप्ट की गई स्टाइलशीट दिखती हैं. इससे कंस्ट्रक्टेड स्टाइलशीट के साथ काम करने वाले लोगों के लिए, उन स्टाइलशीट को ढूंढना आसान हो जाता है जो उनके एलिमेंट पर असर डालती हैं. साथ ही, स्टाइल को डीबग करना भी आसान हो जाता है. ऐसा खास तौर पर तब होता है, जब स्टाइल उम्मीद के मुताबिक लागू नहीं होती हैं.
DevTools 2025 में नया क्या था
एआई के इनोवेशन
Console की अहम जानकारी से शुरू होकर, एआई इनोवेशन अब Chrome DevTools का अहम हिस्सा बन गए हैं. एआई असिस्टेंस पैनल, कॉन्टेक्स्ट के हिसाब से एआई की मदद से डीबग करने का मुख्य हब है. DevTools में, आपको एआई की मदद से काम करने वाले कई टूल मिलते हैं. इनकी मदद से, अपने वर्कफ़्लो को बेहतर बनाया जा सकता है. जैसे, Console और Sources पैनल में कोड के सुझाव और परफ़ॉर्मेंस ट्रेस में Gemini से मिलने वाली अपने-आप एनोटेशन की सुविधा.
- स्टाइलिंग से जुड़ी समस्याओं को ठीक करना: Gemini से सीएसएस से जुड़ी समस्याओं को ठीक करने के लिए कहें. साथ ही, Workspaces के साथ मिलकर, उन बदलावों को सीधे डिस्क पर मौजूद आपकी सोर्स फ़ाइलों में सेव करें.
- परफ़ॉर्मेंस के बारे में पूछें: अब एआई की मदद से, परफ़ॉर्मेंस के पूरे ट्रेस पर चर्चा की जा सकती है. इसके अलावा, परफ़ॉर्मेंस की किसी भी अहम जानकारी के बारे में ज़्यादा जानकारी पाई जा सकती है या Gemini का इस्तेमाल करके, ट्रेस को एनोटेट किया जा सकता है.
- विज़ुअल डीबगिंग: एआई की मदद से काम करने वाला पैनल अब मल्टीमॉडल हो गया है. इससे आपको Gemini को समझने और विज़ुअल गड़बड़ियों को डीबग करने में मदद मिलती है. इसके लिए, इमेज अपलोड करें या स्क्रीनशॉट लें.
परफ़ॉर्मेंस
हमने परफ़ॉर्मेंस पैनल को फिर से डिज़ाइन किया है, ताकि परफ़ॉर्मेंस से जुड़ी गड़बड़ियों को ठीक करना ज़्यादा आसान हो. उदाहरण के लिए, रिकॉर्ड किए गए ट्रेस में अब चुनिंदा अहम जानकारी शामिल होती है. इससे आपको परफ़ॉर्मेंस से जुड़ी समस्याओं की पहचान करने और ट्रेस में तेज़ी से नेविगेट करने में मदद मिलती है. अन्य सुधारों में ये शामिल हैं:
- कार्रवाई से जुड़ी अहम जानकारी: हमने परफ़ॉर्मेंस की अहम जानकारी का एक मज़बूत सेट पेश किया है. इससे फ़ेज़ के हिसाब से एलसीपी, लेआउट शिफ़्ट करने वाले एलिमेंट, और दस्तावेज़ के अनुरोध में लगने वाला समय जैसी खास समस्याओं का पता चलता है.
- असल दुनिया के हिसाब से कॉन्टेक्स्ट: हमने फ़ील्ड डेटा और CrUX डेटा को सीधे तौर पर परफ़ॉर्मेंस पैनल में इंटिग्रेट किया है. इससे आपको असली उपयोगकर्ताओं के अनुभव के आधार पर, लैब के नतीजों की पुष्टि करने में मदद मिलती है.
- फ़्रेमवर्क कॉन्टेक्स्ट: Angular v20 और React v19.2 अब Extensibility API का इस्तेमाल कर रहे हैं. आपके कॉम्पोनेंट ट्री को सीधे तौर पर देखने से, मुख्य थ्रेड की परफ़ॉर्मेंस से जुड़ी समस्याओं को समझना आसान हो जाता है. Angular और React टीम के साथ हमारी पार्टनरशिप के लिए शाउटआउट!
- बेहतर तरीके से साथ मिलकर काम करना: ट्रेस शेयर करना अब आसान हो गया है. इसके लिए, ट्रेस में एनोटेशन जोड़ने और संसाधन का कॉन्टेंट और सोर्स मैप एक्सपोर्ट करने के विकल्प उपलब्ध हैं. इससे यह पक्का किया जा सकता है कि आपके सहयोगी या आने वाले समय में आपको, ज़रूरी सभी जानकारी मिल जाए.
वेब प्लैटफ़ॉर्म
DevTools, वेब प्लैटफ़ॉर्म के साथ-साथ विकसित होता रहा. इसमें सीएसएस के नए स्पेसिफ़िकेशन के लिए खास टूलिंग जोड़ी गई. साथ ही, डेवलपर के लिए पहले से मौजूद सुविधाओं को बेहतर बनाया गया.
हमने कॉम्प्लेक्स सीएसएस वैरिएबल चेन के लिए डीप ट्रेसिंग, प्रॉपर्टी टूलटिप के लिए बेसलाइन उपलब्धता, और हाल ही में @starting-style नियम का इस्तेमाल करके कॉम्प्लेक्स एंट्री ऐनिमेशन के लिए डीबग करने की सुविधा जोड़ी है. साथ ही, नए display: masonry लेआउट के लिए विज़ुअल एडिटर भी जोड़ा है.
झलक दिखाने वाले चैनल डाउनलोड करना
Chrome Canary, Dev या Beta को डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन प्रीव्यू चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, आपको वेब प्लैटफ़ॉर्म के नए एपीआई को आज़माने का मौका मिलता है. इसके अलावा, आपको अपनी साइट पर मौजूद समस्याओं का पता लगाने में मदद मिलती है. इससे पहले कि आपके उपयोगकर्ता उन समस्याओं का पता लगाएं!
Chrome DevTools टीम से संपर्क करना
नई सुविधाओं, अपडेट या DevTools से जुड़ी किसी अन्य चीज़ के बारे में चर्चा करने के लिए, इन विकल्पों का इस्तेमाल करें.
- हमें सुझाव/राय देने या शिकायत करने के लिए, crbug.com पर जाएं. साथ ही, किसी सुविधा का अनुरोध करने के लिए भी इसी लिंक पर जाएं.
- DevTools में, ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी किसी समस्या की शिकायत करें.
- @ChromeDevTools पर ट्वीट करें.
- DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणी करें.