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

Kayce Basques

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

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

सीएसएस प्रॉपर्टी से जिन नोड पर असर पड़ा है उन्हें हाइलाइट करना

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

   

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

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

   

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

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

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

कमांड मेन्यू में जाकर, किसी हिस्से का स्क्रीनशॉट लेना

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

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

   

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

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

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

   

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

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

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

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

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

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

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

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

पेज लोड की परफ़ॉर्मेंस का विश्लेषण करने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करने का उदाहरण देखने के लिए, मुख्य थ्रेड पर कम काम करें लेख पढ़ें.

परफ़ॉर्मेंस रिकॉर्डिंग में लंबे टास्क

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

14वीं इमेज. परफ़ॉर्मेंस रिकॉर्डिंग में, लंबे समय तक चलने वाले टास्क पर कर्सर घुमाना

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

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

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

डीओएम के बारे में नया ट्यूटोरियल

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

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

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

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

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

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

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

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