इस पेज का अनुवाद Cloud Translation API से किया गया है.

वेब के लिए प्रदर्शन निगरानी के साथ आरंभ करें

शुरू करने से पहले

यदि आपने पहले से ऐसा नहीं किया है, तो यह जानने के लिए अपने JavaScript प्रोजेक्ट में Firebase जोड़ें पर जाएं:

एक फायरबेस प्रोजेक्ट बनाएं
अपने वेब ऐप को Firebase के साथ पंजीकृत करें
वेब ऐप में परफॉर्मेंस मॉनिटरिंग का उपयोग करने के लिए, आपको अपने ऐप को फायरबेस कंसोल में फायरबेस वेब ऐप के रूप में जोड़ना होगा ।
यदि आप अपने मौजूदा वेब ऐप में पहले से ही फायरबेस उत्पादों का उपयोग करते हैं और आप प्रदर्शन निगरानी एसडीके का उपयोग शुरू करना चाहते हैं, तो आपको अपना appID शामिल करने के लिए अपने appID कॉन्फिग ऑब्जेक्ट को अपडेट करना होगा।

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

चरण 1 : प्रदर्शन निगरानी जोड़ें और फ़ायरबेस प्रारंभ करें

यदि आपने पहले से ऐसा नहीं किया है, तो प्रदर्शन निगरानी एसडीके जोड़ें और नीचे दिए गए विकल्पों में से किसी एक का उपयोग करके अपने ऐप में फ़ायरबेस प्रारंभ करें। अपने विकल्पों में से चुनने में मदद के लिए निम्नलिखित पर विचार करें (अधिक विस्तृत जानकारी के लिए अलग-अलग टैब देखें):

सीडीएन (स्टैंडअलोन एसडीके) से — यदि प्रदर्शन निगरानी आपके ऐप में एकमात्र फायरबेस उत्पाद है, तो यह विकल्प सीडीएन से एकल, हल्के वजन वाले एसडीके को लोड करता है।
सीडीएन (मानक एसडीके) से — यदि आप अपने ऐप में अन्य फायरबेस उत्पादों का उपयोग करते हैं, तो यह विकल्प सीडीएन से अन्य फायरबेस पुस्तकालयों के साथ प्रदर्शन निगरानी एसडीके लोड करता है।
होस्टिंग URL से — यदि आप Firebase होस्टिंग का उपयोग कर रहे हैं, तो यह विकल्प Firebase को प्रारंभ करते समय आपके Firebase कॉन्फ़िगरेशन को प्रबंधित करने की सुविधा प्रदान करता है।
मॉड्यूल बंडलर का उपयोग करना — यदि आप एक बंडलर (जैसे Browserify या webpack) का उपयोग करते हैं, तो जरूरत पड़ने पर अलग-अलग मॉड्यूल आयात करने के लिए इस विकल्प का उपयोग करें।

आपके द्वारा प्रदर्शन निगरानी एसडीके जोड़ने के बाद, फायरबेस स्वचालित रूप से आपके ऐप के पेज लोडिंग और एचटीटीपी/एस नेटवर्क अनुरोधों के लिए डेटा एकत्र करना शुरू कर देता है ।

सीडीएन . से

आप फायरबेस जावास्क्रिप्ट एसडीके के आंशिक आयात को कॉन्फ़िगर कर सकते हैं और केवल उन फायरबेस पुस्तकालयों को लोड कर सकते हैं जिनकी आपको आवश्यकता है। फायरबेस हमारे ग्लोबल सीडीएन (कंटेंट डिलीवरी नेटवर्क) पर फायरबेस जावास्क्रिप्ट एसडीके की प्रत्येक लाइब्रेरी को स्टोर करता है।

सीडीएन से प्रदर्शन निगरानी एसडीके को शामिल करने के लिए, आपके पास दो विकल्प हैं:

