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

Sofia Emelianova
Sofia Emelianova

एआई के साथ की गई चैट का इतिहास सेव होना

एआई असिस्टेंस पैनल अब हर सेशन में आपकी चैट का इतिहास सेव करता है. इससे, DevTools या Chrome को फिर से लोड करने के बाद भी, Gemini के साथ की गई पिछली बातचीत देखी जा सकती है.

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

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

इमेज डिलीवरी की अहम जानकारी

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

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

इमेज डिलीवरी को ऑप्टिमाइज़ करने के तरीके के बारे में ज़्यादा जानने के लिए, इमेज को बेहतर ढंग से कोड में बदलना लेख पढ़ें.

क्लासिक और आधुनिक कीबोर्ड नेविगेशन

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

  • क्लासिक: माउस व्हील (टचपैड को ऊपर या नीचे) से ज़ूम करें और Shift + माउस व्हील से वर्टिकल स्क्रोल करें.
  • आधुनिक: माउस व्हील से वर्टिकल स्क्रोल करें, Shift + माउस व्हील से हॉरिज़ॉन्टल स्क्रोल करें, और Command/Control + माउस व्हील से ज़ूम करें.

अपनी पसंद का स्टाइल चुनने के लिए, पैनल के सबसे ऊपर दाएं कोने में, शॉर्टकट दिखाएं पर क्लिक करें. इसके बाद, क्लासिक या मॉर्डन चुनें. शॉर्टकट डायलॉग बॉक्स में, आपको उपलब्ध शॉर्टकट की चैटशीट भी मिलती है.

परफ़ॉर्मेंस पैनल के लिए उपलब्ध शॉर्टकट वाला डायलॉग.

फ़्लेम चार्ट में काम की स्क्रिप्ट को अनदेखा करना

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

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

DevTools, सेटिंग > नज़रअंदाज़ किए जाने वाले कोड की सूची में जोड़े गए नियमों को सेव करता है. साथ ही, डायलॉग बॉक्स में जाकर, इन्हें कभी भी चालू या बंद किया जा सकता है.

कर्सर घुमाने पर टाइमलाइन मार्कर और रेंज हाइलाइट होना

परफ़ॉर्मेंस ट्रेस को बेहतर तरीके से समझने में आपकी मदद करने के लिए, परफ़ॉर्मेंस पैनल अब ये काम करता है:

  • टाइमलाइन पर कर्सर घुमाने पर, आपको एक वर्टिकल मार्कर दिखता है. यह मार्कर, परफ़ॉर्मेंस ट्रेस के पूरे हिस्से पर होता है.
  • मुख्य ट्रैक में मौजूद आइटम पर कर्सर घुमाने पर, टाइमलाइन में कोई रेंज हाइलाइट हो जाती है.

ट्रैफ़िक कम करने के लिए सुझाई गई सेटिंग

परफ़ॉर्मेंस पैनल अब लाइव मेट्रिक और काम की कैप्चर सेटिंग ड्रॉप-डाउन मेन्यू, दोनों में ट्रॉथलिंग सेटिंग का सुझाव देता है.

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

फ़िलहाल, सीपीयू की थ्रॉटलिंग के लिए सुझाया गया 4x slowdown, सबसे ज़्यादा इस्तेमाल किया जाने वाला 4x slowdown है. नेटवर्क का सुझाव, Chrome UX रिपोर्ट के डेटा पर आधारित होता है. हालांकि, इसके लिए ज़रूरी है कि लाइव मेट्रिक में इसे चालू किया गया हो.

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

ओवरले में टाइमिंग मार्कर

टाइमिंग मार्कर, टाइमिंग ट्रैक से ट्रेस के सबसे नीचे ले जाए गए हैं. अब ये सभी ट्रैक के ऊपर ओवरले होते हैं. साथ ही, टाइमिंग ट्रैक छिपे होने पर भी दिखते हैं.

मार्कर को ट्रेस के सबसे नीचे ले जाने से पहले और बाद की इमेज.

समय ट्रैक में, आपके कस्टम mark() और measure() कॉल सेव रहते हैं.

