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

Recorder के एक्सटेंशन का आधिकारिक कलेक्शन अब उपलब्ध है

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

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

नेटवर्क में सुधार

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

स्टेटस कॉलम में, सफल न होने की वजह

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

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

कॉपी सबमेन्यू में सुधार किया गया

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

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

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

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

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

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

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

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

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

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

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

• स्टाइल या लेआउट अमान्य होना -> स्टाइल फिर से कैलकुलेट करें या लेआउट
• ऐनिमेशन फ़्रेम का अनुरोध करें -> ऐनिमेशन फ़्रेम ट्रिगर हुआ
• Request Idle Callback -> Fire Idle Callback
• Install Timer -> Timer Fired
• WebSocket बनाएं -> भेजें... और WebSocket हैंडशेक पाएं या WebSocket को बंद करें

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

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

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

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

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

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

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

अगली दो सुविधाओं के अलावा, Elements पैनल अब उस टैब को याद रखता है जिसे आपने पिछली बार खोला था. उदाहरण के लिए, Computed या Properties.

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

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

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

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

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

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