वेब के लिए फायरबेस प्रदर्शन निगरानी

1 अवलोकन

इस कोडलैब में, आप सीखेंगे कि चैट वेब ऐप के प्रदर्शन को मापने के लिए फायरबेस परफॉर्मेंस मॉनिटरिंग का उपयोग कैसे करें। लाइव डेमो देखने के लिए https://fireperf-Friendlychat.web.app/ पर जाएं।

आप क्या सीखेंगे

• आउट-ऑफ-द-बॉक्स मेट्रिक्स (पृष्ठ लोड और नेटवर्क अनुरोध) प्राप्त करने के लिए अपने वेब ऐप में फायरबेस प्रदर्शन मॉनिटरिंग कैसे जोड़ें।
• कस्टम निशान के साथ कोड के एक विशिष्ट टुकड़े को कैसे मापें।
• कस्टम ट्रेस से जुड़े अतिरिक्त, कस्टम मीट्रिक कैसे रिकॉर्ड करें।
• कस्टम विशेषताओं के साथ अपने प्रदर्शन डेटा को और कैसे विभाजित करें।
• अपने वेब ऐप के प्रदर्शन को समझने के लिए प्रदर्शन निगरानी डैशबोर्ड का उपयोग कैसे करें।

आपको किस चीज़ की ज़रूरत पड़ेगी

• आपकी पसंद का IDE या टेक्स्ट एडिटर, जैसे WebStorm , Atom , Sublime , या VS Code
• एक टर्मिनल/कंसोल
• आपकी पसंद का ब्राउज़र, जैसे क्रोम
• कोडलैब का नमूना कोड (कोड कैसे प्राप्त करें, इसके लिए इस कोडलैब का अगला भाग देखें।)

2. नमूना कोड प्राप्त करें

कमांड लाइन से कोडलैब के GitHub रिपॉजिटरी को क्लोन करें:

git clone https://github.com/firebase/codelab-friendlychat-web

वैकल्पिक रूप से, यदि आपके पास गिट स्थापित नहीं है, तो आप रेपो को ज़िप फ़ाइल के रूप में डाउनलोड कर सकते हैं।

स्टार्टर ऐप आयात करें

अपने आईडीई का उपयोग करते हुए, क्लोन रिपॉजिटरी से 📁 performance-monitoring-start निर्देशिका को खोलें या आयात करें। इस 📁 performance-monitoring-start निर्देशिका में कोडलैब के लिए प्रारंभिक कोड है, जो एक चैट वेब ऐप है।

3. एक फायरबेस प्रोजेक्ट बनाएं और सेट अप करें

एक फायरबेस प्रोजेक्ट बनाएं

1. Firebase कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें।
2. अपने फायरबेस प्रोजेक्ट को FriendlyChat नाम दें।

अपने फायरबेस प्रोजेक्ट के लिए प्रोजेक्ट आईडी याद रखें।

3. प्रोजेक्ट बनाएं पर क्लिक करें।

प्रोजेक्ट में एक फायरबेस वेब ऐप जोड़ें

1. वेब आइकन पर क्लिक करें एक नया फायरबेस वेब ऐप बनाने के लिए।
2. Friendly Chat उपनाम के साथ ऐप को पंजीकृत करें, और फिर इस ऐप के लिए फायरबेस होस्टिंग भी सेट करें के बगल में स्थित बॉक्स को चेक करें।
3. रजिस्टर ऐप पर क्लिक करें।
4. शेष चरणों के माध्यम से क्लिक करें। अब आपको ऑन-स्क्रीन निर्देशों का पालन करने की आवश्यकता नहीं है; इन्हें इस कोडलैब के बाद के चरणों में शामिल किया जाएगा।

Firebase प्रमाणीकरण के लिए Google साइन-इन सक्षम करें

उपयोगकर्ताओं को अपने Google खातों से चैट ऐप में साइन इन करने की अनुमति देने के लिए, हम Google साइन-इन विधि का उपयोग करेंगे।

