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

Kayce Basques

Audits पैनल में एक से ज़्यादा क्लाइंट के साथ काम करने की सुविधा

अब ऑडिट पैनल का इस्तेमाल, DevTools की अन्य सुविधाओं के साथ किया जा सकता है. जैसे, अनुरोध ब्लॉक करना और लोकल ओवरराइड.

उदाहरण के लिए, मान लें कि ऑडिट पैनल की रिपोर्ट में बताया गया है कि आपके पेज का परफ़ॉर्मेंस स्कोर 70 है. साथ ही, परफ़ॉर्मेंस को बेहतर बनाने का एक सबसे बड़ा मौका, रेंडरिंग को ब्लॉक करने वाले संसाधनों को हटाना है.

इमेज 1. शुरुआती परफ़ॉर्मेंस स्कोर.

इमेज 2. शुरुआती रिपोर्ट में बताया गया है कि रेंडरिंग को ब्लॉक करने वाली तीन स्क्रिप्ट की वजह से समस्या आ रही है.

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

इमेज 3. समस्या पैदा करने वाली स्क्रिप्ट को ब्लॉक करने के लिए, अनुरोध ब्लॉक करना टैब का इस्तेमाल करें.

इसके बाद, पेज का फिर से ऑडिट करें:

इमेज 4. समस्या पैदा करने वाली स्क्रिप्ट को ब्लॉक करने के बाद, परफ़ॉर्मेंस स्कोर बढ़कर 97 हो गया.

इसके अलावा, हर स्क्रिप्ट टैग में async एट्रिब्यूट जोड़ने के लिए, लोकल ओवरराइड का इस्तेमाल किया जा सकता है. हालांकि, "हम इसे पढ़ने वालों के लिए एक टास्क के तौर पर छोड़ देंगे." वीडियो डेमो देखने के लिए, यह ट्वीट देखें.

Chromium की समस्या #991906

पेमेंट हैंडलर डीबग करना

ऐप्लिकेशन पैनल के बैकग्राउंड सेवाएं सेक्शन में अब पेमेंट हैंडलर इवेंट काम करते हैं.

1. ऐप्लिकेशन पैनल पर जाएं.
2. पेमेंट हैंडलर पैनल खोलें.

3. रिकॉर्ड करें पर क्लिक करें. DevTools, पेमेंट हैंडलर इवेंट को तीन दिनों तक रिकॉर्ड करता है. भले ही, DevTools बंद हो.

   

   इमेज 5. पेमेंट हैंडलर के इवेंट रिकॉर्ड किए जा रहे हैं.

4. अगर पेमेंट हैंडलर के इवेंट किसी दूसरे ऑरिजिन पर होते हैं, तो दूसरे डोमेन से इवेंट दिखाएं को चालू करें.

5. पेमेंट हैंडलर इवेंट ट्रिगर करने के बाद, इवेंट के बारे में ज़्यादा जानने के लिए इवेंट की लाइन पर क्लिक करें.

   

   इमेज 6. पेमेंट हैंडलर इवेंट देखना.

Chromium की समस्या #980291

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

ऑडिट पैनल अब Lighthouse 5.2 का इस्तेमाल कर रहा है. तीसरे पक्ष के कोड के इस्तेमाल से जुड़ी नई डाइग्नोस्टिक ऑडिट से पता चलता है कि तीसरे पक्ष के कितने कोड का अनुरोध किया गया था. साथ ही, पेज लोड होने के दौरान, तीसरे पक्ष के उस कोड ने मुख्य थ्रेड को कितने समय तक ब्लॉक किया था. तीसरे पक्ष के कोड से, पेज लोड होने की परफ़ॉर्मेंस कैसे खराब हो सकती है, इस बारे में ज़्यादा जानने के लिए, तीसरे पक्ष के संसाधनों को ऑप्टिमाइज़ करें लेख पढ़ें.

इमेज 7. तीसरे पक्ष के इस्तेमाल का ऑडिट.

Chromium की समस्या #772558

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

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

इमेज 8. टाइमिंग सेक्शन में मौजूद एलसीपी मार्कर.

एलसीपी से जुड़े डीओएम नोड को हाइलाइट करने के लिए:

1. टाइमिंग सेक्शन में, एलसीपी मार्कर पर क्लिक करें.

2. व्यू पोर्ट में नोड को हाइलाइट करने के लिए, खास जानकारी टैब में मौजूद मिलता-जुलता नोड पर कर्सर घुमाएं.

   

   इमेज 9. खास जानकारी टैब का मिलता-जुलता नोड सेक्शन.

3. डीओएम ट्री में इसे चुनने के लिए, मिलता-जुलता नोड पर क्लिक करें.

मुख्य मेन्यू से DevTools की समस्याओं की शिकायत करना

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

सहायता > DevTools से जुड़ी किसी समस्या की शिकायत करें." width="800" height="604">

इमेज 10. मुख्य मेन्यू > सहायता > DevTools से जुड़ी किसी समस्या की शिकायत करें पर जाएं.

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

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

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

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

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

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

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