Web 效能監控入門

在你開始之前

如果您還沒有這樣做，請造訪將 Firebase 新增至您的 JavaScript 專案以了解如何：

  • 創建 Firebase 項目

  • 向 Firebase 註冊您的網路應用

請注意，當您將 Firebase 新增至應用程式時，您可能需要完成本頁後面所述的一些步驟（例如，新增 SDK 和初始化 Firebase）。

第 1 步：新增並初始化效能監控

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

  2. 新增效能監控JS SDK並初始化效能監控：

網路模組化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);

Web 命名空間 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 程式庫即可報告其他 Web 應用程式指標。

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

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

  1. 在本機環境中提供和檢視您的 Web 應用程式。

  2. 透過載入網站的子頁面、與應用程式互動和/或觸發網路請求來產生事件。確保頁面載入後瀏覽器標籤保持開啟狀態至少 10 秒。

  3. 前往 Firebase 控制台的效能儀表板。您應該會在幾分鐘內看到初始資料顯示。

    如果您沒有看到初始資料的顯示，請查看故障排除提示。

步驟 4 ：（可選）查看效能事件的日誌訊息

  1. 開啟瀏覽器的開發人員工具（例如， Chrome 開發工具的「網路」標籤或Firefox 的「網路監視器」）。

  2. 在瀏覽器中刷新您的 Web 應用程式。

  3. 檢查日誌訊息中是否有任何錯誤訊息。

  4. 幾秒鐘後，在瀏覽器的開發人員工具中尋找firebaselogging.googleapis.com網頁呼叫。此網路呼叫的存在表示瀏覽器正在向 Firebase 發送效能資料。

如果您的應用程式沒有記錄效能事件，請查看故障排除提示。

步驟 5 ：（可選）為特定程式碼新增自訂監控

若要監控與應用程式中特定程式碼相關的效能數據，您可以偵測自訂程式碼追蹤。

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

在程式碼中，您可以使用效能監控 SDK 提供的 API 定義自訂程式碼追蹤的開始和結束（並新增任何所需的自訂指標）。

請造訪新增特定程式碼的監控以了解有關這些功能以及如何將它們新增至您的應用程式的更多資訊。

第 6 步：部署您的應用程式然後查看結果

驗證效能監控後，您可以向使用者部署應用程式的更新版本。

您可以在 Firebase 控制台的效能儀表板中監控效能資料。

下一步