Catch up on highlights from Firebase at Google I/O 2023. Learn more

開始使用 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 步：（可選）為特定代碼添加自定義監控

要監控與應用中特定代碼關聯的性能數據，您可以檢測自定義代碼跟踪。

使用自定義代碼跟踪，您可以測量您的應用程序完成特定任務或一組任務所需的時間，例如加載一組圖像或查詢數據庫。自定義代碼跟踪的默認指標是其持續時間，但您也可以添加自定義指標，例如緩存命中和內存警告。

在您的代碼中，您使用 Performance Monitoring SDK 提供的 API 定義自定義代碼跟踪的開始和結束（並添加任何所需的自定義指標）。

訪問為特定代碼添加監控以了解有關這些功能以及如何將它們添加到您的應用程序的更多信息。

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

驗證性能監控後，您可以將應用程序的更新版本部署給您的用戶。

您可以在 Firebase 控制台的性能儀表板中監控性能數據。

下一步