आपको Google साइन-इन सक्षम करना होगा:

1. फायरबेस कंसोल में, बाएं पैनल में डेवलप सेक्शन का पता लगाएं।
2. प्रमाणीकरण पर क्लिक करें, फिर साइन-इन विधि टैब पर क्लिक करें ( कंसोल पर जाएं )।
3. Google साइन-इन प्रदाता को सक्षम करें, और फिर सहेजें पर क्लिक करें।

क्लाउड फायरस्टोर सक्षम करें

चैट संदेशों को सहेजने और नए चैट संदेश प्राप्त करने के लिए वेब ऐप क्लाउड फायरस्टोर का उपयोग करता है।

आपको Cloud Firestore को सक्षम करना होगा:

1. फायरबेस कंसोल के डेवलप सेक्शन में, डेटाबेस पर क्लिक करें।
2. Cloud Firestore पेन में डेटाबेस बनाएं पर क्लिक करें।
3. परीक्षण मोड में प्रारंभ करें विकल्प का चयन करें, फिर सुरक्षा नियमों के बारे में अस्वीकरण पढ़ने के बाद सक्षम करें पर क्लिक करें।

इस कोडलैब के स्टार्टर कोड में अधिक सुरक्षित नियम शामिल हैं। हम उन्हें बाद में कोडलैब में परिनियोजित करेंगे।

क्लाउड स्टोरेज सक्षम करें

वेब ऐप चित्रों को स्टोर करने, अपलोड करने और साझा करने के लिए फायरबेस के लिए क्लाउड स्टोरेज का उपयोग करता है।

आपको क्लाउड स्टोरेज को सक्षम करने की आवश्यकता होगी:

1. फायरबेस कंसोल के डेवलप सेक्शन में, स्टोरेज पर क्लिक करें।
2. प्रारंभ करें क्लिक करें.
3. अपने Firebase प्रोजेक्ट के लिए सुरक्षा नियमों के बारे में अस्वीकरण पढ़ें और फिर समझ गया क्लिक करें.

शुरुआती कोड में एक बुनियादी सुरक्षा नियम शामिल है, जिसे हम बाद में कोडलैब में परिनियोजित करेंगे।

4. फायरबेस कमांड-लाइन इंटरफेस स्थापित करें

फायरबेस कमांड-लाइन इंटरफेस (सीएलआई) आपको अपने वेब ऐप को स्थानीय रूप से सेवा देने के साथ-साथ अपने वेब ऐप को अपने फायरबेस प्रोजेक्ट में तैनात करने के लिए फायरबेस होस्टिंग का उपयोग करने की अनुमति देता है।

1. फायरबेस डॉक्स में इन निर्देशों का पालन करके सीएलआई स्थापित करें।
2. सत्यापित करें कि टर्मिनल में निम्न आदेश चलाकर सीएलआई सही तरीके से स्थापित किया गया है:

firebase --version

सुनिश्चित करें कि Firebase CLI का आपका संस्करण v8.0.0 या बाद का है।

3. निम्नलिखित कमांड चलाकर फायरबेस सीएलआई को अधिकृत करें:

firebase login

हमने आपके ऐप की स्थानीय निर्देशिका (रिपॉजिटरी जिसे आपने कोडलैब में पहले क्लोन किया था) से फायरबेस होस्टिंग के लिए आपके ऐप के कॉन्फ़िगरेशन को खींचने के लिए वेब ऐप टेम्प्लेट सेट किया है। लेकिन कॉन्फ़िगरेशन को खींचने के लिए, हमें आपके ऐप को आपके फायरबेस प्रोजेक्ट से जोड़ना होगा।

4. सुनिश्चित करें कि आपकी कमांड लाइन आपके ऐप की स्थानीय performance-monitoring-start निर्देशिका तक पहुंच रही है।
5. निम्न आदेश चलाकर अपने ऐप को अपने फायरबेस प्रोजेक्ट से संबद्ध करें:

firebase use --add

