開始使用網頁版 Performance Monitoring

事前準備

如果您尚未將 Firebase 新增至 JavaScript 專案,請參閱「將 Firebase 新增至 JavaScript 專案」一文,瞭解如何:

  • 建立 Firebase 專案

  • 透過 Firebase 註冊網頁應用程式

請注意,將 Firebase 加入應用程式時,您可能會完成 本頁後續介紹的步驟 (例如:新增 SDK 並初始化 Firebase)。

步驟 1:新增並初始化 Performance Monitoring

  1. 如果您還沒有這樣做, 安裝 Firebase JS SDK 並初始化 Firebase

  2. 新增 Performance Monitoring JS SDK 並初始化 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:產生初始資料顯示的效能事件

成功將 SDK 加進您的 應用程式。如果您仍在本機開發,可與應用程式互動來產生 收集及處理初次資料收集和處理的事件

  1. 在本機環境中提供及檢視網頁應用程式。

  2. 為網站載入子頁面並與 應用程式及/或觸發網路要求請務必保留瀏覽器分頁 網頁載入後至少開啟 10 秒。

  3. 前往「效能資訊主頁 Firebase 控制台。您應該會看到 稍等幾分鐘。

    如果沒看到初始資料,請查看疑難排解 提示

步驟 4(選用) 查看效能事件的記錄訊息

  1. 開啟瀏覽器的開發人員工具 (例如 Chrome 開發人員工具的「Network」分頁 或是 Firefox 網路監視器)。

  2. 在瀏覽器中重新整理網頁應用程式。

  3. 檢查記錄訊息,看看是否有任何錯誤訊息。

  4. 幾秒後,找出網路呼叫: firebaselogging.googleapis.com。 是否有該網路呼叫顯示瀏覽器 將資料匯出至 Firebase

如果您的應用程式未記錄效能事件,請參閱疑難排解 提示

步驟 5(選用) 為特定程式碼新增自訂監控

如要監控與應用程式中特定程式碼相關聯的效能資料,您可以 檢測自訂程式碼追蹤記錄

透過自訂程式碼追蹤記錄,即可評估應用程式完成時間 是一組特定工作或一組工作,例如載入一組圖片或查詢 資料庫。自訂程式碼追蹤記錄的預設指標為持續時間,但 您也可以新增自訂指標,例如快取命中和記憶體警告。

您在程式碼中定義自訂程式碼追蹤記錄的開頭和結尾 ( 新增任何所需的自訂指標) 並使用 Performance Monitoring SDK 提供的 API。

請參閱新增特定程式碼的監控功能。 深入瞭解這些功能,以及如何將這些功能新增至應用程式。

步驟 6:部署應用程式,然後查看結果

驗證 Performance Monitoring 後,您就可以向使用者部署更新版應用程式。

如需監控成效資料,請前往「成效」頁面 資訊主頁 Firebase 控制台。

後續步驟