شروع به کار با «پایشگر کارایی» برای وب

قبل از شروع

اگر قبلاً این کار را نکرده‌اید، به افزودن Firebase به پروژه JavaScript بروید تا با نحوه انجام کارهای زیر آشنا شوید:

  • ایجاد پروژه Firebase

  • ثبت کردن برنامه وب در Firebase

توجه داشته باشید که وقتی Firebase را به برنامه‌تان اضافه می‌کنید، ممکن است برخی‌از مراحل شرح‌داده‌شده در ادامه این صفحه را تکمیل کنید (برای مثال، افزودن کیت توسعه نرم‌افزار و مقداردهی اولیه Firebase).

مرحله ۱: افزودن و مقداردهی اولیه Performance Monitoring

  1. اگر قبلاً این کار را نکرده‌اید، کیت توسعه نرم‌افزار Firebase JS را نصب کنید و Firebase را مقداردهی اولیه کنید.

  2. کیت توسعه نرم‌افزار 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();

کیت توسعه نرم‌افزار Performance Monitoring هسته‌های حیاتی وب را به‌طور خودکار ضبط می‌کند.

مرحله ۲: تولید رویدادهای عملکرد برای نمایش اولیه داده‌ها

وقتی «کیت توسعه نرم‌افزار» را باموفقیت به برنامه‌تان اضافه کنید، Firebase پردازش رویدادها را شروع می‌کند. اگر هنوز درحال توسعه محلی هستید، با برنامه‌تان تعامل برقرار کنید تا رویدادهایی برای جمع‌آوری و پردازش اولیه داده‌ها ایجاد شود.

  1. برنامه وب خود را در محیط محلی ارائه و مشاهده کنید.

  2. با بار کردن زیرصفحه‌های سایتتان، تعامل با برنامه‌تان، و/یا راه‌اندازی درخواست‌های شبکه، رویداد ایجاد کنید. مطمئن شوید که زبانه مرورگر را حداقل ۱۰ ثانیه پس‌از بار شدن صفحه باز نگه می‌دارید.

  3. به داشبورد عملکرد کنسول Firebase بروید. باید داده‌های اولیه‌تان را ظرف چند دقیقه ببینید.

    اگر نمایش داده‌های اولیه خود را نمی‌بینید، نکات عیب‌یابی را مرور کنید.

مرحله ۳: (اختیاری) مشاهده پیام‌های گزارش برای رویدادهای عملکرد

  1. ابزارهای توسعه‌دهنده مرورگرتان را باز کنید (برای مثال، برگه شبکه برای ابزارهای توسعه‌دهنده Chrome یا در پایشگر شبکه برای Firefox).

  2. برنامه وب را در مرورگر بازآوری کنید.

  3. پیام‌های گزارش را برای پیدا کردن پیام‌های خطا بررسی کنید.

  4. پس‌از چند ثانیه، در ابزارهای توسعه‌دهنده مرورگرتان، به‌دنبال تماس شبکه‌ای با firebaselogging.googleapis.com بگردید. وجود آن فراخوانی شبکه نشان می‌دهد که مرورگر درحال ارسال داده‌های عملکرد به Firebase است.

اگر برنامه‌تان رویدادهای عملکرد را ثبت نمی‌کند، نکات عیب‌یابی را مرور کنید.

مرحله ۴: (اختیاری) افزودن پایش سفارشی برای کد خاص

برای نظارت بر داده‌های عملکرد مرتبط با کد خاصی در برنامه‌تان، می‌توانید ردگیری‌های کد سفارشی را ابزاربندی کنید.

با ردگیری کد سفارشی، می‌توانید مدت زمان لازم برای تکمیل یک تکلیف خاص یا مجموعه‌ای از تکالیف توسط برنامه‌تان را اندازه‌گیری کنید، مانند بار کردن مجموعه‌ای از تصاویر یا پرس‌وجو از پایگاه داده‌تان. سنجه پیش‌فرض برای ردگیری کد سفارشی مدت‌زمان آن است، اما می‌توانید سنجه‌های سفارشی نیز اضافه کنید، مثل بازدیدهای حافظه پنهان و هشدارهای حافظه.

در کدتان، ابتدا و انتهای ردگیری کد سفارشی را تعریف می‌کنید (و هر سنجه سفارشی دلخواهی را اضافه می‌کنید) و از میانای برنامه‌سازی کاربردی ارائه‌شده توسط Performance Monitoring SDK استفاده می‌کنید.

برای کسب اطلاعات بیشتر درباره این ویژگی‌ها و نحوه افزودن آن‌ها به برنامه‌تان، به افزودن نظارت برای کد خاص مراجعه کنید.

مرحله ۵: برنامه‌تان را مستقر کنید و سپس نتایج را مرور کنید

پس‌از اعتبارسنجی Performance Monitoring، می‌توانید نسخه به‌روزشده برنامه‌تان را برای کاربرانتان مستقر کنید.

می‌توانید داده‌های عملکرد را در داشبورد عملکرد کنسول Firebase پایش کنید.

مراحل بعدی