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

Kayce Basques

ऑडिट पैनल में एक से ज़्यादा क्लाइंट के लिए सहायता

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

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

शुरुआती परफ़ॉर्मेंस स्कोर 70 है.

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

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

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

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

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

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

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

अनुरोध ब्लॉक करने की सुविधा चालू करने के बाद, परफ़ॉर्मेंस स्कोर 97 हो गया.

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

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

Chromium से जुड़ी समस्या #991906

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

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

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

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

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

    चित्र 5. पेमेंट हैंडलर इवेंट रिकॉर्ड करना.

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

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

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

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

Chromium से जुड़ी समस्या #980291

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

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

लाइटहाउस रिपोर्ट के यूज़र इंटरफ़ेस (यूआई) में, 'तीसरे पक्ष के इस्तेमाल' से जुड़े ऑडिट का स्क्रीनशॉट.

सातवां चित्र. तीसरे पक्ष के इस्तेमाल का ऑडिट.

Chromium से जुड़ी समस्या #772558

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

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

'समय' सेक्शन में मौजूद एलसीपी मार्कर.

आठवां चित्र. समय सेक्शन में LCP मार्कर.

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

  1. समय सेक्शन में, LCP मार्कर पर क्लिक करें.

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

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

    नौवां चित्र. खास जानकारी टैब का मिलता-जुलता नोड सेक्शन.

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

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

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

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

दसवां चित्र. मुख्य मेन्यू > सहायता > DevTools से जुड़ी समस्या की शिकायत करें.

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

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

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

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

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

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