Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

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

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

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

  • צור פרויקט Firebase

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

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

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

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

  • מה- CDN (SDK עצמאי) - אם ניטור ביצועים הוא מוצר ה- Firebase היחיד באפליקציה שלך, אפשרות זו טוענת SDK יחיד ומשקל קל יותר מה- CDN.

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

  • מכתובות אתרים לאירוח - אם אתה משתמש ב- Firebase Hosting, אפשרות זו מציעה נוחות לניהול תצורת Firebase שלך ​​בעת אתחול Firebase.

  • שימוש במאגרי מודולים - אם אתה משתמש בבאנדלר (כמו Browserify או webpack), השתמש באפשרות זו כדי לייבא מודולים בודדים כאשר אתה זקוק להם.

לאחר שהוספת את SDK לניטור ביצועים, Firebase מתחיל באופן אוטומטי לאסוף נתונים עבור טעינת העמוד של היישום שלך ובקשות רשת HTTP / S.

מה- CDN

באפשרותך להגדיר ייבוא ​​חלקי של ה- SDK של Firebase JavaScript ולהעמיס רק את ספריות Firebase הדרושות לך. Firebase מאחסן כל ספרייה של ה- SDK של Firebase JavaScript ב- CDN העולמי שלנו (רשת מסירת תוכן).

כדי לכלול את ה- SDK לניטור ביצועים מ- CDN, יש לך שתי אפשרויות:

  • SDK עצמאי - ניטור ביצועים הוא מוצר ה- Firebase היחיד בו אתה משתמש באפליקציה שלך.
  • SDK סטנדרטי - אתה משתמש במעקב ביצועים יחד עם מוצרים אחרים של Firebase באפליקציה שלך.

SDK עצמאי

אם ניטור ביצועים הוא מוצר ה- Firebase היחיד באפליקציה שלך, השתמש ב- SDK לניטור ביצועים עצמאי (ובסקריפט הכותרת המומלץ למטה) אם אתה מעוניין ב:

  • צמצום גודל החבילה שלך
  • עיכוב האתחול של ה- SDK עד לאחר טעינת הדף שלך

כדי לכלול את SDK ניטור ביצועים העצמאי באפליקציה שלך ולעכב את אתחולו לאחר טעינת הדף שלך:

  1. הוסף את הסקריפט הבא לכותרת קובץ האינדקס שלך.
  2. הקפד להוסיף את אובייקט התצורה של פרויקט Firebase של האפליקציה שלך.
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

איפה,

  • performance_standalone הוא 'https://www.gstatic.com/firebasejs/8.6.7/firebase-performance-standalone.js'
  • firebaseConfig הוא אובייקט התצורה של Firebase של האפליקציה שלך

התסריט שלעיל טוען באופן אסינכרוני את ה- SDK העצמאי ואז אתחל את Firebase לאחר אירוע onload של החלון. טקטיקה זו מפחיתה את ההשפעה שיכולה להיות ל- SDK על מדדי הטעינה של העמודים מכיוון שהדפדפן כבר דיווח על מדדי הטעינה שלו בעת אתחול ה- SDK.

SDK סטנדרטי

אם אתה משתמש במוצרי Firebase אחרים (כמו אימות או Cloud Firestore באפליקציה שלך, כלול את ה- SDK לניטור ביצועים סטנדרטי.

שים לב ש- SDK זה דורש שתכלול את ה- SDK הסטנדרטי הנפרד של Firebase ויתחל את Firebase וניטור הביצועים בסקריפט נפרד.

  1. כדי לכלול את ה- SDK לניטור ביצועים רגיל, הוסף את התסריטים הבאים בתחתית התג <body> , אך לפני שתשתמש בשירותי Firebase כלשהם:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-performance.js"></script>
    <body>
    
  2. אתחל את Firebase וניטור הביצועים באפליקציה שלך:

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

מכתובות אתרים לאירוח

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

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

  1. כדי לכלול את ה- SDK לניטור ביצועים, הוסף את הסקריפטים הבאים בתחתית התג <body> , אך לפני שתשתמש בשירותי Firebase כלשהם:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.6.7/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.6.7/firebase-performance.js"></script>
    </body>
    
  2. אתחל את Firebase וניטור הביצועים באפליקציה שלך (אין צורך לכלול את אובייקט התצורה של Firebase בעת שימוש בכתובות אתרים שמורות):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

באמצעות מקבץ המודולים

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

  1. התקן את firebase חבילת NPM ולשמור אותו שלך package.json הקובץ על ידי הפעלה:

    npm install --save firebase
  2. כדי לכלול את ה- SDK לניטור ביצועים, import את המודולים של Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. אתחל את Firebase וניטור הביצועים באפליקציה שלך:

    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
    // Initialize Performance Monitoring and get a reference to the service
    const perf = firebase.performance();
    

שלב 2 : הוסף את ספריית מילוי המילוי לעיכוב הקלט הראשונה

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

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

שלב 3 : צור אירועי ביצועים לתצוגת נתונים ראשונית

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

  1. השרת והצג את אפליקציית האינטרנט שלך בסביבה מקומית.

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

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

    אם אינך רואה תצוגה של הנתונים הראשוניים שלך, עיין בטיפים לפתרון בעיות .

שלב 4 : (אופציונלי) צפה בהודעות יומן עבור אירועי ביצוע

  1. פתח את כלי המפתחים של הדפדפן שלך (לדוגמה, כרטיסיית Network עבור Chrome Dev Tools או ב- Network Monitor for Firefox ).

  2. רענן את אפליקציית האינטרנט שלך בדפדפן.

  3. בדוק בהודעות היומן שלך אם קיימות הודעות שגיאה.

  4. לאחר מספר שניות, חפש שיחת רשת אל firebaselogging.googleapis.com בכלי המפתחים של הדפדפן שלך. הנוכחות של אותה שיחת רשת מראה שהדפדפן שולח נתוני ביצועים ל- Firebase.

אם האפליקציה שלך לא רושמת אירועי ביצועים, עיין בטיפים לפתרון בעיות .

שלב 5 : (אופציונלי) הוסף ניטור מותאם אישית לקוד ספציפי

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

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

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

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

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

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

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

הצעדים הבאים