Google is committed to advancing racial equity for Black communities. See how.
דף זה תורגם על ידי Cloud Translation API.
Switch to English

ניטור ביצועי Firebase לאינטרנט

במפתח קוד זה תלמד כיצד להשתמש בניטור ביצועי Firebase למדידת הביצועים של אפליקציית רשת צ'אט. בקר בכתובת https://fireperf-friendlychat.web.app/ כדי לראות הדגמה חיה.

3b1284f5144b54f6.png

מה תלמד

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

מה אתה צריך

  • ה- IDE או עורך הטקסט לבחירתך, כגון WebStorm , Atom , Sublime או VS Code
  • מסוף / קונסולה
  • דפדפן לבחירתך, כגון Chrome
  • קוד הדוגמה של קוד הקוד (ראה את החלק הבא של קוד קוד זה לקבלת הקוד).

שיבט את מאגר GitHub של קוד הקוד משורת הפקודה:

git clone https://github.com/firebase/codelab-friendlychat-web

לחלופין, אם אין לך git מותקן, אתה יכול להוריד את ה- repo כקובץ zip .

ייבא את אפליקציית המתנע

באמצעות ה- IDE שלך, פתח או ייבא את ספריית 📁 performance-monitoring-start מהמאגר המשובט. ספריית 📁 הפעלת performance-monitoring-start זו מכילה את קוד ההתחלה עבור קוד הקוד, שהיא אפליקציית רשת צ'אט.

צור פרויקט Firebase

  1. במסוף Firebase , לחץ על הוסף פרויקט .
  2. תן שם לפרויקט Firebase שלך FriendlyChat .

זכור את מזהה הפרויקט עבור פרויקט Firebase שלך.

  1. לחץ על צור פרויקט .

הוסף אפליקציית אינטרנט של Firebase לפרויקט

  1. לחץ על סמל האינטרנט 58d6543a156e56f9.png כדי ליצור אפליקציית אינטרנט חדשה של Firebase.
  2. רשום את האפליקציה בכינוי Friendly Chat ולאחר מכן סמן את התיבה לצד הגדר גם את אירוח Firebase עבור יישום זה .
  3. לחץ על רשום אפליקציה .
  4. לחץ על השלבים הנותרים. אינך צריך לעקוב אחר ההוראות שעל המסך; אלה יכוסו בשלבים מאוחרים יותר של קוד קוד זה.

ea9ab0db531a104c.png

אפשר כניסה של Google לצורך אימות Firebase

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

יהיה עליך להפעיל כניסה של Google :

  1. במסוף Firebase, אתר את החלק פיתוח בחלונית השמאלית.
  2. לחץ על אימות ואז לחץ על הכרטיסייה שיטת כניסה ( עבור למסוף ).
  3. הפעל את ספק הכניסה של גוגל ולחץ על שמור .

d89fb3873b5d36ae.png

אפשר ענן Firestore

אפליקציית האינטרנט משתמשת ב- Cloud Firestore כדי לשמור הודעות צ'אט ולקבל הודעות צ'אט חדשות.

יהיה עליך להפעיל את Cloud Firestore:

  1. בחלק של פיתוח קונסולת Firebase, לחץ על מסד נתונים .
  2. לחץ על צור מסד נתונים בחלונית Firestore בענן.
  3. בחר באפשרות התחל במצב בדיקה , ואז לחץ על הפעל לאחר קריאת כתב ויתור על כללי האבטחה.

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

24bd1a097492eac6.png

אפשר אחסון בענן

אפליקציית האינטרנט משתמשת ב- Cloud Storage for Firebase כדי לאחסן, להעלות ולשתף תמונות.

יהיה עליך להפעיל אחסון בענן:

  1. בחלק של פיתוח קונסולת Firebase, לחץ על אחסון .
  2. לחץ על התחל .
  3. קרא את כתב ויתור על כללי אבטחה עבור פרויקט Firebase שלך, ואז לחץ על הבנת .

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

ממשק שורת הפקודה של Firebase (CLI) מאפשר לך להשתמש ב- Firebase Hosting כדי לשרת את אפליקציית האינטרנט שלך באופן מקומי וכן לפרוס את אפליקציית האינטרנט שלך לפרויקט Firebase שלך.

  1. התקן את ה- CLI על ידי ביצוע הוראות אלה במסמכי Firebase.
  2. ודא שה- CLI הותקן כהלכה על ידי הפעלת הפקודה הבאה במסוף:
firebase --version

וודא שהגרסה שלך ל- Firebase CLI היא v8.0.0 ואילך.

  1. אשר את ה- CLI של Firebase על ידי הפעלת הפקודה הבאה:
firebase login

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

  1. ודא ששורת הפקודה שלך ניגשת לספרייה המקומית performance-monitoring-start והפעלת היישום שלך.
  2. שייך את האפליקציה שלך לפרויקט Firebase שלך ​​על ידי הפעלת הפקודה הבאה:
firebase use --add
  1. כשתתבקש, בחר את מזהה הפרויקט שלך ואז תן לכינוי לפרוייקט Firebase שלך.

