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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

'एआई से पूछें' मेन्यू विकल्प और उससे जुड़ा बटन.

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

प्रॉम्प्ट का जवाब देने वाला एआई असिस्टेंस पैनल.

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

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

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

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

एआई के इनोवेशन वाला नया टैब.

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

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

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

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

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

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

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

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

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

बाईं ओर मौजूद साइडबार में, एनोटेशन का नया टैब और एनोटेट किया गया इवेंट, रेंज, और कनेक्शन.

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

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

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

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

ज़्यादा लेआउट शिफ़्ट को आसानी से देखना

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

'लेआउट में बदलाव' ट्रैक को अपडेट करने और 'खास जानकारी' टैब को फिर से व्यवस्थित करने से पहले और बाद की इमेज.

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

लाइव मेट्रिक व्यू में 'लेआउट में बदलाव' लॉग जोड़ने से पहले और बाद की इमेज.

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

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

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

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

ट्रैक में नाम देने से पहले और बाद के ऐनिमेशन, बिना कंपोज किए गए ऐनिमेशन को मार्क करना, और गड़बड़ी की वजह दिखाना.

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

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

हार्डवेयर के एक साथ कई काम करने की सुविधा, सेंसर में चली गई

हार्डवेयर के साथ एक साथ कई काम करने की सुविधा की सेटिंग, परफ़ॉर्मेंस पैनल से सेंसर पैनल पर ले जाई गई है.

'हार्डवेयर पर एक साथ कई काम करने की सुविधा' सेटिंग को सेंसर पैनल में ले जाने से पहले और बाद की इमेज.

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

बिना नाम वाली स्क्रिप्ट को अनदेखा करें और स्टैक ट्रेस में अपने कोड पर फ़ोकस करें

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

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

स्टैक ट्रेस में 'इग्नोर करें' सूची को बेहतर बनाने से पहले और बाद की इमेज.

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

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

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

एलिमेंट > स्टाइल टैब में अब ये काम किए जा सकते हैं:

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

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

टाइमस्पैन और स्नैपशॉट मोड में, एचटीटीपी पेजों के अलावा अन्य पेजों के लिए लाइटहाउस ऑडिट

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

टाइमस्पैन और स्नैपशॉट मोड में, एचटीटीपी पेज के लिए ऑडिट की सुविधा चालू करने से पहले और बाद की इमेज.

सुलभता

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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