6. संकेत मिलने पर, अपनी प्रोजेक्ट आईडी चुनें और फिर अपने फायरबेस प्रोजेक्ट को एक उपनाम दें।

यदि आपके पास एकाधिक परिवेश (उत्पादन, मंचन, आदि) हैं, तो उपनाम उपयोगी है। हालाँकि, इस कोडलैब के लिए, आइए केवल default के उपनाम का उपयोग करें।

7. अपनी कमांड लाइन में शेष निर्देशों का पालन करें।

5. फायरबेस परफॉर्मेंस मॉनिटरिंग के साथ इंटीग्रेट करें

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

प्रदर्शन निगरानी जोड़ें और फायरबेस को इनिशियलाइज़ करें

1. src/index.js फ़ाइल खोलें, फिर निम्न पंक्ति को TODO के नीचे जोड़ें ताकि Firebase प्रदर्शन निगरानी SDK को शामिल किया जा सके।

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. हमें फायरबेस एसडीके को एक कॉन्फ़िगरेशन ऑब्जेक्ट के साथ इनिशियलाइज़ करने की भी आवश्यकता है जिसमें फायरबेस प्रोजेक्ट और उस वेब ऐप के बारे में जानकारी हो जिसका हम उपयोग करना चाहते हैं। चूंकि हम फायरबेस होस्टिंग का उपयोग कर रहे हैं, आप एक विशेष स्क्रिप्ट आयात कर सकते हैं जो आपके लिए यह कॉन्फ़िगरेशन करेगी। इस कोडलैब के लिए, हमने public/index.html फ़ाइल के नीचे आपके लिए निम्न पंक्ति पहले ही जोड़ दी है, लेकिन फिर से जाँच लें कि यह वहाँ है।

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. प्रदर्शन निगरानी आरंभ करने के लिए src/index.js फ़ाइल में, TODO के नीचे निम्न पंक्ति जोड़ें।

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

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

पहला इनपुट विलंब पॉलीफ़िल लाइब्रेरी जोड़ें

पहला इनपुट विलंब उपयोगी है क्योंकि ब्राउज़र किसी उपयोगकर्ता के साथ बातचीत का जवाब देता है, जिससे उपयोगकर्ताओं को आपके ऐप की जवाबदेही के बारे में पहली छाप मिलती है।

पहला इनपुट विलंब तब शुरू होता है जब उपयोगकर्ता पहली बार पृष्ठ पर किसी तत्व के साथ इंटरैक्ट करता है, जैसे बटन या हाइपरलिंक पर क्लिक करना। ब्राउज़र द्वारा इनपुट का जवाब देने में सक्षम होने के तुरंत बाद यह बंद हो जाता है, जिसका अर्थ है कि ब्राउज़र आपकी सामग्री को लोड या पार्स करने में व्यस्त नहीं है।

यह पॉलीफ़िल लाइब्रेरी प्रदर्शन निगरानी एकीकरण के लिए वैकल्पिक है।

public/index.html फ़ाइल खोलें, फिर निम्न पंक्ति पर टिप्पणी हटाएं।

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

इस बिंदु पर, आपने अपने कोड में फायरबेस परफॉर्मेंस मॉनिटरिंग के साथ एकीकरण पूरा कर लिया है!

निम्नलिखित चरणों में, आप फायरबेस प्रदर्शन मॉनिटरिंग का उपयोग करके कस्टम ट्रेस जोड़ने के बारे में सीखते हैं। यदि आप केवल स्वचालित ट्रेसेस एकत्रित करना चाहते हैं, तो "तैनाती करें और छवियां भेजना प्रारंभ करें" अनुभाग पर जाएं.

6. अपने ऐप में एक कस्टम ट्रेस जोड़ें

प्रदर्शन निगरानी आपको कस्टम ट्रेस बनाने की अनुमति देती है। एक कस्टम ट्रेस आपके ऐप में निष्पादन ब्लॉक की अवधि के लिए एक रिपोर्ट है। आप SDK द्वारा प्रदान किए गए API का उपयोग करके कस्टम ट्रेस के प्रारंभ और अंत को परिभाषित करते हैं।