כינוי שימושי אם יש לך מספר סביבות (הפקה, בימוי וכו '). עם זאת, עבור קוד קוד זה, בואו נשתמש בכינוי default .

  1. עקוב אחר ההוראות הנותרות בשורת הפקודה שלך.

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

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

  1. פתח את הקובץ public/index.html ואז הוסף את השורה הבאה מתחת ל- TODO כדי לכלול את ה- SDK לניטור ביצועי Firebase.

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
  1. עלינו לאתחל את ה- SDK של Firebase עם אובייקט תצורה המכיל מידע על פרויקט Firebase ועל אפליקציית האינטרנט בה אנו רוצים להשתמש. מכיוון שאנו משתמשים ב- Firebase אירוח, אתה יכול לייבא סקריפט מיוחד שיעשה את התצורה הזו עבורך. עבור קוד קוד זה, כבר הוספנו עבורך את השורה הבאה בתחתית הקובץ public/index.html , אך בדוק פעמיים שהוא שם.

index.html

<script src="/__/firebase/init.js"></script>
  1. בקובץ public/scripts/main.js , הוסף את השורה הבאה מתחת ל- TODO כדי לאתחל את ניטור הביצועים.

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

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

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

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

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

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

פתח את הקובץ public/index.html ואז בטל את השורה הבאה.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

בשלב זה סיימת את השילוב עם ניטור ביצועי Firebase בקוד שלך!

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

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

  1. בקובץ public/scripts/main.js , קבל אובייקט ביצועים, ואז צור מעקב מותאם אישית להעלאת הודעת תמונה.

main.js

// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');
  1. כדי להקליט מעקב מותאם אישית, עליך לציין את נקודת ההתחלה ונקודת העצירה של המסלול. אתה יכול לחשוב על עקבות כטיימר.

main.js

// TODO: Start the "timer" for the custom trace.
trace.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    trace.stop();

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

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

  1. אתר את המעקב המותאם אישית מהשלב הקודם (שהוגדר בקובץ public/scripts/main.js ).
  2. הוסף את השורה הבאה מתחת ל- TODO כדי להקליט את גודל התמונה שהועלתה.

main.js

 ...

// TODO: Record image size.
trace.putMetric('imageSize', file.size);

 ...

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

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

  1. השתמש public/scripts/main.js המותאם אישית שהוגדר בקובץ public/scripts/main.js .
  2. הוסף את השורה הבאה מתחת ל- TODO כדי להקליט את סוג MIME של התמונה שהועלתה.

main.js

 ...

// TODO: Record image MIME type.
trace.putAttribute('imageType', file.type);

 ...

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

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

אנו נמדוד את משך טעינת סקריפטים לעיצוב האפליקציות באמצעות ממשק ה- API של תזמון משתמש.

  1. בקובץ public/index.html , הוסף את השורה הבאה כדי לסמן את תחילת הטעינה של סקריפטים לעיצוב האפליקציות.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. הוסף את השורות הבאות כדי לסמן את סוף הטעינה של סקריפטים לעיצוב היישומים, ולמדוד את משך הזמן בין ההתחלה לסוף.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

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

פרוס לאירוח Firebase

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

  1. ודא ששורת הפקודה שלך ניגשת לספרייה המקומית performance-monitoring-start והפעלת היישום שלך.
  2. פרוס את הקבצים שלך לפרויקט Firebase שלך ​​על ידי הפעלת הפקודה הבאה:
firebase deploy
  1. על המסוף להציג את הדברים הבאים:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. בקר ביישום האינטרנט שלך שמתארח כעת במלואו באמצעות Firebase Hosting בשניים מתת-דומיינים משלהם של Firebase: https://<projectId>.firebaseapp.com ו- https://<projectId>.web.app .

ודא כי ניטור ביצועים מופעל

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

ac917a089e9c89d1.png

שלח הודעת תמונה

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

  1. לאחר הכניסה לאפליקציית הצ'אט שלך, לחץ על כפתור העלאת התמונה 13734cb66773e5a3.png .
  2. בחר קובץ תמונה באמצעות בורר הקבצים.
  3. נסה לשלוח מספר תמונות (כמה דוגמאות נשמרות public/images/ ), כך שתוכל לבדוק את התפלגות המדדים והתכונות המותאמות אישית.

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

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

גש למרכז השליטה שלך

  1. במסוף Firebase בחר בפרויקט שמכיל את אפליקציית Friendly Chat שלך.
  2. בחלונית הימנית, אתר את החלק האיכות ולחץ על ביצועים .

עיין בנתונים במכשיר

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

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

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

  1. בדף שנפתח תוכלו לפלח את נתוני משך לפי סוג MIME של התמונה על ידי לחיצה על imageType . נתונים ספציפיים אלו נרשמו בגלל תכונת imageType שהוספת למעקב המותאם אישית שלך.

8e5c9f32f42a1ca1.png

סקור את נתוני הרשת

בקשת רשת HTTP / S היא דוח הלוכד את זמן התגובה וגודל המטען של שיחות רשת.

  1. חזור למסך הראשי של לוח המחוונים לניטור ביצועים.
  2. לחץ על הכרטיסייה רשת כדי לראות רשימה של ערכי בקשות רשת לאפליקציית האינטרנט שלך.
  3. דפדף בהן כדי לזהות בקשות איטיות והתחל לעבוד על תיקון לשיפור ביצועי האפליקציה שלך!

1ab598284eea6581.png

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

מה סיקרנו:

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

למד עוד: