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

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

قبل ان تبدأ

إذا لم تكن قد قمت بذلك بالفعل ، فانتقل إلى إضافة Firebase إلى مشروع JavaScript لمعرفة كيفية:

  • أنشئ مشروع Firebase

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

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

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

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

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

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

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

  • استخدام حِزم الوحدات - إذا كنت تستخدم مُجمِّعًا (مثل 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.6.8/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.6.8/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.6.8/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 المحجوزة. تعرف على المزيد حول إضافة حزم 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.6.8/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.6.8/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. افتح أدوات المطور في متصفحك (على سبيل المثال ، علامة تبويب الشبكة لأدوات Chrome Dev Tools أو في Network Monitor for Firefox ).

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

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

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

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

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

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

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

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

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

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

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

يمكنك مراقبة بيانات الأداء في لوحة معلومات الأداء لوحدة تحكم Firebase.

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