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

Gemini की मदद से सीएसएस को डीबग करना

Chrome DevTools में, एक्सपेरिमेंट के तौर पर एआई असिस्टेंस वाला नया पैनल उपलब्ध है. इसमें Gemini से चैट की जा सकती है और सीएसएस को डीबग करने में मदद पाई जा सकती है.

इसे अभी आज़माएं! Elements पैनल में, किसी एलिमेंट पर राइट क्लिक करें और Ask AI चुनें. इसके अलावा, एलिमेंट के बगल में मौजूद बटन पर क्लिक करें. DevTools, नया एआई की मदद वाला पैनल खोलेगा.

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

नए पैनल का बेहतर तरीके से इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, DevTools में एआई की मदद से किए जा सकने वाले पांच बेहतरीन काम लेख पढ़ें. साथ ही, स्टाइलिंग के लिए एआई की मदद लेख पढ़ें.

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

सेटिंग के खास टैब में जाकर, एआई की सुविधाओं को कंट्रोल करना

अब एआई की सभी सुविधाओं को एक ही जगह से मैनेज किया जा सकता है: नई सेटिंग सेटिंग > एआई इनोवेशन टैब. इसमें कुछ अहम बातों के बारे में बताया गया है. साथ ही, एआई की सुविधाओं के बारे में जानकारी दी गई है. इसके अलावा, इसमें इन सुविधाओं को अलग-अलग चालू और बंद करने का विकल्प भी दिया गया है.

ज़्यादा जानकारी के लिए, सेटिंग > एआई इनोवेशन पर जाएं.

कंसोल से मिलने वाली अहम जानकारी, बस एक क्लिक दूर है

DevTools में एआई की सुविधाओं के लिए, अब सेटिंग सिंक करने की सुविधा चालू करने की ज़रूरत नहीं है. इसलिए, पहले रिलीज़ की गई Console की अहम जानकारी और स्टाइलिंग के लिए एआई की मदद, अब एक क्लिक पर उपलब्ध हैं.

अगर आपने Chrome में लॉग इन किया है, तो सेटिंग > एआई की नई सुविधाएं में जाकर, इन सुविधाओं को चालू करें. इसके बाद, इनका इस्तेमाल किया जा सकता है.

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

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

परफ़ॉर्मेंस से जुड़ी जानकारी को एनोटेट करना और शेयर करना

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

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

परफ़ॉर्मेंस पैनल में ही परफ़ॉर्मेंस के बारे में अहम जानकारी पाना

अब आपको परफ़ॉर्मेंस पैनल के बाईं ओर मौजूद साइडबार में, नए अहम जानकारी टैब में कार्रवाई करने लायक अहम जानकारी मिल सकती है. ये अहम जानकारी, Lighthouse रिपोर्ट और परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाले पैनल से इकट्ठा की जाती है. इस पैनल को बंद किया जा रहा है.

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

DevTools टीम को इस बात का इंतज़ार रहेगा कि आपको अहम जानकारी कितनी काम की लगी, इसे बेहतर बनाने के तरीके क्या हैं, और PageSpeed Insights और Lighthouse जैसे अन्य टूल के साथ इनका इस्तेमाल करने का आपका अनुभव कैसा रहा. crbug.com/371170842 पर जाकर, बेझिझक अपने सुझाव/राय दें या शिकायत करें.

ज़्यादा लेआउट शिफ़्ट का पता आसानी से लगाना

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

इसके अलावा, लाइव मेट्रिक व्यू में लेआउट में होने वाले बदलाव का लॉग भी दिखता है. इसमें स्कोर और एलिमेंट, इंटरैक्शन टैब के बगल में दिखते हैं.

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

कंपोज़िट नहीं किए गए ऐनिमेशन का पता लगाना

ऐनिमेशन ट्रैक में अब आपको कंपोज़ नहीं किए गए ऐनिमेशन के बारे में काम की जानकारी मिलती है:

• अगर कोई सीएसएस प्रॉपर्टी मौजूद है, तो उसके हिसाब से ऐनिमेशन के नाम तय करता है.
• यह ट्रैक में, कंपोज़िट नहीं किए गए ऐनिमेशन को लाल रंग के त्रिकोण से मार्क करता है.
• यह खास जानकारी टैब में, कंपोज़िट करने में हुई गड़बड़ी की वजह दिखाता है.

ज़्यादा जानकारी के लिए, सिर्फ़ कंपोज़िटर प्रॉपर्टी का इस्तेमाल करना और लेयर की संख्या मैनेज करना लेख पढ़ें.

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

हार्डवेयर के एक साथ कई काम करने के लेवल को सेंसर पर ले जाया गया

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

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

पहचान छिपाकर लिखी गई स्क्रिप्ट को अनदेखा करें और स्टैक ट्रेस में अपने कोड पर फ़ोकस करें

