Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Web 性能監控入門

在你開始之前

如果你還沒有準備好，請訪問火力地堡添加到您的JavaScript項目如何學習：

  • 創建 Firebase 項目

  • 向 Firebase 註冊您的網絡應用

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

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

  1. 如果你還沒有準備好，安裝火力地堡JS SDK和初始化火力地堡。

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

    網頁版 9

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

    網頁版 8

    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 庫來報告其他 Web 應用程序指標。

步驟3：為初始數據顯示生成性能事件

當您成功地將 SDK 添加到您的應用程序時，Firebase 開始處理事件。如果您仍在本地開發，請與您的應用程序交互以生成用於初始數據收集和處理的事件。

  1. 在本地環境中提供和查看您的 Web 應用程序。

  2. 通過為您的站點加載子頁面、與您的應用程序交互和/或觸發網絡請求來生成事件。確保在頁面加載後將瀏覽器選項卡保持打開至少 10 秒。

  3. 轉至性能儀表板的火力地堡控制台。您應該會在幾分鐘內看到初始數據顯示。

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

步驟4：對性能事件（可選）查看日誌信息

  1. 打開瀏覽器的開發者工具（例如，網絡選項卡為Chrome開發者工具，或在網絡監視器用於Firefox ）。

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

  3. 檢查您的日誌消息是否有任何錯誤消息。

  4. 幾秒鐘後，找了網絡呼叫firebaselogging.googleapis.com在瀏覽器的開發者工具。該網絡調用的存在表明瀏覽器正在向 Firebase 發送性能數據。

如果您的應用不記錄性能事件，查看故障排除提示。

步驟5：（可選）添加自定義的監視特定代碼

要監視特定代碼在您的應用程序相關聯，可以儀器性能數據自定義代碼的痕跡。

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

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

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

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

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

您可以監視性能數據的性能儀表板的火力地堡控制台。

下一步