स्टैंडअलोन एसडीके - प्रदर्शन निगरानी एकमात्र ऐसा फायरबेस उत्पाद है जिसका उपयोग आप अपने ऐप में करते हैं।
मानक SDK — आप अपने ऐप्लिकेशन में अन्य Firebase उत्पादों के साथ प्रदर्शन निगरानी का उपयोग कर रहे हैं।

स्टैंडअलोन एसडीके

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

अपने एसडीके पैकेज का आकार कम करना
आपके पृष्ठ के लोड होने तक SDK के आरंभीकरण में देरी

अपने ऐप में स्टैंडअलोन परफॉर्मेंस मॉनिटरिंग एसडीके शामिल करने के लिए और अपने पेज के लोड होने के बाद इसके इनिशियलाइज़ेशन में देरी करने के लिए:

अपनी अनुक्रमणिका फ़ाइल के शीर्षलेख में निम्न स्क्रिप्ट जोड़ें।
अपने ऐप का Firebase प्रोजेक्ट कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ना सुनिश्चित करें।

(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

कहां है,

performance_standalone 'https://www.gstatic.com/firebasejs/8.6.7/firebase-performance-standalone.js'
firebaseConfig आपके ऐप का Firebase कॉन्फ़िग ऑब्जेक्ट है

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

स्टैंडअलोन प्रदर्शन निगरानी एसडीके और हेडर स्क्रिप्ट के बारे में जानें

यह स्टैंडअलोन एसडीके आकार के लिए अनुकूलित है; Gzipped, यह लगभग 10kb है। इसमें फायरबेस परफॉर्मेंस मॉनिटरिंग के साथ-साथ फायरबेस कोर एसडीके फंक्शंस के न्यूनतम सेट के साथ-साथ फायरबेस परफॉर्मेंस मॉनिटरिंग की सभी कार्यक्षमताएं हैं।

फायरबेस परफॉर्मेंस मॉनिटरिंग fetch और Promise एपीआई का उपयोग करता है जो पुराने ब्राउज़रों पर उपलब्ध नहीं हैं। इन एपीआई के लिए पॉलीफ़िल मानक फायरबेस प्रदर्शन निगरानी जेएस एसडीके में शामिल हैं, लेकिन आकार को कम करने के लिए उन्हें स्टैंडअलोन एसडीके से हटा दिया गया है।

प्रदर्शन निगरानी SDK, आंशिक रूप से, ब्राउज़र से पृष्ठ लोड मीट्रिक प्राप्त करने के लिए संसाधन समय API पर निर्भर करता है।

निम्नलिखित स्निपेट हेडर स्क्रिप्ट को तोड़ता है जिसमें एसडीके की शुरुआत में देरी शामिल है:

(function(sdkSource, firebaseConfigObject) {
   function load(f, c) {
       // Creates a script tag to load the standalone SDK
       var sdkScript = document.createElement('script');

       // Sets it to an async script so that it doesn't interfere with page load
       sdkScript.async = 1;

       // Sets the source of the script
       sdkScript.src = f;

       // Inserts the script into the head of the page
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(sdkScript, s);
   }

   // Calls the load method
   load(sdkSource);

   // Initializes the SDK only when the onload method is called
   window.addEventListener('load', function() {
       firebase.initializeApp(firebaseConfigObject).performance();
   });
})(performance_standalone, firebaseConfig);

कहां है,

performance_standalone 'https://www.gstatic.com/firebasejs/8.6.7/firebase-performance-standalone.js'
firebaseConfig आपके ऐप का Firebase कॉन्फ़िग ऑब्जेक्ट है

मानक एसडीके

अगर आप दूसरे Firebase उत्पादों (जैसे अपने ऐप्लिकेशन में प्रमाणीकरण या Cloud Firestore) का इस्तेमाल कर रहे हैं, तो मानक प्रदर्शन निगरानी SDK शामिल करें.

ध्यान दें कि इस SDK के लिए आवश्यक है कि आप अलग मानक Firebase कोर SDK शामिल करें और Firebase और प्रदर्शन निगरानी को एक अलग स्क्रिप्ट में प्रारंभ करें।

मानक प्रदर्शन निगरानी SDK को शामिल करने के लिए, निम्न स्क्रिप्ट को अपने <body> टैग के निचले भाग में जोड़ें, लेकिन इससे पहले कि आप किसी Firebase सेवाओं का उपयोग करें:
0540एएई510

अपने ऐप में फायरबेस और परफॉर्मेंस मॉनिटरिंग इनिशियलाइज़ करें:

<body>
<!-- Previously loaded Firebase SDKs -->

<script>
  // TODO: Replace the following with your app's Firebase project configuration
  var firebaseConfig = {
    // ...
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  // Initialize Performance Monitoring and get a reference to the service
  var perf = firebase.performance();
</script>
</body>

होस्टिंग यूआरएल से

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

इस सेटअप विकल्प के साथ, आपके द्वारा Firebase पर परिनियोजित करने के बाद, आपका ऐप स्वचालित रूप से उस Firebase प्रोजेक्ट से Firebase कॉन्फ़िगरेशन ऑब्जेक्ट को खींच लेता है , जिस पर आपने परिनियोजित किया है। आप एक ही कोडबेस को कई Firebase प्रोजेक्ट में परिनियोजित कर सकते हैं, लेकिन आपको Firebase.initializeApp firebase.initializeApp() लिए उपयोग किए जा रहे Firebase कॉन्फ़िगरेशन को ट्रैक करने की आवश्यकता नहीं है।

प्रदर्शन निगरानी SDK को शामिल करने के लिए, निम्न स्क्रिप्ट को अपने <body> टैग के निचले भाग में जोड़ें, लेकिन इससे पहले कि आप किसी Firebase सेवाओं का उपयोग करें:

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/8.6.7/firebase-app.js"></script>

  <!-- Add the Performance Monitoring library -->
  <script src="/__/firebase/8.6.7/firebase-performance.js"></script>
</body>

अपने ऐप में फायरबेस और परफॉर्मेंस मॉनिटरिंग को इनिशियलाइज़ करें (आरक्षित होस्टिंग यूआरएल का उपयोग करते समय अपने फायरबेस कॉन्फिग ऑब्जेक्ट को शामिल करने की आवश्यकता नहीं है):
```
<body>
  

  
  <script src="/__/firebase/init.js"></script>

  
  <script>
    var perf = firebase.performance();
    // ...
  </script>
</body>
```

आरक्षित होस्टिंग URL का उपयोग करते समय स्थानीय रूप से अपने प्रदर्शन निगरानी एकीकरण का परीक्षण करें

अपने प्रदर्शन निगरानी एकीकरण का स्थानीय रूप से परीक्षण करने के लिए, firebase serve वर्तमान में /__/firebase/init.js URL के माध्यम से प्रदर्शन निगरानी के लिए Firebase को प्रारंभ करने का समर्थन नहीं करती है। इसके बजाय, अपने फायरबेस कॉन्फिग ऑब्जेक्ट को शामिल करें और फायरबेस को इस तरह इनिशियलाइज़ करें:

  <body>
    <!-- Previously loaded Firebase SDKs (via Hosting URLs) -->

    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };

      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);

      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
  </body>

