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 控制台的性能儀表板中監控性能數據。

下一步