ابدأ مع مراقبة الأداء للويب

قبل ان تبدأ

إذا كنت لم تقم بذلك بالفعل، قم بزيارة اضافة Firebase لمشروع جافا سكريبت لمعرفة كيفية:

  • أنشئ مشروع Firebase

  • سجّل تطبيق الويب الخاص بك في Firebase

لاحظ أنه عند إضافة Firebase إلى التطبيق الخاص بك، فإنك قد أكمل أيضا بعض الخطوات الموضحة في هذه الصفحة (على سبيل المثال، مضيفا Firebase تطوير البرامج وتهيئة Firebase ).

الخطوة 1: إضافة مراقبة الأداء وتهيئة Firebase

إذا لم تكن قد قمت بذلك بالفعل ، فأضف SDK لمراقبة الأداء وقم بتهيئة Firebase في تطبيقك باستخدام أحد الخيارات أدناه. ضع في اعتبارك ما يلي لمساعدتك على الاختيار من بين خياراتك (انظر علامات التبويب الفردية للحصول على معلومات أكثر تفصيلاً):

  • من CDN (مستقل SDK) - إذا مراقبة الأداء هو المنتج فقط Firebase في التطبيق الخاص بك، هذا الخيار الأحمال واحد، وأخف وزنا SDK من CDN.

  • من CDN (SDK قياسي) - إذا كنت تستخدم منتجات Firebase الأخرى في التطبيق الخاص بك، هذا الخيار الأحمال ومراقبة الأداء SDK مع مكتبات Firebase أخرى من CDN.

  • من استضافة عناوين المواقع - إذا كنت تستخدم Firebase استضافة هذا الخيار يوفر الراحة للإدارة التكوين Firebase عند تهيئة Firebase.

  • باستخدام bundlers حدة - إذا كنت تستخدم محزم (مثل Browserify أو webpack)، استخدم هذا الخيار لاستيراد الوحدات الفردية عندما كنت في حاجة إليها.

بعد الانتهاء من إضافة مراقبة الأداء SDK، Firebase تلقائيا يبدأ جمع البيانات عن التطبيق الخاص بك تحميل الصفحات و HTTP / S طلبات الشبكة .

من CDN

يمكنك تهيئة الاستيراد الجزئي لـ Firebase JavaScript SDK وتحميل مكتبات Firebase التي تحتاجها فقط. يخزن Firebase كل مكتبة من Firebase JavaScript SDK على شبكة CDN العالمية (شبكة توصيل المحتوى).

لتضمين SDK لمراقبة الأداء من CDN ، لديك خياران:

  • مستقل SDK - مراقبة الأداء هو المنتج فقط Firebase التي تستخدمها في التطبيق الخاص بك.
  • معيار SDK - أنت كنت تستخدم مراقبة الأداء جنبا إلى جنب مع المنتجات Firebase الأخرى في التطبيق الخاص بك.

SDK مستقل

إذا كانت مراقبة الأداء هي منتج Firebase الوحيد في تطبيقك ، فاستخدم SDK المستقل لمراقبة الأداء (والنص البرمجي الموصى به أدناه) إذا كنت مهتمًا بما يلي:

  • تقليل حجم حزمة SDK
  • تأخير تهيئة SDK إلى ما بعد تحميل صفحتك

لتضمين 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.0/firebase-performance-standalone.js'
  • firebaseConfig هو التطبيق الخاص بك Firebase الكائن التكوين

البرنامج النصي أعلاه تحميل بشكل غير متزامن SDK مستقل ثم تهيئة Firebase بعد النافذة onload وقع الحدث. هذا التكتيك يقلل من الأثر الذي يمكن أن يكون SDK على مقاييس تحميل الصفحة منذ المتصفح قد ذكرت بالفعل المقاييس التحميل الخاصة به عند تهيئة SDK.

معيار SDK

