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

قبل ان تبدأ

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

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

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

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

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

  1. إذا لم تكن قد قمت بذلك بالفعل، فقم بتثبيت Firebase JS SDK وقم بتهيئة Firebase .

  2. أضف حزمة JS SDK لمراقبة الأداء وقم بتهيئة مراقبة الأداء:

واجهة برمجة تطبيقات الويب المعيارية

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);

واجهة برمجة تطبيقات مساحة اسم الويب

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 هذه غير مطلوب لمراقبة الأداء للإبلاغ عن مقاييس تطبيق الويب الأخرى.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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