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

قبل ان تبدأ

إذا لم تكن قد قمت بذلك بالفعل ، فانتقل إلى إضافة 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);

واجهة برمجة تطبيقات Web namespaced

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 Dev Tools أو في Network Monitor for Firefox ).

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

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

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

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

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

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

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

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

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

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

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

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

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