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

Jecelyn Yeen

झलक देखने की सुविधा: सुलभता ट्री को बड़ा करके पूरे पेज पर देखना

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

एलिमेंट पैनल में, सुलभता पैनल खोलें और सुलभता ट्री को बड़ा करके पूरे पेज पर देखें चेकबॉक्स को चुनें. इसके बाद, DevTools को रीफ़्रेश करें. आपको एलिमेंट पैनल में, सुलभता से जुड़ा एक नया बटन दिखेगा.

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

कोई नोड चुनें और डीओएम ट्री व्यू पर वापस टॉगल करें. अब उससे जुड़ा DOM नोड चुना गया है. डीओएम नोड और उसके सुलभता ट्री नोड के बीच मैपिंग को समझने का यह एक शानदार तरीका है. यह डीओएम ट्री ⬌ सुलभता ट्री व्यू के लिए भी काम करता है!

पहले, सुलभता ट्री सुलभता पैनल में उपलब्ध था. यह व्यू सीमित है. इसमें सिर्फ़ एक नोड और उसके पैरंट नोड को एक्सप्लोर किया जा सकता है.

हमारी टीम, अब भी इस सुविधा पर लगातार काम कर रही है. इस सुविधा को और बेहतर बनाने के लिए, हमें आपका सुझाव चाहिए!

सुलभता ट्री को बड़ा करके पूरे पेज पर देखना

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

'बदलाव' टैब में ज़्यादा सटीक बदलाव

बदलाव टैब में, कोड में किए गए बदलाव अपने-आप प्रिंट हो जाते हैं.

पहले, छोटे किए गए सोर्स कोड में किए गए असल बदलावों को ट्रैक करना मुश्किल था, क्योंकि पूरा कोड एक ही लाइन में दिखता है.

बदलाव टैब

Chromium से जुड़ी समस्याएं: 1238818, 1268754 , 1086491

यूज़र फ़्लो रिकॉर्डिंग के लिए ज़्यादा टाइम आउट सेट करना

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

उदाहरण के लिए, मैंने मेन्यू आइटम को लोड करने और उस पर क्लिक करने के लिए, इस डेमो पेज पर उपयोगकर्ता फ़्लो रिकॉर्ड किया. हालांकि, मेन्यू के आइटम लोड होने में 6 सेकंड लगते हैं. इस उपयोगकर्ता फ़्लो को फिर से चलाने में समस्या हुई, क्योंकि यह पांच सेकंड (डिफ़ॉल्ट टाइम आउट) से ज़्यादा चला.

हम इस समस्या को ठीक करने के लिए, टाइम आउट की नई सेटिंग का इस्तेमाल कर सकते हैं. उस चरण को बड़ा करें जिस पर हम मेन्यू आइटम पर क्लिक करते हैं. टाइम आउट जोड़ें पर क्लिक करके, चरण में बदलाव करें और इसे 6000 मिलीसेकंड (6 सेकंड के बराबर) पर सेट करें.

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

यूज़र फ़्लो रिकॉर्डिंग के लिए टाइम आउट सेटिंग

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

पक्का करें कि आपके पेजों को बैक/फ़ॉरवर्ड कैश मेमोरी टैब की मदद से कैश किया जा सकता हो

बैक/फ़ॉरवर्ड कैश मेमोरी (या bfcache), ब्राउज़र का ऐसा ऑप्टिमाइज़ेशन है जो तुरंत पीछे और आगे जाने की सुविधा देता है.

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

किसी पेज की जांच करने के लिए, Chrome में उस पेज पर जाएं. इसके बाद, DevTools में ऐप्लिकेशन > बैक-फ़ॉरवर्ड कैश पर जाएं. इसके बाद, बैक/फ़ॉरवर्ड कैश मेमोरी की जांच करें बटन पर क्लिक करें. ऐसा करने पर, DevTools पेज से दूसरे पेज पर जाएगा और फिर वापस आ जाएगा. इससे यह पता चलेगा कि पेज को bfcache से वापस लाया जा सकता है या नहीं.

