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

Kayce Basques

आपका फिर से स्वागत है! पेश है नया क्या है.

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

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

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

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

ऑडिट पैनल में लाइटहाउस v4

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

   

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

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

   

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

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

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

निर्देश मेन्यू में जाकर, आस-पास के इलाके का स्क्रीनशॉट कैप्चर करें

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

1. DevTools पर फ़ोकस करें और फिर Control+Shift+P दबाएं या Command मेन्यू खोलने के लिए, 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 के हिसाब से फ़िल्टर किया जा रहा है

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

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

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

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

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

परफ़ॉर्मेंस रिकॉर्डिंग में अब लंबे tasks दिखेंगे.

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

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

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

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

नया DOM ट्यूटोरियल

DOM से संबंधित चीज़ों के बारे में जानने के लिए DOM देखने और बदलने के साथ शुरू करें देखें सुविधाएँ.

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

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

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

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

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

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

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