بدء استخدام ميزة "مراقبة الأداء" للويب

قبل البدء

إذا لم يسبق لك ذلك، انتقِل إلى مقالة إضافة Firebase إلى مشروع JavaScript للتعرّف على كيفية إجراء ما يلي:

  • إنشاء مشروع Firebase

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

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

الخطوة 1: إضافة أداة وتهيئتها Performance Monitoring

  1. إذا لم يسبق لك ذلك، ثبِّت حزمة Firebase JS SDK وهيِّئ Firebase.

  2. أضِف حزمة 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();

الخطوة 2: إضافة مكتبة polyfill لتأخير الإدخال الأول

لقياس مقياس تأخير الإدخال الأول، عليك إضافة مكتبة polyfill لهذا المقياس. للاطّلاع على تعليمات التثبيت ، يُرجى الرجوع إلى مستندات المكتبة .

ليست هناك حاجة إلى إضافة مكتبة polyfill هذه لكي تعرض Performance Monitoring مقاييس تطبيقات الويب الأخرى.

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

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

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

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

  3. انتقِل إلى لوحة بيانات الأداء في وحدة التحكّم Firebase. من المفترض أن تظهر البيانات الأولية في غضون بضع دقائق.

    إذا لم تظهر البيانات الأولية، راجِع نصائح تحديد المشاكل وحلّها.

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

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

  2. أعِد تحميل تطبيق الويب في المتصفّح.

  3. راجِع رسائل السجلّ بحثًا عن أي رسائل خطأ.

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

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

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

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

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

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

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

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

بعد التحقّق من Performance Monitoring، يمكنك نشر الإصدار المعدَّل من تطبيقك للمستخدمين.

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

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