開始使用網頁版 Performance Monitoring

事前準備

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

  • 建立 Firebase 專案

  • 向 Firebase 註冊網頁應用程式

請注意，將 Firebase 新增至應用程式時，您可能會完成本頁稍後說明的某些步驟 (例如新增 SDK 和初始化 Firebase)。

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

  1. 如果尚未安裝，請 安裝 Firebase JS SDK 並初始化 Firebase。

  2. 新增 Performance Monitoring JavaScript 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 程式庫。如需安裝操作說明，請參閱程式庫的說明文件。

如要讓 Performance Monitoring 回報其他網頁應用程式指標，則不需要加入這個 Polyfill 程式庫。

步驟 3：產生成效事件，以顯示初始資料

將 SDK 成功加入應用程式後，Firebase 就會開始處理事件。如果您仍在進行本機開發，請與應用程式互動，產生事件以供初始資料收集和處理。

  1. 在本機環境中提供及查看 Web 應用程式。

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

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

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

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

  1. 開啟瀏覽器的開發人員工具 (例如，Chrome 開發人員工具的「Network」分頁，或 Firefox 的「Network Monitor」)。

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

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

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

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

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

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

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

在程式碼中，您可以使用 Performance Monitoring SDK 提供的 API，定義自訂程式碼追蹤的開始和結束位置 (並新增任何所需的自訂指標)。

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

步驟 6：部署應用程式，然後查看結果

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

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

後續步驟