वेब डेवलपर के तौर पर, यह जानना ज़रूरी है कि सभी ब्राउज़र पर, bfcache के लिए अपने पेजों को कैसे ऑप्टिमाइज़ किया जाए. इससे, उपयोगकर्ताओं को ब्राउज़िंग का बेहतर अनुभव मिलेगा. खास तौर पर, उन लोगों को जो धीमे नेटवर्क या डिवाइसों का इस्तेमाल करते हैं.

बैक/फ़ॉरवर्ड कैश मेमोरी टैब

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

प्रॉपर्टी पैनल का नया फ़िल्टर

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

डिफ़ॉल्ट रूप से, जिन प्रॉपर्टी की वैल्यू null या undefined होती है वे नहीं दिखती हैं. सभी प्रॉपर्टी देखने के लिए, सभी दिखाएं चेकबॉक्स को चालू करें.

इन बेहतर सुविधाओं की मदद से, अपनी पसंदीदा प्रॉपर्टी को तुरंत ऐक्सेस किया जा सकता है. इससे आपकी प्रोडक्टिविटी भी बढ़ेगी!

प्रॉपर्टी पैनल फ़िल्टर

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

सीएसएस फ़ोर्स्ड-कलर्स मीडिया फ़ीचर को एम्युलेट करना

forced-colors सीएसएस मीडिया फ़ीचर का इस्तेमाल, यह पता लगाने के लिए किया जाता है कि उपयोगकर्ता एजेंट ने फ़ोर्स्ड कलर मोड (जैसे, Windows का ज़्यादा कंट्रास्ट मोड) चालू किया है या नहीं. इस मोड में, पेज पर उपयोगकर्ता के चुने गए सीमित रंग पैलेट का इस्तेमाल किया जाता है.

कमांड मेन्यू खोलें, रेंडरिंग दिखाएं कमांड चलाएं. इसके बाद, सीएसएस मीडिया फ़ीचर फ़ोर्स्ड-कलर्स को एम्युलेट करें ड्रॉपडाउन सेट करें.

सीएसएस फ़ोर्स्ड-कलर्स मीडिया फ़ीचर

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

कर्सर घुमाने पर रूलर दिखाने का निर्देश

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

पहले, पेज रूलर को सिर्फ़ सेटिंग > रूलर दिखाएं चेकबॉक्स की मदद से चालू किया जा सकता था.

कर्सर घुमाने पर रूलर दिखाने का निर्देश

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

फ़्लेक्सबॉक्स एडिटर में row-reverse और column-reverse का इस्तेमाल करना

फ़्लेक्सबॉक्स एडिटर में दो नए बटन जोड़े गए हैं, ताकि flex-direction में row-reverse और column-reverse का इस्तेमाल किया जा सके.

फ़्लेक्सबॉक्स एडिटर

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

XHR को फिर से चलाने और खोज के सभी नतीजों को बड़ा करने के लिए, कीबोर्ड के नए शॉर्टकट

नेटवर्क पैनल में XHR को फिर से चलाने के लिए कीबोर्ड शॉर्टकट

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

एक्सएचआर को फिर से चलाना

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

खोज के सभी नतीजों को बड़ा करने के लिए कीबोर्ड शॉर्टकट

खोज टैब में एक नया शॉर्टकट जोड़ा गया है. इसकी मदद से, खोज के सभी नतीजों को बड़ा और छोटा किया जा सकता है. पहले, खोज के नतीजों को सिर्फ़ एक बार में एक फ़ाइल पर क्लिक करके बड़ा और छोटा किया जा सकता था.

Esc > तीन बिंदु मेन्यू > खोजें का इस्तेमाल करके, खोज टैब खोलें. खोज के नतीजों की सूची देखने के लिए, खोज स्ट्रिंग (जैसे, फ़ंक्शन) डालें और Enter दबाएं. खोज के नतीजों पर फ़ोकस करें और खोजी गई फ़ाइलों को बड़ा/छोटा करने के लिए, इस शॉर्टकट का इस्तेमाल करें:

  • Windows / Linux - Ctrl + Shift + { या }
  • MacOS - Cmd + Options + { या }