1. src/index.js फ़ाइल में, एक प्रदर्शन वस्तु प्राप्त करें, फिर एक छवि संदेश अपलोड करने के लिए एक कस्टम ट्रेस बनाएँ।

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. कस्टम ट्रेस रिकॉर्ड करने के लिए, आपको ट्रेस के लिए शुरुआती बिंदु और स्टॉपिंग पॉइंट निर्दिष्ट करने की आवश्यकता है। आप ट्रेस को टाइमर के रूप में सोच सकते हैं।

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

आपने कस्टम ट्रेस को सफलतापूर्वक परिभाषित किया है! अपना कोड परिनियोजित करने के बाद, यदि उपयोगकर्ता एक छवि संदेश भेजता है तो कस्टम ट्रेस की अवधि रिकॉर्ड की जाएगी। इससे आपको अंदाजा हो जाएगा कि वास्तविक दुनिया के उपयोगकर्ताओं को आपके चैट ऐप में इमेज भेजने में कितना समय लगता है।

7. अपने ऐप में एक कस्टम मीट्रिक जोड़ें।

आप इसके दायरे में होने वाली प्रदर्शन-संबंधी घटनाओं के लिए कस्टम मेट्रिक्स रिकॉर्ड करने के लिए एक कस्टम ट्रेस को और कॉन्फ़िगर कर सकते हैं। उदाहरण के लिए, आप जांच के लिए एक मीट्रिक का उपयोग कर सकते हैं कि क्या अपलोड का समय उस छवि के आकार से प्रभावित होता है जिसे हमने अंतिम चरण में परिभाषित किया था।

1. पिछले चरण से कस्टम ट्रेस का पता लगाएँ (आपकी src/index.js फ़ाइल में परिभाषित)।
2. अपलोड की गई छवि के आकार को रिकॉर्ड करने के लिए TODO के नीचे निम्न पंक्ति जोड़ें।

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

यह मीट्रिक प्रदर्शन की निगरानी को कस्टम ट्रेस अवधि के साथ-साथ अपलोड की गई छवि के आकार को रिकॉर्ड करने में सक्षम बनाता है।

8. अपने ऐप में एक कस्टम विशेषता जोड़ें

पिछले चरणों के आधार पर, आप अपने कस्टम ट्रेस पर कस्टम विशेषताएँ भी एकत्र कर सकते हैं। कस्टम विशेषताएँ आपके ऐप के लिए विशिष्ट श्रेणियों के आधार पर डेटा को विभाजित करने में सहायता कर सकती हैं। उदाहरण के लिए, आप छवि फ़ाइल के MIME प्रकार को यह जांचने के लिए एकत्र कर सकते हैं कि MIME प्रकार प्रदर्शन को कैसे प्रभावित कर सकता है।

1. अपने src/index.js फ़ाइल में परिभाषित कस्टम ट्रेस का उपयोग करें।
2. अपलोड की गई छवि के MIME प्रकार को रिकॉर्ड करने के लिए TODO के नीचे निम्न पंक्ति जोड़ें।

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

यह विशेषता अपलोड की गई छवि प्रकार के आधार पर कस्टम ट्रेस अवधि को वर्गीकृत करने के लिए प्रदर्शन निगरानी को सक्षम करती है।

9. [विस्तार] उपयोगकर्ता समय एपीआई के साथ एक कस्टम ट्रेस जोड़ें

Firebase प्रदर्शन मॉनिटरिंग SDK को इसलिए डिज़ाइन किया गया था ताकि इसे एसिंक्रोनस रूप से लोड किया जा सके, और इसलिए यह पेज लोड के दौरान वेब ऐप्स के प्रदर्शन को नकारात्मक रूप से प्रभावित नहीं करेगा। SDK लोड होने से पहले, Firebase Performance Monitoring API उपलब्ध नहीं होता है। इस परिदृश्य में, आप अभी भी उपयोगकर्ता समय API का उपयोग कर कस्टम ट्रेस जोड़ सकते हैं। फायरबेस प्रदर्शन एसडीके माप () से अवधियों को उठाएगा और उन्हें कस्टम निशान के रूप में लॉग करेगा।