मॉड्यूल बंडलर का उपयोग करना

आप Firebase JavaScript SDK के आंशिक आयात को कॉन्फ़िगर कर सकते हैं और केवल उन Firebase उत्पादों को लोड कर सकते हैं जिनकी आपको आवश्यकता है। यदि आप एक बंडलर (जैसे Browserify या webpack) का उपयोग कर रहे हैं, तो आप आवश्यकता पड़ने पर अलग-अलग Firebase उत्पादों को import कर सकते हैं।

firebase npm पैकेज स्थापित करें और इसे चलाकर अपने package.json फ़ाइल में सहेजें:
```
npm install --save firebase
```

प्रदर्शन निगरानी SDK को शामिल करने के लिए, Firebase मॉड्यूल import करें:

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";

// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// Add the Performance Monitoring library
import "firebase/performance";

अपने ऐप में फायरबेस और परफॉर्मेंस मॉनिटरिंग इनिशियलाइज़ करें:

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

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

पहले इनपुट विलंब मीट्रिक को मापने के लिए, आपको इस मीट्रिक के लिए पॉलीफ़िल लाइब्रेरी जोड़नी होगी. स्थापना निर्देशों के लिए, पुस्तकालय के दस्तावेज देखें ।

अन्य वेब ऐप मेट्रिक्स की रिपोर्ट करने के लिए प्रदर्शन निगरानी के लिए इस पॉलीफ़िल लाइब्रेरी को जोड़ने की आवश्यकता नहीं है।

