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

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

3b1284f5144b54f6.png

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

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

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

  • आईडीई या पाठ इस तरह के रूप में अपनी पसंद के संपादक, WebStorm , एटम , उदात्त , या वी.एस. कोड
  • एक टर्मिनल/कंसोल
  • आपकी पसंद का ब्राउज़र, जैसे क्रोम
  • कोडलैब का नमूना कोड (कोड कैसे प्राप्त करें के लिए इस कोडलैब का अगला भाग देखें।)

क्लोन codelab के GitHub भंडार कमांड लाइन से:

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

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

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

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

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

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

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

  1. परियोजना बनाएँ क्लिक करें।

प्रोजेक्ट में Firebase वेब ऐप्लिकेशन जोड़ें

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

ea9ab0db531a104c.png

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

उपयोगकर्ता Google खातों के साथ चैट एप्लिकेशन में साइन इन करने के लिए, हमने Google प्रवेश करने के विधि का उपयोग करेंगे।

आप गूगल साइन-इन सक्षम करने की आवश्यकता होगी:

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

7f3040a646c2e502.png

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

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

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

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

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

24bd1a097492eac6.png

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

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

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

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

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

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

  1. का पालन करते हुए CLI स्थापित इन निर्देशों में Firebase डॉक्स में।
  2. सत्यापित करें कि टर्मिनल में निम्न आदेश चलाकर सीएलआई सही ढंग से स्थापित किया गया है:
firebase --version

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

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

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

  1. सुनिश्चित करें कि आपके आदेश पंक्ति को अपने ऐप्लिकेशन के स्थानीय तक पहुँच रहा है बनाओ performance-monitoring-start निर्देशिका।
  2. निम्न आदेश चलाकर अपने ऐप्लिकेशन को अपने Firebase प्रोजेक्ट से संबद्ध करें:
firebase use --add
  1. संकेत मिलने पर, अपना प्रोजेक्ट आईडी चुनें, और फिर अपने फायरबेस प्रोजेक्ट को एक उपनाम दें।

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

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

(का उल्लेख वहाँ Firebase प्रदर्शन वेब के लिए एसडीके निगरानी के साथ एकीकृत करने के विभिन्न तरीके हैं प्रलेखन जानकारी के लिए)। इस codelab में, हम होस्टिंग यूआरएल से निगरानी प्रदर्शन सक्षम कर देंगे।

प्रदर्शन निगरानी जोड़ें और Firebase को प्रारंभ करें

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

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. हमें फ़ायरबेस एसडीके को एक कॉन्फ़िगरेशन ऑब्जेक्ट के साथ इनिशियलाइज़ करने की भी आवश्यकता है जिसमें फ़ायरबेस प्रोजेक्ट और उस वेब ऐप के बारे में जानकारी है जिसका हम उपयोग करना चाहते हैं। चूंकि हम फायरबेस होस्टिंग का उपयोग कर रहे हैं, आप एक विशेष स्क्रिप्ट आयात कर सकते हैं जो आपके लिए यह कॉन्फ़िगरेशन करेगी। इस codelab के लिए, हम पहले से ही के निचले भाग में आप के लिए निम्नलिखित लाइन को जोड़ दिया है public/index.html फ़ाइल है, लेकिन इसकी दोबारा जांच करें कि यह नहीं है।

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. में 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>

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

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

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

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

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. एक कस्टम ट्रेस रिकॉर्ड करने के लिए, आपको ट्रेस के लिए शुरुआती बिंदु और रोक बिंदु निर्दिष्ट करने की आवश्यकता है। आप एक ट्रेस को टाइमर के रूप में सोच सकते हैं।

index.js

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

 ...

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

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

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

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

index.js

 ...

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

 ...

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

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

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

index.js

 ...

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

 ...

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

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

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

  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>
  1. ऐप स्टाइलिंग स्क्रिप्ट लोड के अंत को चिह्नित करने के लिए और प्रारंभ और अंत के बीच की अवधि को मापने के लिए निम्न पंक्तियां जोड़ें।

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 प्रदर्शन निगरानी द्वारा स्वचालित रूप से एकत्र किया जाएगा। आप नामक कस्टम ट्रेस पता लगाने के लिए सक्षम हो जाएगा loadStyling Firebase प्रदर्शन कंसोल में बाद में।

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

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

  1. सुनिश्चित करें कि आपके आदेश पंक्ति को अपने ऐप्लिकेशन के स्थानीय तक पहुँच रहा है बनाओ performance-monitoring-start निर्देशिका।
  2. निम्न आदेश चलाकर अपनी फ़ाइलें अपने Firebase प्रोजेक्ट में परिनियोजित करें:
firebase deploy
  1. कंसोल को निम्नलिखित प्रदर्शित करना चाहिए:
=== 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
  1. : कि है अब पूरी तरह से होस्टिंग Firebase का उपयोग कर की मेजबानी आपके बहुत ही Firebase उप डोमेन में से दो पर अपने वेब एप्लिकेशन पर https://<projectId>.firebaseapp.com और https://<projectId>.web.app

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

ओपन Firebase कंसोल और प्रदर्शन टैब पर जाएं। अगर आपको "SDK का पता चला" दिखाने वाला स्वागत संदेश दिखाई देता है, तो आप सफलतापूर्वक Firebase प्रदर्शन निगरानी के साथ एकीकृत हो गए हैं!

30df67e5a07d03b0.png

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

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

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

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

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

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

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

डिवाइस पर डेटा की समीक्षा करें

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

  1. पर उपकरण टैब पर क्लिक करें।
  • पृष्ठ लोड तालिका प्रदर्शन स्वचालित रूप से निगरानी से पता चलता है विभिन्न प्रदर्शन मेट्रिक्स जमा करता है, जबकि अपने पृष्ठ लोड हो रहा है है।
  • अवधियां तालिका से पता चलता है कि आप अपने ऐप्लिकेशन के कोड में परिभाषित किया गया है किसी भी कस्टम निशान।
  1. ट्रेस विशिष्ट मीट्रिक की समीक्षा करने के अवधियां तालिका में saveImageMessage क्लिक करें।

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

  1. समय के साथ जो पिछले चरण में सकल के बगल में है पर क्लिक करें। आप कस्टम ट्रेस की अवधि देख सकते हैं। देखें और अधिक विस्तार से एकत्र किए गए आंकड़ों की समीक्षा करने के लिए क्लिक करें।

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

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

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

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

26a2be152a77ffb9.png

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

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

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

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