Performance Monitoring 使用入门 (Web)

准备工作

如果您尚未开始使用本产品,请参阅将 Firebase 添加到您的 JavaScript 项目,以了解如何执行以下操作:

  • 创建 Firebase 项目

  • 在 Firebase 中注册您的 Web 应用

请注意,将 Firebase 添加到应用时,您可以完成下文介绍的一些步骤(例如,添加 SDK 和初始化 Firebase)。

第 1 步:添加并初始化 Performance Monitoring

  1. 如果您尚未安装 Firebase JS SDK 并初始化 Firebase,请先安装并进行初始化。

  2. 添加 Performance Monitoring JS SDK 并初始化 Performance Monitoring:

Web 模块化 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 步:添加 First Input Delay polyfill 库

如需测量 First Input Delay 指标,您需要添加此 polyfill 库。如需了解安装说明,请参阅该库的文档

Performance Monitoring 无需添加此 polyfill 库即可报告其他 Web 应用指标。

第 3 步:生成性能事件以显示初始数据

成功将 SDK 添加到应用后,Firebase 会开始处理事件。如果您仍在本地进行开发,请与您的应用交互以生成事件,从而让 SDK 收集和处理初始数据。

  1. 在本地环境中托管和查看您的 Web 应用。

  2. 可通过以下方法生成事件:为您的网站加载子页面、与您的应用进行交互,以及/或者触发网络请求。网页加载后,请确保让浏览器标签页保持打开状态至少 10 秒。

  3. 前往 Firebase 控制台的“性能”信息中心。您应该会在几分钟内看到初始数据。

    如果您没有看到初始数据,请查看问题排查提示

第 4 步:(可选)查看性能事件的日志消息

  1. 打开浏览器的开发者工具(例如,Chrome DevTools 的“网络”标签页Firefox 的网络监视器)。

  2. 在浏览器中刷新您的 Web 应用。

  3. 检查您的日志消息中是否有错误消息。

  4. 几秒钟后,在浏览器的开发者工具中查找对 firebaselogging.googleapis.com 的网络调用。如果存在该网络调用,表示浏览器正在向 Firebase 发送性能数据。

如果您的应用未记录性能事件,请查看问题排查提示

第 5 步:(可选)为特定代码添加自定义监控功能

如需监控与应用中特定代码相关联的性能数据,您可以对代码进行插桩处理,从而添加自定义代码跟踪记录

借助自定义代码跟踪记录,您可以衡量应用完成一项或一组任务(例如加载一组图像或查询数据库)所需的时间。自定义代码跟踪记录的默认指标是其时长,但您也可以添加自定义指标,例如缓存命中数和内存警告。

在代码中,您可以使用 Performance Monitoring SDK 提供的 API 指定自定义跟踪记录的开始和结束(以及添加任何所需的自定义指标)。

请访问为特定代码添加监控功能,详细了解这些功能以及如何将其添加到您的应用中。

第 6 步:部署应用,然后查看结果

验证 Performance Monitoring 之后,您就可以将新版应用部署给用户了。

您可以在 Firebase 控制台的“性能”信息中心中监控性能数据。

后续步骤