開始使用網頁版 Performance Monitoring

事前準備

如果您尚未這麼做，請參閱「將 Firebase 新增至 JavaScript 專案」一文，瞭解如何：

  • 建立 Firebase 專案

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

請注意，當您將 Firebase 加入應用程式時，可以完成本頁後續說明的部分步驟 (例如新增 SDK 及初始化 Firebase)。

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

  1. 如果您尚未 安裝 Firebase JS SDK 並初始化 Firebase，請先完成這項操作。

  2. 新增 Performance Monitoring JS SDK 並初始化 Performance Monitoring：

網頁模組 API

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);

網路命名空間 API

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 程式庫，效能 Monitoring 就會回報其他網頁應用程式指標。

步驟 3：產生初始資料顯示的效能事件

當您將 SDK 成功新增至應用程式時，Firebase 就會開始處理事件。如果您在本機上進行開發，請與應用程式互動，以產生用於初始資料收集和處理的事件。

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

  2. 為網站載入子頁面、與應用程式互動及/或觸發網路要求，藉此產生事件。網頁載入後，請務必讓瀏覽器分頁保持開啟至少 10 秒。

  3. 前往 Firebase 控制台的「Performance」(效能) 資訊主頁。您應該會在幾分鐘內看到初始資料。

    如果沒看到初始資料，請參閱疑難排解提示。

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

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

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

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

  4. 幾秒後，請在瀏覽器的開發人員工具中尋找對 firebaselogging.googleapis.com 的網路呼叫。如果有該網路呼叫，即表示瀏覽器正在傳送效能資料至 Firebase。

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

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

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

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

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

如要進一步瞭解這些功能，以及如何將這些功能加入應用程式，請參閱「新增特定程式碼的監控功能」一節。

步驟 6：部署應用程式並查看結果

驗證 Performance Monitoring 後，即可將應用程式的更新版本部署至使用者。

您可以在 Firebase 控制台的「效能資訊主頁」中監控效能資料。

後續步驟