चरण 3 : प्रारंभिक डेटा प्रदर्शन के लिए प्रदर्शन ईवेंट उत्पन्न करें events

जब आप सफलतापूर्वक अपने ऐप में एसडीके जोड़ते हैं तो फायरबेस ईवेंट को संसाधित करना शुरू कर देता है। यदि आप अभी भी स्थानीय रूप से विकास कर रहे हैं, तो प्रारंभिक डेटा संग्रह और प्रसंस्करण के लिए ईवेंट जेनरेट करने के लिए अपने ऐप के साथ सहभागिता करें।

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

चरण 4 : (वैकल्पिक) प्रदर्शन ईवेंट के लिए लॉग संदेश देखें

अपने ब्राउज़र के डेवलपर टूल खोलें (उदाहरण के लिए, क्रोम देव टूल्स के लिए नेटवर्क टैब या फ़ायरफ़ॉक्स के लिए नेटवर्क मॉनिटर में )।
ब्राउज़र में अपना वेब ऐप रीफ़्रेश करें।
किसी भी त्रुटि संदेश के लिए अपने लॉग संदेशों की जाँच करें।
कुछ सेकंड के बाद, अपने ब्राउज़र के डेवलपर टूल में firebaselogging.googleapis.com नेटवर्क कॉल देखें। उस नेटवर्क कॉल की उपस्थिति से पता चलता है कि ब्राउज़र फायरबेस को प्रदर्शन डेटा भेज रहा है।

यदि आपका ऐप प्रदर्शन ईवेंट लॉग नहीं कर रहा है, तो समस्या निवारण युक्तियों की समीक्षा करें।

चरण 5 : (वैकल्पिक) विशिष्ट कोड के लिए कस्टम निगरानी जोड़ें

अपने ऐप में विशिष्ट कोड से जुड़े प्रदर्शन डेटा की निगरानी के लिए, आप कस्टम कोड ट्रेस लिख सकते हैं ।

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

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

इन सुविधाओं के बारे में और उन्हें अपने ऐप में जोड़ने के तरीके के बारे में अधिक जानने के लिए विशिष्ट कोड के लिए निगरानी जोड़ें पर जाएं।

चरण 6 : अपना ऐप परिनियोजित करें और फिर परिणामों की समीक्षा करें

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

आप Firebase कंसोल के प्रदर्शन डैशबोर्ड में प्रदर्शन डेटा की निगरानी कर सकते हैं।

अगला कदम

वेब कोडलैब के लिए फायरबेस प्रदर्शन निगरानी के साथ व्यावहारिक अनुभव प्राप्त करें।
प्रदर्शन निगरानी द्वारा स्वचालित रूप से एकत्र किए गए डेटा के बारे में अधिक जानें:
- आपके ऐप में पेज लोड होने का डेटा
- आपके ऐप द्वारा जारी किए गए HTTP/S नेटवर्क अनुरोधों के लिए डेटा
Firebase कंसोल में अपना प्रदर्शन डेटा देखें, ट्रैक करें और फ़िल्टर करें
कस्टम कोड ट्रेस का उपयोग करके अपने ऐप में विशिष्ट कार्यों या वर्कफ़्लो के लिए निगरानी जोड़ें
प्रदर्शन डेटा फ़िल्टर करने के लिए विशेषताओं का उपयोग करें