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

قبل البدء

يُرجى الانتقال إلى مقالة إضافة Firebase إلى مشروع JavaScript للتعرّف على كيفية تنفيذ ما يلي:

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

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

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

الخطوة 1: إضافة Performance Monitoring وإعداده

  1. ثبِّت حزمة تطوير البرامج (SDK) لـ Firebase JS وفعِّل Firebase، إذا لم يسبق لك إجراء ذلك.

  2. أضِف حزمة تطوير البرامج (SDK) لبرنامج Performance Monitoring JS وفعِّل 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" أو في Network Monitor for Firefox).

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

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

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

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

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

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

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

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

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

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

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

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

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