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

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

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

Elements पैनल में, Accessibility पेन खोलें. इसके बाद, Enable full-page accessibility tree चेकबॉक्स को चुनें. इसके बाद, DevTools को फिर से लोड करें. आपको Elements पैनल में, सुलभता का नया बटन दिखेगा.

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

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

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

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

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

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

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

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

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

यूज़र फ़्लो रिकॉर्ड करने के लिए, टाइम आउट की अवधि बढ़ाना

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

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

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

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

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

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

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

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

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

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

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

प्रॉपर्टी पैन में फ़िल्टर करने की नई सुविधा

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

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

इन सुधारों की मदद से, आपको अपनी पसंद की प्रॉपर्टी को तुरंत ऐक्सेस करने में मदद मिलती है. इससे आपकी प्रॉडक्टिविटी बेहतर होती है!

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

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

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

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

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

Lighthouse पैनल में Lighthouse 9

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

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

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

​

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

सोर्स पैनल को बेहतर बनाया गया

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

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

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

अन्य हाइलाइट

इस रिलीज़ में, इन समस्याओं को ठीक किया गया है:

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

[एक्सपेरिमेंट के तौर पर उपलब्ध] Reporting API के पैनल में एंडपॉइंट

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

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

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

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

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

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

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

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

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

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

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