事前準備
如果您尚未這麼做,請參閱「將 Firebase 新增至 JavaScript 專案」一文,瞭解如何:
建立 Firebase 專案
透過 Firebase 註冊網頁應用程式
請注意,當您將 Firebase 加入應用程式時,可以完成本頁後續說明的部分步驟 (例如新增 SDK 及初始化 Firebase)。
步驟 1:新增並初始化 Performance Monitoring
如果您尚未 安裝 Firebase JS SDK 並初始化 Firebase,請先完成這項操作。
新增 Performance Monitoring JS SDK 並初始化 Performance Monitoring:
Web
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
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 程式庫,效能 Monitoring 就會回報其他網頁應用程式指標。
步驟 3:產生初始資料顯示的效能事件
當您將 SDK 成功新增至應用程式時,Firebase 就會開始處理事件。如果您在本機上進行開發,請與應用程式互動,以產生用於初始資料收集和處理的事件。
在本機環境中提供及檢視網頁應用程式。
為網站載入子頁面、與應用程式互動及/或觸發網路要求,藉此產生事件。網頁載入後,請務必讓瀏覽器分頁保持開啟至少 10 秒。
前往 Firebase 控制台的「Performance」(效能) 資訊主頁。您應該會在幾分鐘內看到初始資料。
如果沒看到初始資料,請參閱疑難排解提示。
步驟 4:(選用) 查看效能事件的記錄訊息
開啟瀏覽器的開發人員工具 (例如 Chrome 開發人員工具的網路分頁或 Firefox 網路監視器)。
在瀏覽器中重新整理網頁應用程式。
檢查記錄訊息,看看是否有任何錯誤訊息。
幾秒後,請在瀏覽器的開發人員工具中尋找對
firebaselogging.googleapis.com
的網路呼叫。如果有該網路呼叫,即表示瀏覽器正在傳送效能資料至 Firebase。
如果您的應用程式未記錄效能事件,請參閱疑難排解提示。
步驟 5:(選用) 為特定程式碼新增自訂監控功能
如要監控與應用程式中特定程式碼相關聯的效能資料,您可以檢測自訂程式碼追蹤記錄。
透過自訂程式碼追蹤記錄,您可以測量應用程式完成特定工作或一組工作需要的時間,例如載入一組圖片或查詢資料庫。自訂程式碼追蹤記錄的預設指標是其持續時間,但您也可以新增自訂指標,例如快取命中和記憶體警告。
在程式碼中,請使用 Performance Monitoring SDK 提供的 API 定義自訂程式碼追蹤記錄的開頭和結尾 (並新增所需的自訂指標)。
如要進一步瞭解這些功能,以及如何將這些功能加入應用程式,請參閱「新增特定程式碼的監控功能」一節。
步驟 6:部署應用程式並查看結果
驗證 Performance Monitoring 後,即可將應用程式的更新版本部署至使用者。
您可以在 Firebase 控制台的「效能資訊主頁」中監控效能資料。
後續步驟
進一步瞭解 Performance Monitoring 自動收集的資料:
- 在應用程式中載入網頁的資料
- 應用程式發布的 HTTP/S 網路要求相關資料
在 Firebase 控制台中查看、追蹤及篩選效能資料
檢測自訂程式碼追蹤記錄,為應用程式中的特定工作或工作流程新增監控功能