התחל עם ניטור ביצועים לאינטרנט

לפני שאתה מתחיל

אם עדיין לא עשית זאת, בקר בכתובת הוסף Firebase לפרויקט ה-JavaScript שלך כדי ללמוד כיצד:

  • צור פרויקט Firebase

  • רשום את אפליקציית האינטרנט שלך ב-Firebase

שים לב שכאשר אתה מוסיף את Firebase לאפליקציה שלך, אתה עשוי להשלים חלק מהשלבים המתוארים בהמשך דף זה (לדוגמה, הוספת ה-SDK ואתחול Firebase).

שלב 1 : הוסף ואתחול ניטור ביצועים

  1. אם עדיין לא עשית זאת, התקן את Firebase JS SDK ואתחל את Firebase .

  2. הוסף את ה-SDK לניטור ביצועים ואתחל את ניטור הביצועים:

API מודולרי אינטרנט

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

API עם מרחב שמות אינטרנט

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 : (אופציונלי) הוסף ניטור מותאם אישית עבור קוד ספציפי

כדי לעקוב אחר נתוני ביצועים המשויכים לקוד ספציפי באפליקציה שלך, אתה יכול ליישם מעקבי קוד מותאמים אישית .

בעזרת מעקב קוד מותאם אישית, אתה יכול למדוד כמה זמן לוקח לאפליקציה שלך להשלים משימה ספציפית או קבוצת משימות, כגון טעינת קבוצת תמונות או שאילתות במסד הנתונים שלך. מדד ברירת המחדל עבור מעקב אחר קוד מותאם אישית הוא משך הזמן שלו, אבל אתה יכול גם להוסיף מדדים מותאמים אישית, כגון התאמות מטמון ואזהרות זיכרון.

בקוד שלך, אתה מגדיר את ההתחלה והסוף של מעקב קוד מותאם אישית (ומוסיף כל מדדים מותאמים אישית רצויים) באמצעות ה-API שסופק על ידי ה-SDK לניטור ביצועים.

בקר ב'הוסף ניטור לקוד ספציפי' כדי ללמוד עוד על תכונות אלו וכיצד להוסיף אותן לאפליקציה שלך.

שלב 6 : פרוס את האפליקציה שלך ואז סקור את התוצאות

לאחר שתאמת את ניטור הביצועים, תוכל לפרוס את הגרסה המעודכנת של האפליקציה שלך למשתמשים שלך.

אתה יכול לעקוב אחר נתוני ביצועים בלוח המחוונים הביצועים של מסוף Firebase.

הצעדים הבאים