Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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 版本 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 版本 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 步:添加 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 控制台的“性能”信息中心中监控性能数据。

后续步骤