Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

قبل ان تبدأ

إذا كنت لم تقم بذلك بالفعل، قم بزيارة اضافة Firebase لمشروع جافا سكريبت لمعرفة كيفية:

  • أنشئ مشروع Firebase

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

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

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

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

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

    إصدار الويب 9

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

    إصدار الويب 8

    import firebase from "firebase/app";
    import "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
    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. فتح أدوات المطورين المتصفح (على سبيل المثال، علامة التبويب لأدوات كروم ديف الشبكة أو في مراقبة الشبكة لفايرفوكس ).

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

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

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

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

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

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

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

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

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

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

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

يمكنك مراقبة بيانات الأداء في لوحة أجهزة القياس الأداء من وحدة التحكم Firebase.

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