DevTools में नया क्या है (Chrome 122)

रिकॉर्डर के एक्सटेंशन का आधिकारिक कलेक्शन लाइव है

एक्सपोर्ट और फिर से चलाने के लिए Recorder एक्सटेंशन का आधिकारिक कलेक्शन अब लाइव है.

रिकॉर्डर से सीधे कलेक्शन खोलने के लिए, रिकॉर्डर पैनल में सबसे ऊपर मौजूद ऐक्शन बार में, डाउनलोड करें एक्सपोर्ट करें > एक्सटेंशन पाएं... को चुनें.

नेटवर्क से जुड़ी सुविधाओं में सुधार

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

स्टेटस कॉलम में, गड़बड़ी की वजह

स्टेटस कॉलम में अब हमेशा, पुष्टि न होने की वजह दिखती है. पहले, आपको check_box बड़े अनुरोध की पंक्तियां चालू करनी पड़ती थीं या टेबल में अनुरोध चुनना पड़ता था.

Chromium से जुड़ी समस्याएं: 1506760.

कॉपी करने के लिए बेहतर सबमेन्यू

किसी अनुरोध के कॉपी करें सबमेन्यू को अब बेहतर तरीके से व्यवस्थित किया गया है.

इसके अलावा, cURL के तौर पर कॉपी करें विकल्प अब Windows पर क्लिपबोर्ड पर सही निर्देश कॉपी करता है.

Chromium से जुड़ी समस्याएं: 1267033, 1276452, 798498.

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

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

टाइमलाइन में ब्रेडक्रंब

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

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

Chromium से जुड़ी समस्याएं: 1467739.

मुख्य ट्रैक में इवेंट शुरू करने वाले

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

• स्टाइल या लेआउट अमान्य होना -> स्टाइल का फिर से हिसाब लगाएं या लेआउट
• ऐनिमेशन फ़्रेम का अनुरोध करें -> ऐनिमेशन फ़्रेम ट्रिगर हुआ
• ऐसे नंबर पर कॉलबैक करने का अनुरोध करें जो कुछ समय से इस्तेमाल में नहीं हैं -> ऐसे नंबर पर कॉलबैक करें जो कुछ समय से इस्तेमाल में नहीं हैं
• टाइमर इंस्टॉल करें -> टाइमर ट्रिगर किया गया
• WebSocket बनाएं -> भेजें... और WebSocket हैंडशेक पाएं या WebSocket को बंद करें

ऐरो देखने के लिए, ट्रेस में ऐसा इवेंट ढूंढें और उस पर क्लिक करें. पहले, यह सुविधा एक्सपेरिमेंट के तौर पर उपलब्ध थी.

Chromium से जुड़ी समस्याएं: 1434596.

Node.js DevTools के लिए, JavaScript वीएम इंस्टेंस सिलेक्टर मेन्यू

Node.js DevTools के परफ़ॉर्मेंस पैनल में, अब ऐक्शन बार में मौजूद ड्रॉप-डाउन मेन्यू से JavaScript VM इंस्टेंस चुना जा सकता है. जल्द ही बंद होने वाले JavaScript प्रोफ़ाइलर में भी ऐसी ही सुविधा उपलब्ध थी.

Chromium से जुड़ी समस्याएं: 1511813.

एलिमेंट में किए गए सुधार

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

अगली दो सुविधाओं के अलावा, एलिमेंट पैनल अब आपके आखिरी टैब को याद रखता है. उदाहरण के लिए, कंप्यूट की गई या प्रॉपर्टी.

स्टाइल में अब ::view-transition स्यूडो-एलिमेंट में बदलाव किया जा सकता है

अब इंस्पेक्टर स्टाइल शीट का इस्तेमाल करके, स्टाइल में ::view-transition सीएसएस स्यूडो-एलिमेंट में बदलाव किया जा सकता है.

ज़्यादा जानकारी के लिए, View Transitions API की मदद से आसान और बेहतर ट्रांज़िशन लेख पढ़ें.

Chromium से जुड़ी समस्याएं: 1511233.

ब्लॉक कंटेनर के लिए align-content प्रॉपर्टी की सहायता

align-content प्रॉपर्टी अब table-caption और table-cell के साथ-साथ, किसी भी ब्लॉक कंटेनर के साथ काम करती है. पहले, यह सिर्फ़ ग्रिड और फ़्लेक्स के साथ काम करता था.

Chromium से जुड़ी समस्याएं: 1500511.