إذا كنت تستخدم منتجات Firebase أخرى (مثل المصادقة أو Cloud Firestore في تطبيقك ، فقم بتضمين SDK لمراقبة الأداء القياسي.

لاحظ أن حزمة SDK هذه تتطلب تضمين حزمة Firebase core SDK القياسية المنفصلة وتهيئة Firebase ومراقبة الأداء في نص برمجي منفصل.

  1. لتشمل الأداء القياسية 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="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-performance.js"></script>
    <body>
    
  2. ابدأ تشغيل Firebase ومراقبة الأداء في تطبيقك:

    <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 JavaScript SDK ديناميكيًا من عناوين URL المحجوزة. معرفة المزيد عن إضافة عدد تطوير البرامج عبر عناوين المواقع استضافة محفوظة .

مع خيار إعداد هذا، بعد نشر لFirebase ، التطبيق تلقائيا تسحب كائن تكوين Firebase من المشروع Firebase التي قمت نشرها. يمكنك نشر نفس مصدر برنامج للمشاريع Firebase متعددة، ولكن لم يكن لديك لمتابعة التكوين Firebase الذي تستخدمه ل firebase.initializeApp() .

  1. لتشمل الأداء 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.8.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.8.0/firebase-performance.js"></script>
    </body>
    
  2. ابدأ تشغيل Firebase ومراقبة الأداء في تطبيقك (لا داعي لتضمين كائن تهيئة Firebase عند استخدام عناوين 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 حزمة الآلية الوقائية الوطنية وحفظه إلى الخاص package.json ملف عن طريق تشغيل:

    npm install --save firebase
  2. لتشمل الأداء SDK الرصد، 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. ابدأ تشغيل Firebase ومراقبة الأداء في تطبيقك:

    // 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 لهذا المقياس. للحصول على إرشادات التثبيت، الرجوع إلى المكتبة وثائق .

إضافة مكتبة polyfill هذه غير مطلوبة لمراقبة الأداء للإبلاغ عن مقاييس تطبيق الويب الأخرى.

الخطوة 3: إنشاء أحداث الأداء لعرض البيانات الأولية

يبدأ Firebase في معالجة الأحداث عند إضافة SDK بنجاح إلى تطبيقك. إذا كنت لا تزال تطورًا محليًا ، فتفاعل مع تطبيقك لإنشاء أحداث لجمع البيانات الأولية ومعالجتها.

  1. خدمة وعرض تطبيق الويب الخاص بك في بيئة محلية.

  2. أنشئ الأحداث عن طريق تحميل صفحات فرعية لموقعك ، والتفاعل مع تطبيقك ، و / أو تشغيل طلبات الشبكة. تأكد من إبقاء علامة تبويب المتصفح مفتوحة لمدة 10 ثوانٍ على الأقل بعد تحميل الصفحة.

  3. انتقل إلى لوحة أجهزة القياس الأداء من وحدة التحكم Firebase. يجب أن تشاهد عرض بياناتك الأولية في غضون بضع دقائق.

    إذا كنت لا ترى عرض البيانات الأولية، مراجعة نصائح استكشاف الأخطاء وإصلاحها .

الخطوة 4: (اختياري) عرض رسائل سجل للأحداث الأداء

  1. فتح أدوات المطورين المتصفح (على سبيل المثال، علامة التبويب لأدوات كروم ديف الشبكة أو في مراقبة الشبكة لفايرفوكس ).

  2. قم بتحديث تطبيق الويب الخاص بك في المتصفح.

  3. تحقق من رسائل السجل الخاصة بك بحثًا عن أي رسائل خطأ.

  4. بعد بضع ثوان، والبحث عن مكالمة الشبكة ل firebaselogging.googleapis.com في أدوات المطورين المتصفح. يُظهر وجود مكالمة الشبكة هذه أن المتصفح يرسل بيانات الأداء إلى Firebase.

إذا كان التطبيق لا تسجيل الأحداث الأداء، مراجعة نصائح استكشاف الأخطاء وإصلاحها .

خطوة 5: (اختياري) إضافة العرف رصد لرمز معين

لمراقبة بيانات الأداء المرتبطة كود معين في التطبيق الخاص بك، يمكنك أداة التعليمات البرمجية المخصصة آثار .

باستخدام تتبع رمز مخصص ، يمكنك قياس الوقت الذي يستغرقه تطبيقك لإكمال مهمة معينة أو مجموعة من المهام ، مثل تحميل مجموعة من الصور أو الاستعلام عن قاعدة البيانات الخاصة بك. المقياس الافتراضي لتتبع رمز مخصص هو مدته ، ولكن يمكنك أيضًا إضافة مقاييس مخصصة ، مثل نتائج ذاكرة التخزين المؤقت وتحذيرات الذاكرة.

في التعليمات البرمجية الخاصة بك ، تقوم بتحديد بداية ونهاية تتبع التعليمات البرمجية المخصصة (وإضافة أي مقاييس مخصصة مطلوبة) باستخدام واجهة برمجة التطبيقات التي توفرها SDK لمراقبة الأداء.

زيارة اضافة الرصد لرمز معين لمعرفة المزيد عن هذه الميزات وكيفية إضافتها إلى التطبيق الخاص بك.

خطوة 6: نشر التطبيق الخاص بك، ثم استعراض نتائج

بعد التحقق من صحة مراقبة الأداء ، يمكنك نشر الإصدار المحدث من تطبيقك للمستخدمين.

يمكنك مراقبة بيانات الأداء في لوحة أجهزة القياس الأداء من وحدة التحكم Firebase.

الخطوات التالية