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

Sofia Emelianova
Sofia Emelianova
GitHub

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 को सोर्स यूआरएल के बिना अनाम स्क्रिप्ट को अनदेखा करने के लिए सेट किया जा सकता है. इसके लिए, नई चालू करें. सेटिंग > अनदेखा की गई स्क्रिप्ट की सूची > 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 से जुड़ी किसी अन्य चीज़ के बारे में चर्चा करने के लिए, इन विकल्पों का इस्तेमाल करें.

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

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