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

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

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

Recorder से सीधे कलेक्शन खोलने के लिए, 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 सीएसएस pseudo-elements में ब��लाव किया जा सकता है.

ज़्यादा जानकारी के लिए, View Transits 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.

लाइटहाउस 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 में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.