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

DevTools एमसीपी सर्वर से जुड़े अपडेट

हमने DevTools एमसीपी सर्वर में कई सुधार किए हैं. साथ ही, v0.11.0 वर्शन जारी किया है.

  • अब अपने एमसीपी क्लाइंट (Gemini सीएलआई, कर्सर वगैरह) में प्रॉम्प्ट करते समय, एलिमेंट और नेटवर्क पैनल में चुने गए एलिमेंट और नेटवर्क अनुरोधों का रेफ़रंस दिया जा सकता है
  • list_console_messages टूल में अब समस्याएं पैनल में दिखने वाली समस्याएं भी शामिल हैं
  • अब press_key टूल का इस्तेमाल, फ़ॉर्म एलिमेंट से जुड़े कीबोर्ड इवेंट को डीबग करने के लिए किया जा सकता है
  • सुलभता ट्री के स्नैपशॉट अब डिस्क में सेव किए जा सकते हैं
  • अब पेजों को फिर से लोड किया जा सकता है. साथ ही, कैश मेमोरी को अनदेखा करने का विकल्प भी उपलब्ध है
  • मौजूदा Chrome प्रोफ़ाइल का इस्तेमाल करने के लिए, --user-data-dir फ़्लैग को कॉन्फ़िगर करना

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

ट्रेस शेयर करने की बेहतर सुविधा

परफ़ॉर्मेंस पैनल में ट्रेस शेयर करने का डायलॉग बॉक्स

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

  • रिसॉर्स का कॉन्टेंट: सभी एचटीएमएल, सीएसएस, और JavaScript फ़ाइलों की कॉपी. हालांकि, इसमें एक्सटेंशन स्क्रिप्ट शामिल नहीं होती हैं
  • स्क्रिप्ट के सोर्स मैप: लिखे गए कोड की मैपिंग. इससे आपको फ़ंक्शन के मूल नाम और सोर्स फ़ाइलें दिखती हैं.

हमारे अपडेट किए गए दस्तावेज़ में, इस बारे में जानें कि क्या शेयर करना चाहिए और क्या निजी रखना चाहिए.

हम Microsoft के अपने उन साथियों को धन्यवाद देना चाहते हैं जिनके सहयोग से यह काम पूरा हुआ. साथ ही, हम उन्हें भी धन्यवाद देना चाहते हैं जिन्होंने इस काम की शुरुआत की.

@starting-style के लिए सहायता

तत्व पैनल में अब नए सीएसएस @starting-style नियम को डीबग करने की सुविधा उपलब्ध है. यह सुविधा, एंट्री ऐनिमेशन बनाने के लिए ज़रूरी है.

अब आपको Elements ट्री में, काम के एलिमेंट के बगल में starting-style अडॉर्नर दिखेगा. साथ ही, पिल पर क्लिक करके एलिमेंट की starting-style स्थिति को टॉगल किया जा सकेगा. इसके अलावा, Styles टैब में @starting-style ब्लॉक की जांच और डीबग किया जा सकेगा.

डिसप्ले के लिए एडिटर विजेट: मेसनरी

सीएसएस मेसनरी लेआउट के साथ एक्सपेरिमेंट करने वाले लोग, अब उसी एडिटर विजेट का इस्तेमाल कर सकते हैं जिसका इस्तेमाल वे display: flex और grid लेआउट में करते थे. इससे उन्हें masonry लेआउट में अलाइनमेंट के अलग-अलग विकल्पों के बीच तेज़ी से टॉगल करने में मदद मिलेगी.

Lighthouse 13

Lighthouse पैनल अब Lighthouse 13 पर काम करता है. इस माइलस्टोन के साथ, DevTools और Lighthouse में परफ़ॉर्मेंस की अहम जानकारी को एक साथ लाने का काम पूरा हो जाता है.

ज़्यादा जानने के लिए, सूचना वाली ब्लॉग पोस्ट पढ़ें. Lighthouse किस काम के लिए उपयोगी है और यह DevTools में परफ़ॉर्मेंस पैनल से कैसे कनेक्ट होता है, यह जानने के लिए Lighthouse: अपनी वेबसाइट को ऑप्टिमाइज़ करें लेख पढ़ें.

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

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

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

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

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

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