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

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

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

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

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

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

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

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

फ़ुल-पेज सुलभता ट्री

Chromium की समस्या: 887173

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

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

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

बदलाव टैब

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

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

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

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

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

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

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

Chromium की समस्या: 1257499

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

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

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

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

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

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

Chromium की समस्या: 1110752

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

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

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

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

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

Chromium की समस्या: 1269674

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

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

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

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

Chromium की समस्या: 1130859

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

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

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

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

Chromium की समस्या: 1270562

Flexbox एडिटर में, row-reverse और column-reverse के साथ काम करता है

Flexbox एडिटर ने flex-direction में row-reverse और column-reverse के साथ काम करने के लिए, दो नए बटन जोड़े हैं.

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

Chromium की समस्या: 1263866

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

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

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

XHR को फिर से चलाएं

Chromium की समस्या: 1050021

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

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

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

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

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

Chromium की समस्या: 1255073

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

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

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

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

फ़ोकस करने लायक सभी एलिमेंट के लिए, लाइटहाउस ऑडिट में एक यूनीक `id` होना चाहिए. इसमें दो एलिमेंट दिखते हैं और दोनों एलिमेंट एक ही `id` के साथ होते हैं

Chromium की समस्या: 772558

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

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

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

Chromium की समस्या: 1241848

अन्य हाइलाइट

इस रिलीज़ में ये कुछ अहम सुधार हैं:

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

[प्रयोग के तौर पर] Reporting API पैनल में एंडपॉइंट

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

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

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

रिपोर्टिंग एपीआई पैनल

Chromium की समस्या: 1200732

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

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

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

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

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

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

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 रद्द कर दिया गया है.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59