網頁版 Firebase 性能監控

1. 概述

在此 Codelab 中,您將學習如何使用 Firebase 性能監控來衡量聊天網絡應用的性能。訪問https://fireperf-friendlychat.web.app/看到現場演示。

3b1284f5144b54f6.png

你會學到什麼

  • 如何將 Firebase 性能監控添加到您的網絡應用程序以獲取開箱即用的指標(頁面加載和網絡請求)。
  • 如何使用自定義跟踪測量特定的代碼段。
  • 如何記錄與自定義跟踪相關的其他自定義指標。
  • 如何使用自定義屬性進一步細分您的績效數據。
  • 如何使用性能監控儀表板來了解您的 Web 應用程序的性能。

你需要什麼

  • 您選擇的IDE或文本編輯器,如WebStorm凌動崇高,或VS代碼
  • 一個終端/控制台
  • 您選擇的瀏覽器,例如 Chrome
  • Codelab 的示例代碼(有關如何獲取代碼,請參閱此 Codelab 的下一部分。)

2.獲取示例代碼

克隆代碼實驗室的GitHub的庫在命令行:

git clone https://github.com/firebase/codelab-friendlychat-web

另外,如果你沒有安裝git的,你可以下載回購作為一個zip文件

導入入門應用

使用你的IDE,打開或導入📁 performance-monitoring-start從克隆庫目錄。這📁 performance-monitoring-start目錄包含代碼實驗室,這是一個聊天web應用程序的啟動代碼。

3. 創建並設置 Firebase 項目

創建 Firebase 項目

  1. 火力地堡控制台,點擊添加項目
  2. 命名您的火力地堡項目FriendlyChat

記住您的 Firebase 項目的項目 ID。

  1. 單擊創建項目

將 Firebase 網絡應用添加到項目

  1. 單擊網絡圖標58d6543a156e56f9.png創建一個新的 Firebase 網絡應用。
  2. 註冊暱稱應用Friendly Chat ,然後檢查旁邊還設置了火力地堡主機為這個應用程序的複選框。
  3. 點擊註冊應用
  4. 單擊剩餘的步驟。您現在不需要按照屏幕上的說明進行操作;這些將在本 Codelab 的後續步驟中介紹。

ea9ab0db531a104c.png

為 Firebase 身份驗證啟用 Google 登錄

要允許用戶登錄到他們的谷歌賬號的聊天應用程序,我們將使用谷歌登錄方法。

你將需要啟用谷歌登錄:

  1. 在火力地堡控制台,定位在左側面板的開發部分。
  2. 點擊身份驗證,然後點擊登錄方法選項卡(去安慰)。
  3. 啟用谷歌登錄提供者,然後單擊保存

7f3040a646c2e502.png

啟用 Cloud Firestore

Web應用程序使用雲公司的FireStore保存聊天消息和接收新的聊天消息。

您需要啟用 Cloud Firestore:

  1. 在火力地堡控制台的開發部分,單擊數據庫
  2. 單擊雲公司的FireStore窗格中創建數據庫
  3. 在測試模式選項選擇開始,然後單擊閱讀安全規則的免責條款後啟用

此 Codelab 的入門代碼包含更安全的規則。我們稍後會在 codelab 中部署它們。

24bd1a097492eac6.png

啟用雲存儲

該網絡應用使用 Cloud Storage for Firebase 來存儲、上傳和共享圖片。

您需要啟用雲存儲:

  1. 在火力地堡控制台的開發部分,單擊存儲
  2. 點擊開始使用
  3. 閱讀關於你的火力地堡項目安全規則的免責聲明,然後單擊得到它

起始代碼包括一個基本的安全規則,我們稍後會在 codelab 中部署它。

4. 安裝 Firebase 命令行界面

Firebase 命令行界面 (CLI) 允許您使用 Firebase 託管在本地為您的 Web 應用提供服務,以及將您的 Web 應用部署到您的 Firebase 項目。

  1. 按照安裝CLI這些指令在火力地堡文檔。
  2. 通過在終端中運行以下命令來驗證 CLI 是否已正確安裝:
firebase --version

確保您的 Firebase CLI 版本為 v8.0.0 或更高版本。

  1. 通過運行以下命令授權 Firebase CLI:
firebase login