हम यूजर टाइमिंग एपीआई का उपयोग करके ऐप स्टाइलिंग स्क्रिप्ट लोड करने की अवधि को मापने जा रहे हैं।

1. public/index.html फ़ाइल में, ऐप स्टाइलिंग स्क्रिप्ट लोड की शुरुआत को चिह्नित करने के लिए निम्न पंक्ति जोड़ें।

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

2. ऐप स्टाइलिंग स्क्रिप्ट लोड के अंत को चिह्नित करने के लिए और प्रारंभ और अंत के बीच की अवधि को मापने के लिए निम्न पंक्तियां जोड़ें।

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

आपके द्वारा यहां बनाई गई प्रविष्टि स्वचालित रूप से फायरबेस परफॉर्मेंस मॉनिटरिंग द्वारा एकत्र की जाएगी। आप बाद में Firebase Performance कंसोल में loadStyling नामक कस्टम ट्रेस ढूंढ पाएंगे।

10. तैनात करें और छवियां भेजना शुरू करें

फायरबेस होस्टिंग में तैनात करें

अपने कोड में फायरबेस परफॉर्मेंस मॉनिटरिंग जोड़ने के बाद, अपने कोड को फायरबेस होस्टिंग में तैनात करने के लिए इन चरणों का पालन करें:

1. सुनिश्चित करें कि आपकी कमांड लाइन आपके ऐप की स्थानीय performance-monitoring-start निर्देशिका तक पहुंच रही है।
2. निम्न कमांड चलाकर अपनी फ़ाइलों को अपने फायरबेस प्रोजेक्ट में तैनात करें:

firebase deploy

3. कंसोल को निम्नलिखित प्रदर्शित करना चाहिए:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. अपने स्वयं के दो Firebase उपडोमेन: https://<projectId>.firebaseapp.com और https://<projectId>.web.app पर Firebase होस्टिंग का उपयोग करके अब पूरी तरह से होस्ट किए गए अपने वेब ऐप पर जाएं।

सत्यापित करें कि प्रदर्शन निगरानी सक्षम है

फायरबेस कंसोल खोलें और प्रदर्शन टैब पर जाएं। यदि आपको "एसडीके का पता चला" दिखाने वाला स्वागत संदेश दिखाई देता है, तो आपने फायरबेस परफॉर्मेंस मॉनिटरिंग के साथ सफलतापूर्वक एकीकरण कर लिया है!

छवि संदेश भेजें

अपने चैट ऐप में चित्र भेजकर कुछ प्रदर्शन डेटा उत्पन्न करें।

1. अपने चैट एप में साइन इन करने के बाद इमेज अपलोड बटन पर क्लिक करें .
2. फ़ाइल पिकर का उपयोग करके छवि फ़ाइल का चयन करें।
3. अनेक छवियां भेजने का प्रयास करें (कुछ नमूने public/images/ में संग्रहीत हैं) ताकि आप कस्टम मीट्रिक और कस्टम विशेषताओं के वितरण का परीक्षण कर सकें.

नए संदेश आपकी चयनित छवियों के साथ ऐप के UI में प्रदर्शित होने चाहिए।

11. डैशबोर्ड की निगरानी करें

अपने वेब ऐप को तैनात करने और एक उपयोगकर्ता के रूप में छवि संदेश भेजने के बाद, आप प्रदर्शन निगरानी डैशबोर्ड (फायरबेस कंसोल में) में प्रदर्शन डेटा की समीक्षा कर सकते हैं।

अपने डैशबोर्ड तक पहुँचें

