開始使用網頁版 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 控制台。

後續步驟