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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

परफ़ॉर्मेंस पैनल में सबसे बड़ा कॉन्टेंटफ़ुल पेंट

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

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

आठवीं इमेज. LCP सेक्शन में LCP मार्कर.

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

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

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

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

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

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

मुख्य मेन्यू से DevTools से जुड़ी समस्याएं हल करें

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

सहायता > DevTools से जुड़ी समस्या की शिकायत करें." चौड़ाई="800" लंबाई="604">

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

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

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

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

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

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

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

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