Google 致力于为黑人社区推动种族平等。查看具体举措

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

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

आप पहले से ही नहीं है, तो जाएँ आपकी जावास्क्रिप्ट परियोजना के लिए Firebase जोड़े के लिए कैसे जानने के लिए:

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

  • अपने वेब ऐप को Firebase के साथ पंजीकृत करें

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

चरण 1: ऐड प्रदर्शन की निगरानी और Firebase प्रारंभ

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

  • CDN से (स्टैंडअलोन एसडीके) - प्रदर्शन की निगरानी में अपने ऐप्लिकेशन में केवल Firebase उत्पाद, इस विकल्प को लोड एक एकल, हल्का वजन CDN से एसडीके है।

  • CDN (मानक एसडीके) से - आप अपने एप्लिकेशन में अन्य Firebase उत्पादों का उपयोग करते हैं, तो इस विकल्प का भार प्रदर्शन CDN से अन्य Firebase पुस्तकालयों के साथ निगरानी एसडीके।

  • होस्टिंग यूआरएल से - आप Firebase होस्टिंग, इस विकल्प प्रदान करता है अपने Firebase विन्यास प्रबंध जब Firebase आरंभ करने के लिए एक सुविधा उपयोग कर रहे हैं।

  • मॉड्यूल bundlers का उपयोग करना - आप एक बंडलर (Browserify या webpack) की तरह उपयोग करते हैं, अलग-अलग मॉड्यूल आयात करने के लिए जब आप उन्हें जरूरत के लिए इस विकल्प का उपयोग करें।

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

सीडीएन . से

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

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

  • स्टैंडअलोन एसडीके - प्रदर्शन की निगरानी केवल Firebase उत्पाद है कि आप अपने अनुप्रयोग में इस्तेमाल करते हैं।
  • मानक एसडीके - आप प्रदर्शन अपने अनुप्रयोग में अन्य Firebase उत्पादों के साथ निगरानी का उपयोग कर रहे हैं।

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

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

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

अपने ऐप में स्टैंडअलोन प्रदर्शन निगरानी एसडीके शामिल करने के लिए और अपने पृष्ठ के लोड होने के बाद इसके आरंभीकरण में देरी करने के लिए:

  1. अपनी अनुक्रमणिका फ़ाइल के शीर्षलेख में निम्न स्क्रिप्ट जोड़ें।
  2. यदि आपके ऐप की जोड़ने के लिए सुनिश्चित करें कि 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.8.1/firebase-performance-standalone.js'
  • firebaseConfig यदि आपके ऐप की है Firebase config वस्तु

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

मानक एसडीके

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

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

  1. मानक प्रदर्शन की निगरानी एसडीके शामिल करने के लिए, अपने के नीचे करने के लिए निम्न स्क्रिप्ट जोड़ें <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="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-performance.js"></script>
    <body>
    
  2. अपने ऐप में फायरबेस और परफॉर्मेंस मॉनिटरिंग इनिशियलाइज़ करें:

    <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>
    

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

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

इस स्थापना विकल्प के साथ, के बाद आप Firebase को तैनात , अपने अनुप्रयोग स्वचालित रूप से Firebase परियोजना जो करने के लिए आप से नियोजित किए गए से Firebase विन्यास वस्तु खींचती है। आप एक से अधिक Firebase परियोजनाओं के लिए एक ही codebase तैनात कर सकते हैं, लेकिन आप Firebase विन्यास है कि आप के लिए उपयोग कर रहे हैं ट्रैक करने के लिए की जरूरत नहीं है firebase.initializeApp()

  1. प्रदर्शन की निगरानी एसडीके शामिल करने के लिए, अपने के नीचे करने के लिए निम्न स्क्रिप्ट जोड़ें <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.8.1/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.8.1/firebase-performance.js"></script>
    </body>
    
  2. अपने ऐप में फायरबेस और परफॉर्मेंस मॉनिटरिंग को इनिशियलाइज़ करें (आरक्षित होस्टिंग URL का उपयोग करते समय अपने फायरबेस कॉन्फिग ऑब्जेक्ट को शामिल करने की आवश्यकता नहीं है):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

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

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

  1. स्थापित firebase NPM पैकेज और अपने पर सहेजें package.json चलाकर फ़ाइल:

    npm install --save firebase
  2. प्रदर्शन की निगरानी एसडीके को शामिल करने के import में Firebase मॉड्यूल:

    // 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";
    
  3. अपने ऐप में फायरबेस और परफॉर्मेंस मॉनिटरिंग इनिशियलाइज़ करें:

    // 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();
    

चरण 2: पहला इनपुट देरी polyfill पुस्तकालय जोड़े

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

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

चरण 3: प्रारंभिक डेटा प्रदर्शित करने के लिए उत्पन्न प्रदर्शन की घटनाओं

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

  1. अपने वेब ऐप को स्थानीय वातावरण में परोसें और देखें।

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

  3. पर जाएं प्रदर्शन डैशबोर्ड Firebase सांत्वना की। आपको कुछ ही मिनटों में अपना प्रारंभिक डेटा प्रदर्शन देखना चाहिए।

    आपको अपने प्रारंभिक डेटा का प्रदर्शन दिखाई नहीं देता है, की समीक्षा समस्या निवारण युक्तियों से

चरण 4: प्रदर्शन की घटनाओं के लिए (वैकल्पिक) लॉग संदेशों

  1. अपने ब्राउज़र के डेवलपर उपकरण खोलें (उदाहरण के लिए, नेटवर्क Chrome डेवलपर उपकरण के लिए टैब या में Firefox के लिए नेटवर्क मॉनिटर )।

  2. ब्राउज़र में अपना वेब ऐप रीफ़्रेश करें।

  3. किसी भी त्रुटि संदेश के लिए अपने लॉग संदेशों की जाँच करें।

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

अपने एप्लिकेशन के प्रदर्शन की घटनाओं प्रवेश करने नहीं है, तो की समीक्षा समस्या निवारण युक्तियों से

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

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

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

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

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

चरण 6: तैनात अपने अनुप्रयोग को समीक्षा के परिणाम

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

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

अगले कदम