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

Kayce Basques

आपका फिर से स्वागत है! यहां नए बदलावों के बारे में जानकारी दी गई है.

इस पेज का वीडियो वर्शन

सीएसएस प्रॉपर्टी से प्रभावित सभी नोड हाइलाइट करें

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

पहली इमेज. margin प्रॉपर्टी पर कर्सर घुमाने से, उन सभी नोड के मार्जिन हाइलाइट हो जाते हैं जिन पर उस एलान का असर पड़ा है

ऑडिट पैनल में Lighthouse v4

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

रिपोर्ट की PWA कैटगरी में अब बैज स्कोरिंग सिस्टम का इस्तेमाल किया जाता है.

तीसरी इमेज. पीडब्ल्यूए कैटगरी के लिए बैज स्कोरिंग की नई प्रणाली

WebSocket बाइनरी मैसेज व्यूअर

बाइनरी WebSocket मैसेज का कॉन्टेंट देखने के लिए:

1. Network पैनल खोलें. नेटवर्क गतिविधि का विश्लेषण करने की बुनियादी बातें जानने के लिए, नेटवर्क गतिविधि की जांच करना लेख पढ़ें.

   

   चौथी इमेज. नेटवर्क पैनल

2. WebSocket कनेक्शन नहीं हैं उन सभी संसाधनों को फ़िल्टर करने के लिए, WS पर क्लिक करें.

   

   पांचवी इमेज. WS पर क्लिक करने के बाद, सिर्फ़ WebSockety कनेक्शन दिखते हैं

3. WebSocket कनेक्शन की जांच करने के लिए, उसके नाम पर क्लिक करें.

   

   छठी इमेज. WebSocket कनेक्शन की जांच करना

4. मैसेज टैब पर क्लिक करें.

   

   सातवीं इमेज. मैसेज टैब

5. बाइनरी मैसेज की किसी एंट्री पर क्लिक करके उसकी जांच करें.

   

   आठवीं इमेज. बाइनरी मैसेज की जांच करना

मैसेज को Base64 या UTF-8 में बदलने के लिए, व्यूअर में सबसे नीचे मौजूद ड्रॉपडाउन मेन्यू का इस्तेमाल करें. बाइनरी मैसेज को क्लिपबोर्ड पर कॉपी करने के लिए, क्लिपबोर्ड पर कॉपी करें पर क्लिक करें.

नौवीं इमेज. बाइनरी मैसेज को Base64 के तौर पर देखना

कमांड मेन्यू में, एरिया स्क्रीनशॉट लेने की सुविधा

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

1. DevTools पर फ़ोकस करें. इसके बाद, कमांड मेन्यू खोलने के लिए Control+Shift+P या Command+Shift+P (Mac) दबाएं.

   

   दसवीं इमेज. कमांड मेन्यू

2. area टाइप करना शुरू करें. इसके बाद, स्क्रीन के किसी हिस्से का स्क्रीनशॉट लें को चुनें. इसके बाद, Enter दबाएं.

3. माउस को व्यूपोर्ट के उस सेक्शन पर खींचें और छोड़ें जिसका स्क्रीनशॉट लेना है.

   

   ग्यारहवीं इमेज. स्क्रीनशॉट लेने के लिए, व्यूपोर्ट का हिस्सा चुनना

नेटवर्क पैनल में सर्विस वर्कर फ़िल्टर

नेटवर्क पैनल के फ़िल्टर टेक्स्ट बॉक्स में is:service-worker-initiated या is:service-worker-intercepted टाइप करें. इससे आपको वे अनुरोध दिखेंगे जिन्हें किसी सर्विस वर्कर ने ट्रिगर किया है (initiated) या जिनमें बदलाव किया है (intercepted).

इमेज 12. is:service-worker-initiated के हिसाब से फ़िल्टर करना

13वीं इमेज. is:service-worker-intercepted के हिसाब से फ़िल्टर करना

नेटवर्क लॉग को फ़िल्टर करने के बारे में ज़्यादा जानने के लिए, संसाधन फ़िल्टर करना लेख पढ़ें.

परफ़ॉर्मेंस पैनल से जुड़े अपडेट

परफ़ॉर्मेंस रिकॉर्डिंग अब लंबे समय तक चलने वाले टास्क और फ़र्स्ट पेंट को मार्क करती हैं.

पेज लोड होने की परफ़ॉर्मेंस का विश्लेषण करने के लिए, Performance पैनल का इस्तेमाल करने का उदाहरण देखने के लिए, Do less main thread work लेख पढ़ें.

परफ़ॉर्मेंस रिकॉर्डिंग में लंबे समय तक चलने वाले टास्क

परफ़ॉर्मेंस रिकॉर्डिंग में अब लंबे समय तक चलने वाले टास्क दिखते हैं.

चौदहवीं इमेज. परफ़ॉर्मेंस रिकॉर्डिंग में किसी लंबे टास्क पर कर्सर घुमाते हुए

'समय' सेक्शन में फ़र्स्ट पेंट

परफ़ॉर्मेंस रिकॉर्डिंग के टाइमिंग सेक्शन में अब फ़र्स्ट पेंट को मार्क किया जाता है.

15वीं इमेज. 'समय' सेक्शन में फ़र्स्ट पेंट

नया डीओएम ट्यूटोरियल

DOM से जुड़ी सुविधाओं के बारे में जानने के लिए, DOM को देखने और उसमें बदलाव करने की सुविधा का इस्तेमाल शुरू करना लेख पढ़ें.

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

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

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

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

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

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

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