Console में स्टैक ट्रेस अब उन फ़्रेम का पता लगाता है जो अनदेखी की गई फ़ाइलों से आते हैं. साथ ही, उन्हें अनदेखा करता है, छोटा करता है, और (अगर बड़ा किया गया है) धूसर कर देता है. इससे पहले, यह फ़ंक्शन के नाम को ग्रे नहीं करता था.

DevTools को सोर्स यूआरएल के बिना अनाम स्क्रिप्ट को अनदेखा करने के लिए सेट किया जा सकता है. इसके लिए, नई सेटिंग चालू करें. सेटिंग > अनदेखा की गई स्क्रिप्ट की सूची > check_box eval या कंसोल से अनाम स्क्रिप्ट पर जाएं.

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

Chromium से जुड़ी समस्याएं: 40279542, 40945570, 345248263.

तत्व > स्टाइल: ग्रिड ओवरले और सीएसएस-वाइड कीवर्ड के लिए, sideways-* लिखने के मोड की सुविधा

स्टाइल टैब में अब ये सुविधाएं उपलब्ध हैं:

• व्यू पोर्ट में मौजूद ग्रिड ओवरले अब sideways-rl और sideways-lr राइटिंग मोड के लिए ग्रिड दिखाता है.
• सीएसएस-वाइड कीवर्ड को हल करता है. इसका मतलब है कि अगर inherit कोई रंग है, तो स्टाइल टैब में इसके बगल में कलर पिकर दिखेगा.

Chromium से जुड़ी समस्याएं: 40280717, 40706051, 40501131.

टाइमस्पैन और स्नैपशॉट मोड में, नॉन-एचटीटीपी पेजों के लिए Lighthouse ऑडिट

Lighthouse अब टाइमस्पैन और स्नैपशॉट मोड में, नॉन-एचटीटीपी पेजों के लिए रिपोर्ट जनरेट कर सकता है.

सुलभता

इस वर्शन में, सुलभता से जुड़ी इन सुविधाओं को बेहतर बनाया गया है:

• सोर्स > एडिटर में, खुली हुई फ़ाइलों वाले टैब अब बंद किए जा सकते हैं. इसके लिए, X बटन पर फ़ोकस करें और Enter या Space दबाएं.
• परफ़ॉर्मेंस में जाकर, अब ट्रेस में कोई एंट्री चुनी जा सकती है. इसके बाद, संदर्भ मेन्यू खोलने के लिए Space दबाएं.
• परफ़ॉर्मेंस में, बाईं ओर मौजूद साइडबार में अहम जानकारी टैब को कीबोर्ड से ऐक्सेस किया जा सकता है. साथ ही, इसे "टैब किया जा सकता है".

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

अन्य हाइलाइट

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

• थ्रॉटलिंग की सेटिंग अब परफ़ॉर्मेंस और नेटवर्क पैनल के बीच सही तरीके से सिंक हो गई हैं (370332090).
• ऐप्लिकेशन > बैकग्राउंड सेवाएं > अनुमान के आधार पर लोड होने वाली सेवाएं > नियम में अब {} प्रीटी-प्रिंट बटन है. यह बटन, सोर्स > एडिटर (40279147) में मौजूद बटन जैसा ही है.
• लाइव एक्सप्रेशन: अब अपने-आप पूरा होने वाले किसी विकल्प को चुनने के बाद, Tab दबाने पर, टेक्स्ट को इंडेंट करने के बजाय, बदलाव करने वाले फ़ील्ड से बाहर निकल जाता है (349939551).
• तत्व > स्टाइल: anchor() और anchor-size() में नए सिंटैक्स का इस्तेमाल किया जा सकता है. इसमें, आर्ग्युमेंट का क्रम बदला जा सकता है और anchor-size() दिशा (343516786) को हटाया जा सकता है. इसके अलावा, फ़ॉलबैक रेंडरिंग को ठीक किया गया (365802559).
• नेटवर्क: GraphQL की झलक देखने की सुविधा से जुड़ी समस्या ठीक की गई (369931288).
• परफ़ॉर्मेंस: अब यह रिपोर्ट, ट्रेस लोड करने और प्रोसेस करने की प्रोग्रेस दिखाती है.
• WebAuthn: अब signal* तरीकों से बदले गए क्रेडेंशियल को डाइनैमिक रूप से अपडेट करता है (368467199).
• WebAssembly: Console में दिखने वाली चेतावनी से अब आपको यह पता चलता है कि WebAssembly मॉड्यूल के लिए एक से ज़्यादा डीबग सिंबल उपलब्ध हैं या नहीं. साथ ही, यह भी पता चलता है कि कौनसे सिंबल का इस्तेमाल किया जा रहा है (40879198, 369515221).
• वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का ओवरले, रेंडरिंग टैब 328487897 से हटा दिया गया है.
• जनरेटिव एआई की सुविधाओं के लिए, अब Chrome की सेटिंग सिंक करने की ज़रूरत नहीं है.

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

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

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

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

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

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

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