Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

开始使用 Web 性能监控

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

在你开始之前

如果您还没有,请访问将 Firebase 添加到您的 JavaScript 项目以了解如何:

  • 创建一个 Firebase 项目

  • 向 Firebase 注册您的网络应用

请注意,当您将 Firebase 添加到您的应用程序时,您可能会完成本页后面描述的一些步骤(例如,添加 SDK 和初始化 Firebase)。

第 1 步:添加并初始化性能监控

  1. 如果您还没有安装 Firebase JS SDK 并初始化 Firebase

  2. 添加性能监控JS SDK并初始化性能监控:

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

Web version 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 库

要测量第一个输入延迟指标,您需要为该指标添加 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 步:(可选)为特定代码添加自定义监控

要监控与应用中特定代码关联的性能数据,您可以检测自定义代码跟踪

使用自定义代码跟踪,您可以测量您的应用程序完成特定任务或一组任务所需的时间,例如加载一组图像或查询数据库。自定义代码跟踪的默认指标是其持续时间,但您也可以添加自定义指标,例如缓存命中和内存警告。

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

访问为特定代码添加监控以了解有关这些功能以及如何将它们添加到您的应用程序的更多信息。

第 6 步:部署您的应用程序然后查看结果

验证性能监控后,您可以将应用程序的更新版本部署给您的用户。

您可以在 Firebase 控制台的性能仪表板中监控性能数据。

下一步