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

Sofia Emelianova
Sofia Emelianova

एआई से की गई चैट का इतिहास सेव करने की सुविधा

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

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

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

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

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

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

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

क्लासिक और मॉडर्न कीबोर्ड नेविगेशन

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

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

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

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

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

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

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

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

कर्सर घुमाने पर, टाइमलाइन मार्कर और रेंज हाइलाइट करने की सुविधा

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

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

थ्रॉटलिंग की सुझाई गई सेटिंग

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Lighthouse 12.3.0

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

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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