開始使用 Web 性能監控

在你開始之前

如果您還沒有，請訪問將 Firebase 添加到您的 JavaScript 項目以了解如何：

• 創建一個 Firebase 項目

• 向 Firebase 註冊您的網絡應用

請注意，當您將 Firebase 添加到您的應用時，您可能會完成本頁後面描述的一些步驟（例如，添加 SDK 和初始化 Firebase）。

第 1 步：添加並初始化性能監控

1. 如果您還沒有，請安裝 Firebase JS SDK 並初始化 Firebase 。

2. 添加性能監控 JS SDK 並初始化性能監控：

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);

import firebase from "firebase/app";
import "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
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 控制台的性能信息中心監控性能數據。

下一步

• 獲得Firebase Performance Monitoring for Web Codelab的實踐經驗。

• 詳細了解性能監控自動收集的數據：

  • 應用中頁面加載的數據
  • 您的應用發出的HTTP/S 網絡請求的數據

• 在 Firebase 控制台中查看、跟踪和過濾您的效果數據

• 通過檢測自定義代碼跟踪，為您的應用程序中的特定任務或工作流添加監控

• 使用屬性過濾性能數據