在你开始之前
如果您还没有,请访问将 Firebase 添加到您的 JavaScript 项目以了解如何:
创建一个 Firebase 项目
向 Firebase 注册您的网络应用
请注意,当您将 Firebase 添加到您的应用程序时,您可能会完成本页后面描述的一些步骤(例如,添加 SDK 和初始化 Firebase)。
第 1 步:添加并初始化性能监控
如果您还没有安装 Firebase JS SDK 并初始化 Firebase 。
添加性能监控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 开始处理事件。如果您仍在本地开发,请与您的应用交互以生成用于初始数据收集和处理的事件。
在本地环境中提供和查看您的 Web 应用程序。
通过为您的站点加载子页面、与您的应用交互和/或触发网络请求来生成事件。确保在页面加载后将浏览器选项卡保持打开状态至少 10 秒。
转到 Firebase 控制台的性能仪表板。您应该会在几分钟内看到初始数据显示。
如果您没有看到初始数据的显示,请查看故障排除提示。
第 4 步:(可选)查看性能事件的日志消息
打开浏览器的开发人员工具(例如, Chrome 开发工具的网络选项卡或Firefox 的网络监视器)。
在浏览器中刷新您的 Web 应用程序。
检查您的日志消息是否有任何错误消息。
几秒钟后,在浏览器的开发人员工具中查找对
firebaselogging.googleapis.com
的网络调用。该网络调用的存在表明浏览器正在向 Firebase 发送性能数据。
如果您的应用未记录性能事件,请查看故障排除提示。
第 5 步:(可选)为特定代码添加自定义监控
要监控与应用中特定代码关联的性能数据,您可以检测自定义代码跟踪。
使用自定义代码跟踪,您可以测量您的应用程序完成特定任务或一组任务所需的时间,例如加载一组图像或查询数据库。自定义代码跟踪的默认指标是其持续时间,但您也可以添加自定义指标,例如缓存命中和内存警告。
在您的代码中,您使用 Performance Monitoring SDK 提供的 API 定义自定义代码跟踪的开始和结束(并添加任何所需的自定义指标)。
访问为特定代码添加监控以了解有关这些功能以及如何将它们添加到您的应用程序的更多信息。
第 6 步:部署您的应用程序然后查看结果
验证性能监控后,您可以将应用程序的更新版本部署给您的用户。
您可以在 Firebase 控制台的性能仪表板中监控性能数据。
下一步
详细了解性能监控自动收集的数据:
- 应用中页面加载的数据
- 您的应用发出的HTTP/S 网络请求的数据
在 Firebase 控制台中查看、跟踪和过滤您的性能数据
通过检测自定义代码跟踪,在您的应用程序中添加对特定任务或工作流的监控