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

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

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 वीएम इंस्टेंस चुना जा सकता है. ऐसी ही एक सुविधा जल्द ही बंद होने वाले 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) + click + क्लिक का अतिरिक्त है.

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

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

फ़ोल्ड किए जा सकने वाले एम्युलेट किए गए डिवाइसों के लिए पॉस्चर सपोर्ट

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

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

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

डाइनैमिक थीमिंग

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

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

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

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

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

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

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

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

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

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

लाइटहाउस 11.4.0

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).
• परफ़ॉर्मेंस:
  • कचरा इकट्ठा करें बटन पर अब सही आइकॉन, "मॉप" हो गया है "bin" के बजाय (15,07,530).
  • about:blank (1509947) पर जाने पर, परफ़ॉर्मेंस ट्रेस अब डेटा को सेव करके रखता है.

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

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

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

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

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

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

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