सोर्स में नया शॉर्टकट और निर्देश

अब लॉगपॉइंट बनाने के लिए, Cmd (Mac) / Ctrl (Win) + Shift + सोर्स में लाइन नंबर पर क्लिक करें. यह शॉर्टकट, शर्त के हिसाब से ब्रेकपॉइंट सेट करने के लिए, पहले से मौजूद Cmd (Mac) / Ctrl (Win) + क्लिक के साथ जोड़ा गया है.

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

Chromium से जुड़ी समस्याएं: 1486933, 1467464.

इम्यूलेट किए गए फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए, डिवाइस के अलग-अलग पोज़िशन के हिसाब से डिसप्ले में बदलाव करने की सुविधा

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

इसके अलावा, डिवाइस की सूची में, फ़ोल्ड किए जा सकने वाले एक नए डिवाइस को जोड़ा गया है: Asus Zenbook Fold.

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

डाइनैमिक थीम

DevTools अब Chrome की कलर थीम से अपने-आप मैच हो जाता है. थीम सेट करने के लिए:

1. नया टैब खोलें और सबसे नीचे दाएं कोने में, बदलाव करें Chrome को पसंद के मुताबिक बनाएं पर क्लिक करें.
2. 'दिखने का तरीका' में जाकर, वॉलपेपर थीम बदलें से कोई थीम चुनें या कोई कलर पैलेट चुनें.

Chromium से जुड़ी समस्याएं: 1483276.

नेटवर्क और ऐप्लिकेशन पैनल में, तीसरे पक्ष की कुकी के फ़ेज़ आउट से जुड़ी चेतावनियां

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

नेटवर्क में, चेतावनी वाले चेतावनी आइकॉन वाला अनुरोध ढूंढें. उस पर क्लिक करें और कुकी टैब खोलें.

ऐप्लिकेशन में, स्टोरेज > कुकी पर जाएं और किसी डोमेन पर क्लिक करें. पीले रंग में हाइलाइट की गई कुकी, ब्राउज़र में सेव नहीं होती हैं.

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

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

Chromium से जुड़ी समस्याएं: 1506225, 1503961.

Lighthouse 11.4.0

Lighthouse पैनल अब Lighthouse 11.4.0 पर काम करता है. बदलावों की पूरी सूची देखें. इसमें एक नया ऑडिट भी शामिल है. इससे आपको यह पता चलता है कि आपकी वेबसाइट अब भी तीसरे पक्ष की कुकी का इस्तेमाल करती है या नहीं.

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

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

सुलभता

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

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

Chromium से जुड़ी समस्याएं: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

अन्य हाइलाइट

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

• ऐनिमेशन:
  • स्क्रीनशॉट पॉपओवर के बाहर रेंडर होने की गड़बड़ी को ठीक किया गया (1506991).
  • हटाए गए ऐनिमेशन नोड को 'हटाया गया' के तौर पर मार्क न करने की गड़बड़ी को ठीक किया गया (1506561).
• नेटवर्क:
  • हेडर में बदलाव: हेडर टैब में, गलत बैंगनी बिंदु आइकॉन से जुड़ी गड़बड़ी को ठीक किया गया (1507856).
  • झलक: ग़ैर-ज़रूरी डबल डिकोडिंग (1509336) से जुड़ी गड़बड़ी को ठीक किया गया.
  • शॉर्ट वीडियो के अनुरोध न दिखने की गड़बड़ी को ठीक किया गया (1509862).
• ऐप्लिकेशन > IndexedDB: अन्य पैनल के साथ एक जैसा दिखने के लिए, ऐक्शन बार में बटनों को फिर से व्यवस्थित किया गया (1393800).
• सेंसर: जगह की जानकारी उपलब्ध न होने पर, गलत कॉलबैक मिलने की गड़बड़ी को ठीक किया गया (1486859).
• परफ़ॉर्मेंस:
  • कचरा इकट्ठा करें बटन के लिए, अब सही आइकॉन जोड़ा गया है. अब इस बटन पर "कचरादान" के बजाय "झाड़ू" दिखेगा (1507530).
  • परफ़ॉर्मेंस ट्रेस अब about:blank (1509947) पर नेविगेट करते समय डेटा को सेव रखता है.

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

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

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

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

• crbug.com पर जाकर, हमें सुझाव/राय दें या शिकायत करें. साथ ही, किसी सुविधा का अनुरोध करें.
• DevTools में more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणियां करें.

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

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