Chrome DevTools में कीबोर्ड शॉर्टकट के रेफ़रंस के लिए, कीबोर्ड शॉर्टकट पर जाएं.

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

लाइटहाउस पैनल में लाइटहाउस 9

Lighthouse पैनल अब Lighthouse 9 पर काम कर रहा है. Lighthouse अब एक ही आईडी शेयर करने वाले सभी एलिमेंट की सूची दिखाएगा.

सुलभता से जुड़ी एक आम समस्या यह है कि एलिमेंट का आईडी यूनीक नहीं है. उदाहरण के लिए, aria-labelledby एट्रिब्यूट में रेफ़र किए गए आईडी का इस्तेमाल, एक से ज़्यादा एलिमेंट पर किया जाता है.

अपडेट के बारे में ज़्यादा जानकारी के लिए, Lighthouse 9.0 में नया क्या है लेख पढ़ें.

​'फ़ोकस किए जा सकने वाले सभी एलिमेंट में यूनीक `आईडी` होना चाहिए' के लिए Lighthouse ऑडिट. इसमें दो एलिमेंट दिखाए गए हैं, जिनमें दोनों का `आईडी` एक ही है

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

बेहतर सोर्स पैनल

सोर्स पैनल में, ऐप्लिकेशन क्रैश या हैंग होने से बचाने के लिए कई सुधार किए गए हैं. ऐसा इसलिए किया गया है, क्योंकि हमने इसे CodeMirror 6 का इस्तेमाल करने के लिए अपग्रेड किया है. यहां कुछ अहम सुधारों के बारे में बताया गया है:

  • बड़ी फ़ाइलें (जैसे, WASM, JavaScript) खोलने में काफ़ी तेज़ी से काम करता है
  • कोड में आगे बढ़ते समय, अब रैंडम स्क्रोल करने की ज़रूरत नहीं है
  • बदलाव किए जा सकने वाले सोर्स (जैसे, स्निपेट, स्थानीय बदलाव) के लिए, अपने-आप जानकारी भरने के बेहतर सुझाव

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

अन्य हाइलाइट

इस रिलीज़ में, कुछ ऐसी समस्याएं ठीक की गई हैं जिन पर ध्यान देने की ज़रूरत है:

  • नेटवर्क अनुरोधों का वॉटरफ़ॉल डायग्राम सही तरीके से दिखाना. पहले, स्टाइल काम नहीं कर रही थी. (1275501)
  • सोर्स पैनल में, बहुत लंबी लाइनों वाले दस्तावेज़ों में खोजते समय, कोड हाइलाइट नहीं हो पा रहा था. अब यह समस्या ठीक हो गई है. (1275496)
  • नेटवर्क अनुरोधों में, डुप्लीकेट पेलोड टैब नहीं होगा. (1273972)
  • परफ़ॉर्मेंस पैनल के खास जानकारी सेक्शन में, लेआउट शिफ़्ट की जानकारी न दिखने की समस्या को ठीक किया गया. (1259606)
  • नेटवर्क सर्च क्वेरी में, मनमुताबिक वर्ण (जैसे, ,, .) इस्तेमाल किए जा सकते हैं. (1267196)

[प्रयोग के लिए उपलब्ध] Reporting API पैनल में एंडपॉइंट

एक्सपेरिमेंट के तौर पर उपलब्ध Reporting API पैनल को Chrome 96 में लॉन्च किया गया था. इससे आपको अपने पेज पर जनरेट हुई रिपोर्ट और उनकी स्थिति को मॉनिटर करने में मदद मिलती है.

एंडपॉइंट सेक्शन अब उपलब्ध है. इससे आपको Reporting-Endpoints हेडर में कॉन्फ़िगर किए गए सभी एंडपॉइंट की खास जानकारी मिलती है.

सुरक्षा उल्लंघनों, बंद किए गए एपीआई कॉल वगैरह को मॉनिटर करने के लिए, Reporting API का इस्तेमाल करने का तरीका जानें.

Reporting API पैनल

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

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

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

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

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

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

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