לפני שמתחילים
אם עדיין לא עשיתם זאת, כדאי לעיין במאמר הוספת Firebase לפרויקט JavaScript כדי ללמוד איך:
יצירת פרויקט Firebase
רישום אפליקציית האינטרנט ב-Firebase
חשוב לזכור שכאשר מוסיפים את Firebase לאפליקציה, יכול להיות שתצטרכו לבצע חלק מהשלבים שמפורטים בהמשך הדף (לדוגמה, הוספת ה-SDK ואיפוס Firebase).
שלב 1: מוסיפים את Performance Monitoring ומפעילים אותו
אם עדיין לא עשיתם זאת, מתקינים את Firebase JS SDK ומפעילים את Firebase.
מוסיפים את ה-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 לאפליקציה. אם אתם עדיין מפתחים באופן מקומי, עליכם לבצע פעולות באפליקציה כדי ליצור אירועים לצורך איסוף ועיבוד ראשוני של נתונים.
הצגה של אפליקציית האינטרנט בסביבה מקומית.
יצירת אירועים על ידי טעינת דפי משנה באתר, אינטראקציה עם האפליקציה ו/או הפעלת בקשות רשת. חשוב לוודא שהכרטיסייה בדפדפן נשארת פתוחה למשך 10 שניות לפחות אחרי טעינת הדף.
עוברים אל לוח הבקרה לביצועים במסוף Firebase. הנתונים הראשוניים אמורים להופיע תוך כמה דקות.
אם הנתונים הראשוניים לא מוצגים, כדאי לעיין בטיפים לפתרון בעיות.
שלב 4: (אופציונלי) הצגת הודעות ביומן לגבי אירועי ביצועים
פותחים את הכלים למפתחים בדפדפן (לדוגמה, כרטיסיית הרשת בכלים למפתחים ב-Chrome או Network Monitor ב-Firefox).
מרעננים את אפליקציית האינטרנט בדפדפן.
בודקים אם יש הודעות שגיאה בהודעות היומן.
אחרי כמה שניות, מחפשים קריאה לרשת אל
firebaselogging.googleapis.com
בכלים למפתחים בדפדפן. נוכחות הקריאה הזו לרשת מראה שהדפדפן שולח נתוני ביצועים ל-Firebase.
אם לא מתועדים ביומן אירועי ביצועים באפליקציה, כדאי לעיין בטיפים לפתרון בעיות.
שלב 5: (אופציונלי) הוספת מעקב מותאם אישית לקוד ספציפי
כדי לעקוב אחרי נתוני הביצועים שמשויכים לקוד ספציפי באפליקציה, אפשר להשתמש במעקב אחר קוד בהתאמה אישית.
בעזרת מעקב קוד מותאם אישית, אפשר למדוד את משך הזמן שלוקח לאפליקציה להשלים משימה ספציפית או קבוצת משימות, כמו טעינת קבוצת תמונות או שליחת שאילתה למסד הנתונים. מדד ברירת המחדל של מעקב קוד בהתאמה אישית הוא משך הזמן שלו, אבל אפשר גם להוסיף מדדים מותאמים אישית, כמו היטים במטמון ואזהרות זיכרון.
בקוד, מגדירים את ההתחלה והסיום של מעקב קוד בהתאמה אישית (ומוסיפים את המדדים בהתאמה אישית הרצויים) באמצעות ה-API שסופק על ידי ה-SDK של Performance Monitoring.
במאמר הוספת מעקב אחרי קוד ספציפי תוכלו לקרוא מידע נוסף על התכונות האלה ועל האופן שבו מוסיפים אותן לאפליקציה.
שלב 6: פורסים את האפליקציה ובודקים את התוצאות
אחרי שתאמתו את Performance Monitoring, תוכלו לפרוס את הגרסה המעודכנת של האפליקציה למשתמשים.
אפשר לעקוב אחר נתוני הביצועים במרכז הבקרה לביצועים במסוף Firebase.
השלבים הבאים
Codelab ל-Firebase Performance Monitoring לאינטרנט – ניסיון מעשי.
מידע נוסף על נתונים שנאספים באופן אוטומטי על ידי Performance Monitoring:
- נתונים לגבי טעינה של דפים באפליקציה
- נתונים של בקשות רשת HTTP/S שהאפליקציה שלכם שלחה
הצגה, מעקב וסינון של נתוני הביצועים במסוף Firebase
מוסיפים מעקב אחר משימות או תהליכי עבודה ספציפיים באפליקציה באמצעות הוספת כלי למעקב אחר נתוני קוד מותאמים אישית