我們已經設置了 Web 應用模板,以從應用的本地目錄(您之前在 codelab 中克隆的存儲庫)中提取應用的 Firebase 託管配置。但是要提取配置,我們需要將您的應用與您的 Firebase 項目相關聯。

  1. 請確保您的命令行訪問你的應用程序的本地performance-monitoring-start目錄。
  2. 通過運行以下命令將您的應用與 Firebase 項目相關聯:
firebase use --add
  1. 出現提示時,選擇您的項目 ID,然後為您的 Firebase 項目指定一個別名。

如果您有多個環境(生產、暫存等),則別名很有用。然而,對於本程式碼實驗室,就讓我們用的別名default

  1. 按照命令行中的其餘說明進行操作。

5. 與 Firebase 性能監控集成

有與火力地堡性能監控的網絡SDK整合各種方式(請參考文檔了解詳細信息)。在本程式碼實驗室中,我們將啟用性能從託管的URL監控。

添加性能監控並初始化 Firebase

  1. 打開src/index.js文件,然後添加下面的下面一行TODO以包括火力地堡性能監視SDK。

索引.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. 我們還需要使用包含有關 Firebase 項目和我們要使用的 Web 應用程序的信息的配置對象來初始化 Firebase SDK。由於我們使用 Firebase 託管,您可以導入一個特殊的腳本來為您執行此配置。對於本程式碼實驗室,我們已經添加在底部的下面一行對你public/index.html文件,但仔細檢查它的存在。

索引.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. src/index.js文件,添加下面的下面一行TODO初始化性能監控。

索引.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

當用戶使用您的網站時,性能監控現在會自動為您收集頁面加載和網絡請求指標!請參閱文檔,以了解更多有關自動頁面加載的痕跡。

添加第一個輸入延遲polyfill庫

首先輸入延遲,因為瀏覽器響應用戶的交互為用戶提供了關於您的應用程序的響應他們的第一印象是非常有用的。

當用戶第一次與頁面上的元素交互時,首次輸入延遲開始,比如點擊按鈕或超鏈接。它在瀏覽器能夠響應輸入後立即停止,這意味著瀏覽器不會忙於加載或解析您的內容。

這個 polyfill 庫對於性能監控集成是可選的。

打開public/index.html文件,然後取消以下行。

索引.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

此時,您已完成在代碼中與 Firebase 性能監控的集成!

在以下步驟中,您將了解如何使用 Firebase 性能監控添加自定義跟踪。如果您只想收集自動跟踪,請轉到“部署並開始發送圖像”部分。

6. 向您的應用程序添加自定義跟踪

性能監視,您可以創建自定義的痕跡。自定義跟踪是應用程序中執行塊持續時間的報告。您可以使用 SDK 提供的 API 定義自定義跟踪的開始和結束。

  1. src/index.js文件,得到一個性能對象,然後上傳圖像信息創建一個自定義跟踪。

索引.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. 要記錄自定義軌跡,您需要指定軌蹟的起點和終點。您可以將跟踪視為計時器。

索引.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

您已成功定義自定義跟踪!部署代碼後,如果用戶發送圖像消息,將記錄自定義跟踪的持續時間。這將使您了解真實世界的用戶在您的聊天應用程序中發送圖像需要多長時間。

7. 向您的應用程序添加自定義指標。

您可以進一步配置自定義跟踪到其範圍內發生的與性能相關的事件記錄的自定義指標。例如,您可以使用指標來調查上傳時間是否受我們在上一步中定義的自定義跟踪的圖像大小的影響。

  1. 從上一步中找到自定義跟踪(在規定src/index.js文件)。
  2. 添加下面的下面一行TODO記錄上傳的圖片的大小。

索引.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

此指標使性能監控能夠記錄自定義跟踪持續時間以及上傳的圖像大小。

8. 為您的應用添加自定義屬性

在前面的步驟的基礎上,你還可以收集自定義屬性定制的痕跡。自定義屬性有助於按特定於您的應用程序的類別對數據進行細分。例如,您可以收集圖像文件的 MIME 類型以調查 MIME 類型如何影響性能。

  1. 請使用您所定義的自定義跟踪src/index.js文件。
  2. 添加下面的下面一行TODO記錄MIME類型的上載的圖像。

索引.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

此屬性使性能監控能夠根據上傳的圖像類型對自定義跟踪持續時間進行分類。

9. [Extend] 使用 User Timing API 添加自定義跟踪

Firebase 性能監控 SDK 的設計使其可以異步加載,因此不會在頁面加載期間對網絡應用的性能產生負面影響。在加載 SDK 之前,Firebase Performance Monitoring API 不可用。在這種情況下,您仍然可以通過添加自定義跟踪用戶計時API 。火力性能SDK將拿起從持續時間衡量() ,並記錄他們定制的痕跡。

