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步:部署應用程序,然後查看結果

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

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

下一步