शुरू करने से पहले
अगर आपने पहले से ही ऐसा नहीं किया है, तो अपने JavaScript प्रोजेक्ट में Firebase जोड़ें पर जाएं. यहां आपको इन कामों को करने का तरीका मिलेगा:
Firebase प्रोजेक्ट बनाना
अपने वेब ऐप्लिकेशन को Firebase के साथ रजिस्टर करना
ध्यान दें कि अपने ऐप्लिकेशन में Firebase जोड़ने पर, हो सकता है कि आपको इस पेज पर बाद में बताए गए कुछ चरण पूरे करने पड़ें. उदाहरण के लिए, एसडीके जोड़ना और Firebase को शुरू करना.
पहला चरण: Performance Monitoring को जोड़ना और शुरू करना
अगर आपने अब तक Firebase JS SDK टूल इंस्टॉल नहीं किया है और Firebase को शुरू नहीं किया है, तो ऐसा करें.
Performance Monitoring JS SDK जोड़ें और Performance Monitoring को शुरू करें:
Web
import { initializeApp } from "firebase/app"; import { getPerformance } from "firebase/performance"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = getPerformance(app);
Web
import firebase from "firebase/compat/app"; import "firebase/compat/performance"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = firebase.performance();
दूसरा चरण: पहली इनपुट डिले पॉलीफ़िल लाइब्रेरी जोड़ना
फ़र्स्ट इनपुट डिले मेट्रिक को मेज़र करने के लिए, आपको इस मेट्रिक के लिए पॉलीफ़िल लाइब्रेरी जोड़नी होगी. इंस्टॉल करने के निर्देशों के लिए, लाइब्रेरी का दस्तावेज़ देखें.
Performance Monitoring को अन्य वेब ऐप्लिकेशन मेट्रिक की रिपोर्ट करने के लिए, इस पॉलीफ़िल लाइब्रेरी को जोड़ने की ज़रूरत नहीं है.
तीसरा चरण: शुरुआती डेटा डिसप्ले के लिए परफ़ॉर्मेंस इवेंट जनरेट करना
ऐप्लिकेशन में SDK टूल जोड़ने के बाद, Firebase इवेंट को प्रोसेस करना शुरू कर देता है. अगर अब भी स्थानीय तौर पर डेवलपमेंट किया जा रहा है, तो शुरुआती डेटा इकट्ठा करने और उसे प्रोसेस करने के लिए, अपने ऐप्लिकेशन का इस्तेमाल करें.
अपने वेब ऐप्लिकेशन को लोकल एनवायरमेंट में चलाएं और देखें.
अपनी साइट के सबपेज लोड करके, अपने ऐप्लिकेशन से इंटरैक्ट करके, और/या नेटवर्क अनुरोध ट्रिगर करके इवेंट जनरेट करें. पेज लोड होने के बाद, ब्राउज़र टैब को कम से कम 10 सेकंड तक खुला रखें.
Firebase कंसोल के परफ़ॉर्मेंस डैशबोर्ड पर जाएं. आपको कुछ ही मिनटों में शुरुआती डेटा दिखने लगेगा.
अगर आपको शुरुआती डेटा नहीं दिखता है, तो समस्या हल करने से जुड़ी सलाह देखें.
चौथा चरण: (ज़रूरी नहीं) परफ़ॉर्मेंस इवेंट के लिए लॉग मैसेज देखना
अपने ब्राउज़र के डेवलपर टूल खोलें. उदाहरण के लिए, Chrome DevTools के लिए नेटवर्क टैब या Firefox के लिए नेटवर्क मॉनिटर.
ब्राउज़र में अपने वेब ऐप्लिकेशन को रीफ़्रेश करें.
गड़बड़ी के मैसेज के लिए, अपने लॉग मैसेज देखें.
कुछ सेकंड बाद, अपने ब्राउज़र के डेवलपर टूल में
firebaselogging.googleapis.com
पर नेटवर्क कॉल देखें. इस नेटवर्क कॉल से पता चलता है कि ब्राउज़र, परफ़ॉर्मेंस डेटा को Firebase पर भेज रहा है.
अगर आपका ऐप्लिकेशन परफ़ॉर्मेंस इवेंट लॉग नहीं कर रहा है, तो समस्या हल करने के सुझाव देखें.
पांचवां चरण: (ज़रूरी नहीं) किसी कोड के लिए कस्टम मॉनिटरिंग जोड़ना
अपने ऐप्लिकेशन में किसी कोड से जुड़े परफ़ॉर्मेंस डेटा को मॉनिटर करने के लिए, कस्टम कोड ट्रेस को इंस्ट्रुमेंट किया जा सकता है.
कस्टम कोड ट्रेस की मदद से, यह मेज़र किया जा सकता है कि आपके ऐप्लिकेशन को कोई खास टास्क या टास्क का सेट पूरा करने में कितना समय लगता है. जैसे, इमेज का सेट लोड करना या अपने डेटाबेस को क्वेरी करना. कस्टम कोड ट्रेस के लिए डिफ़ॉल्ट मेट्रिक, उसकी अवधि होती है. हालांकि, कस्टम मेट्रिक भी जोड़ी जा सकती हैं. जैसे, कैश हिट और मेमोरी से जुड़ी चेतावनियां.
अपने कोड में, Performance Monitoring SDK टूल से मिले एपीआई का इस्तेमाल करके, कस्टम कोड ट्रेस की शुरुआत और खत्म होने का समय तय करें. साथ ही, अपनी पसंद के मुताबिक कस्टम मेट्रिक जोड़ें.
इन सुविधाओं और उन्हें अपने ऐप्लिकेशन में जोड़ने के तरीके के बारे में ज़्यादा जानने के लिए, किसी खास कोड के लिए मॉनिटरिंग की सुविधा जोड़ना पर जाएं.
छठा चरण: ऐप्लिकेशन को डिप्लॉय करें. इसके बाद, नतीजों की समीक्षा करें
Performance Monitoring की पुष्टि हो जाने के बाद, अपने ऐप्लिकेशन के अपडेट किए गए वर्शन को उपयोगकर्ताओं के लिए डिप्लॉय किया जा सकता है.
Firebase कंसोल के परफ़ॉर्मेंस डैशबोर्ड में जाकर, परफ़ॉर्मेंस डेटा पर नज़र रखी जा सकती है.
अगले चरण
Firebase Performance Monitoring for Web Codelab को इस्तेमाल करके देखें.
Performance Monitoring के ज़रिए अपने-आप इकट्ठा होने वाले डेटा के बारे में ज़्यादा जानें:
- आपके ऐप्लिकेशन में पेज लोड होने का डेटा
- आपके ऐप्लिकेशन से जारी किए गए एचटीटीपी/एस नेटवर्क अनुरोधों का डेटा
Firebase कंसोल में, अपनी परफ़ॉर्मेंस का डेटा देखें, ट्रैक करें, और फ़िल्टर करें
अपने ऐप्लिकेशन में किसी टास्क या वर्कफ़्लो की परफ़ॉर्मेंस को मॉनिटर करने के लिए, कस्टम कोड ट्रेसिंग को चालू करें
परफ़ॉर्मेंस डेटा को फ़िल्टर करने के लिए एट्रिब्यूट इस्तेमाल करना