खास जानकारी में JavaScript कॉल के स्टैक ट्रेस

परफ़ॉर्मेंस > खास जानकारी टैब में, अब आपको JavaScript कॉल के स्टैक ट्रेस दिखेंगे. इनमें, असाइन किए गए कॉल भी शामिल हैं.

खास जानकारी टैब में स्टैक ट्रेस जोड़ने से पहले और बाद में.

एलिमेंट में बैज की सेटिंग को मेन्यू में ले जाया गया

एलिमेंट पैनल में बैज की सेटिंग, डिफ़ॉल्ट रूप से छिपे हुए ऐक्शन बार से, दाईं ओर क्लिक करने पर दिखने वाले मेन्यू में ले जाई गई हैं.

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

नया 'नया क्या है' पैनल

नया क्या है पैनल को नया लुक दिया गया है, जो Chrome के डिज़ाइन से मिलता-जुलता है.

'नया क्या है' पैनल का पुराना और नया लुक.

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

Lighthouse 12.3.0

Lighthouse पैनल अब Lighthouse 12.3.0 पर काम करता है.

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

DevTools में Lighthouse पैनल का इस्तेमाल करने के बुनियादी तरीकों के बारे में जानने के लिए, Lighthouse: वेबसाइट की स्पीड ऑप्टिमाइज़ करना लेख पढ़ें.

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

अन्य हाइलाइट

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

  • सोर्स: रोके जाने पर, डीबगर अब अचानक से सेवा वर्कर कॉन्टेक्स्ट पर स्विच नहीं करता. ऐसा तब होता है, जब सेवा वर्कर कॉन्टेक्स्ट को रोके जाने के बाद बनाया गया हो (373893057).
  • परफ़ॉर्मेंस:
    • स्क्रिप्ट पर कर्सर घुमाने पर, अब फ़्लेम चार्ट में मौजूद टूलटिप में यूआरएल दिखते हैं. हालांकि, ऐसा तब ही होता है, जब कोई यूआरएल मौजूद हो (368541957).
    • खास जानकारी: पाई चार्ट को बार के तौर पर दिखाया गया है.
    • कैप्चर सेटिंग में मौजूद एक्सटेंशन डेटा चेकबॉक्स का नाम बदलकर कस्टम ट्रैक दिखाएं कर दिया गया है.
    • अहम जानकारी टैब में अब पास की गई अहम जानकारी (N) सेक्शन है, जो डिफ़ॉल्ट रूप से छोटा हो जाता है.
  • ऐप्लिकेशन > स्टोरेज: खाली कुंजियों के साथ स्टोरेज एंट्री बनाई जा सकती हैं, क्योंकि वे तकनीकी तौर पर मान्य हैं (373703285).
  • chrome:// पेजों के लिए, डिवाइस मोड अब बंद कर दिया गया है (40186276).
  • नेटवर्क:
    • सेटिंग चालू होने पर, एचएआर एक्सपोर्ट करें पर क्लिक करने पर, एक मेन्यू खुलता है. इसमें, संवेदनशील डेटा शामिल किए बिना और संवेदनशील डेटा के साथ, दो विकल्प होते हैं. पहले, मेन्यू को लंबे समय तक दबाकर (378076279) खोला जाता था.
    • cURL के तौर पर कॉपी करें सुविधा अब कुकी को बायपास करने के लिए -b एट्रिब्यूट का इस्तेमाल करती है. साथ ही, यह -H 'cookie:...' (40791742) के बजाय, ज़्यादा आसानी से पढ़ी जा सकती है.
  • सुलभता: अब पैनल में मौजूद टैब को बाईं या दाईं ओर ले जाया जा सकता है. इसके लिए, आपको संदर्भ मेन्यू (383164782) का इस्तेमाल करना होगा.
  • नेटवर्क के अनुरोध को ब्लॉक करने वाला टूल: यह कमांड मेन्यू सेटिंग, अब उससे जुड़े चेकबॉक्स (378058733) के साथ सिंक हो गई है.

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

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

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

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

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

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