1. फायरबेस कंसोल में, उस प्रोजेक्ट का चयन करें जिसमें आपका Friendly Chat ऐप है।
2. बाएं फलक में, गुणवत्ता अनुभाग का पता लगाएं और प्रदर्शन पर क्लिक करें।

ऑन-डिवाइस डेटा की समीक्षा करें

प्रदर्शन निगरानी द्वारा आपके ऐप के डेटा को संसाधित करने के बाद, आपको डैशबोर्ड के शीर्ष पर टैब दिखाई देंगे। यदि आपको अभी तक कोई डेटा या टैब दिखाई नहीं देता है, तो बाद में वापस जांचना सुनिश्चित करें।

1. ऑन डिवाइस टैब पर क्लिक करें।

• पृष्ठ लोड तालिका विभिन्न प्रदर्शन मेट्रिक्स दिखाती है जो आपके पृष्ठ के लोड होने के दौरान प्रदर्शन निगरानी स्वचालित रूप से एकत्रित करती है।
• अवधि तालिका कोई भी कस्टम निशान दिखाती है जिसे आपने अपने ऐप के कोड में परिभाषित किया है।

2. ट्रेस के लिए विशिष्ट मीट्रिक की समीक्षा करने के लिए अवधि तालिका में saveImageMessage पर क्लिक करें।

3. इमेज साइज़ के वितरण की समीक्षा करने के लिए एग्रीगेट पर क्लिक करें। आप इस कस्टम ट्रेस के लिए छवि आकार को मापने के लिए जोड़ी गई मीट्रिक देख सकते हैं।

4. ओवर टाइम पर क्लिक करें जो पिछले चरण में एग्रीगेट के बगल में है। आप कस्टम ट्रेस की अवधि भी देख सकते हैं। एकत्रित डेटा की अधिक विस्तार से समीक्षा करने के लिए अधिक देखें पर क्लिक करें।

5. खुलने वाले पृष्ठ में, आप छवि प्रकार पर क्लिक करके अवधि डेटा को छवि MIME प्रकार से विभाजित कर सकते हैं। यह विशिष्ट डेटा इमेजटाइप विशेषता के कारण लॉग किया गया था जिसे आपने अपने कस्टम ट्रेस में जोड़ा था।

नेटवर्क डेटा की समीक्षा करें

HTTP/S नेटवर्क अनुरोध एक रिपोर्ट है जो प्रतिक्रिया समय और नेटवर्क कॉल के पेलोड आकार को कैप्चर करती है।

1. प्रदर्शन निगरानी डैशबोर्ड की मुख्य स्क्रीन पर वापस जाएं।
2. अपने वेब ऐप के लिए नेटवर्क अनुरोध प्रविष्टियों की सूची देखने के लिए नेटवर्क टैब पर क्लिक करें।
3. धीमे अनुरोधों की पहचान करने के लिए उनके माध्यम से ब्राउज़ करें और अपने ऐप के प्रदर्शन को सुधारने के लिए सुधार पर काम करना शुरू करें!

12. बधाई हो!

आपने प्रदर्शन की निगरानी के लिए फायरबेस एसडीके को सक्षम किया है और अपने चैट ऐप के वास्तविक दुनिया के प्रदर्शन को मापने के लिए स्वचालित निशान और कस्टम निशान एकत्र किए हैं!

हमने क्या कवर किया है:

• अपने वेब ऐप में Firebase प्रदर्शन मॉनिटरिंग SDK को जोड़ना।
• अपने कोड में कस्टम निशान जोड़ना।
• कस्टम ट्रेस से जुड़ी कस्टम मेट्रिक्स की रिकॉर्डिंग।
• कस्टम विशेषताओं का उपयोग करके प्रदर्शन डेटा को विभाजित करना।
• अपने ऐप के प्रदर्शन में अंतर्दृष्टि प्राप्त करने के लिए प्रदर्शन निगरानी डैशबोर्ड का उपयोग करने का तरीका समझना।

और अधिक जानें:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• वेब.देव/फास्ट/