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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

प्रॉम्प्ट का जवाब देने वाला, एआई की मदद से काम करने वाला नया पैनल.

नए पैनल का इस्तेमाल करने के सबसे सही तरीके के बारे में ज़्यादा जानने के लिए, DevTools AI की मदद से काम करने के 5 बेहतरीन काम लेख पढ़ें और स्टाइल के लिए एआई (AI) से जुड़ी सहायता लेख पढ़ें.

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

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

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

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

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

Console में की गई अहम जानकारी को सिर्फ़ एक क्लिक से ऐक्सेस किया जा सकता है

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

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

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

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

परफ़ॉर्मेंस के नतीजों की व्याख्या करना और उन्हें शेयर करना

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

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

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

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

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

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

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).
  • नेटवर्क: ग्राफ़क्यूएल की ठीक की गई झलक (369931288).
  • परफ़ॉर्मेंस: अब ट्रेस को लोड और प्रोसेस करने में हुई बढ़ोतरी की रिपोर्ट करता है.
  • WebAuthn: अब signal* तरीकों से बदले गए क्रेडेंशियल, डाइनैमिक तौर पर अपडेट हो जाते हैं (368467199).
  • WebAssembly: कंसोल में चेतावनी से अब आपको यह पता चलता है कि किसी WebAssembly मॉड्यूल के लिए एक से ज़्यादा डीबग सिंबल उपलब्ध हैं या नहीं. साथ ही, यह भी पता चलता है कि इनमें से कौनसा सिंबल इस्तेमाल किया जा रहा है (40879198, 369515221).
  • रेंडरिंग टैब 328487897 से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का ओवरले हटा दिया गया है.
  • जनरेटिव एआई की सुविधाओं के लिए, अब Chrome की सेटिंग सिंक करने की ज़रूरत नहीं है.

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

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

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

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

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

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