我們將使用 User Timing API 測量加載應用樣式腳本的持續時間。

  1. public/index.html文件,添加以下行來標記應用的造型腳本負荷的開始。

索引.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. 添加以下行以標記應用程序樣式腳本加載的結束,並測量開始和結束之間的持續時間。

索引.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

您在此處創建的條目將由 Firebase 性能監控自動收集。你將能夠找到調用自定義跟踪loadStyling在火力地堡性能控制台後面。

10. 部署並開始發送圖像

部署到 Firebase 託管

將 Firebase 性能監控添加到您的代碼後,請按照以下步驟將您的代碼部署到 Firebase 託管:

  1. 請確保您的命令行訪問你的應用程序的本地performance-monitoring-start目錄。
  2. 通過運行以下命令將文件部署到 Firebase 項目:
firebase deploy
  1. 控制台應顯示以下內容:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. 訪問您的Web應用程序,現在使用火力地堡託管在兩個你自己的火力地堡子域的完全託管: https://<projectId>.firebaseapp.comhttps://<projectId>.web.app

驗證是否啟用了性能監控

打開火力地堡控制台並轉到Performance選項卡。如果您看到一條顯示“檢測到 SDK”的歡迎消息,那麼您已成功與 Firebase 性能監控集成!

30df67e5a07d03b0.png

發送圖片信息

通過在您的聊天應用程序中發送圖像來生成一些性能數據。

  1. 登錄聊天應用後,點擊圖片上傳按鈕13734cb66773e5a3.png .
  2. 使用文件選擇器選擇圖像文件。
  3. 嘗試發送多張圖片(少數樣本存儲在public/images/ ),這樣就可以測試自定義指標和自定義屬性的分佈。

新消息應與您選擇的圖像一起顯示在應用程序的 UI 中。

11.監控儀表板

在部署您的網絡應用程序並以用戶身份發送圖像消息後,您可以在性能監控儀表板(在 Firebase 控制台中)查看性能數據。

訪問您的儀表板

  1. 火力地堡控制台,選擇具有您的項目Friendly Chat應用程序。
  2. 在左邊的面板中,找到質量部分,然後單擊性能

查看設備上的數據

在性能監控處理完您的應用程序數據後,您將在儀表板頂部看到選項卡。如果您還沒有看到任何數據或標籤,請務必稍後再回來查看。

  1. 單擊在設備選項卡。
  • 頁面加載表顯示了各種性能指標,性能監控自動收集,而你的頁面加載。
  • 持續時間表格顯示您在您的應用程序的代碼中定義的任何自定義痕跡。
  1. 點擊工期saveImageMes​​sage審查跟踪具體的指標。

e28758fd02d9ffac.png

  1. 點擊匯總審查圖像尺寸的分佈。您可以看到您添加的度量標準,用於測量此自定義跟踪的圖像大小。

c3cbcfc0c739a0a8.png

  1. 點擊隨著時間的推移,其是在上一步驟旁邊聚集。您還可以查看自定義跟踪的時間。點擊查看更多查看更詳細地收集的數據。

16983baa31e05732.png

  1. 在打開的頁面中,您可以通過點擊IMAGETYPE段的圖像MIME類型的持續時間數據。由於您添加到自定義跟踪中的 imageType 屬性,因此記錄了此特定數據。

8e5c9f32f42a1ca1.png

查看網絡數據

一個HTTP / S網絡請求是一個報告,捕獲的響應時間和網絡的呼叫的有效載荷大小。

  1. 返回性能監控儀表板的主屏幕。
  2. 點擊網絡選項卡查看網絡請求的條目列表為您的Web應用程序。
  3. 瀏覽它們以識別緩慢的請求並開始修復以提高應用程序的性能!

26a2be152a77ffb9.png

12. 恭喜!

您已啟用 Firebase SDK 進行性能監控並收集自動跟踪和自定義跟踪來衡量您的聊天應用的實際性能!

我們涵蓋的內容:

  • 將 Firebase 性能監控 SDK 添加到您的網絡應用。
  • 將自定義跟踪添加到您的代碼中。
  • 記錄與自定義跟踪相關的自定義指標。
  • 使用自定義屬性細分性能數據。
  • 了解如何使用性能監控儀表板深入了解您的應用程序的性能。

了解更多: