Firebase Web 效能監控

1. 概述

在此 Codelab 中，您將學習如何使用 Firebase 效能監控來衡量聊天 Web 應用的效能。請造訪https://fireperf-Friendlychat.web.app/查看現場示範。

3b1284f5144b54f6.png

你將學到什麼

  • 如何將 Firebase 效能監控新增至您的 Web 應用程式以取得開箱即用的指標（頁面載入和網路請求）。
  • 如何使用自訂追蹤來測量特定程式碼段。
  • 如何記錄與自訂追蹤相關的附加自訂指標。
  • 如何使用自訂屬性進一步細分績效數據。
  • 如何使用效能監控儀表板來了解 Web 應用程式的效能。

你需要什麼

  • 您選擇的 IDE 或文字編輯器，例如WebStorm 、 Atom 、 Sublime或VS Code
  • 終端/控制台
  • 您選擇的瀏覽器，例如 Chrome
  • Codelab 的範例程式碼（有關如何取得程式碼，請參閱本 Codelab 的下一部分。）

2. 取得範例程式碼

從命令列克隆 Codelab 的GitHub 儲存庫：

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

或者，如果您沒有安裝 git，則可以將儲存庫下載為 zip 檔案。

導入入門應用程式

使用 IDE，從複製的儲存庫中開啟或匯入 📁 performance-monitoring-start目錄。這個 📁 performance-monitoring-start目錄包含 Codelab 的起始程式碼，這是一個聊天 Web 應用程式。

3. 建立並設定 Firebase 項目

創建 Firebase 項目

  1. 在Firebase 控制台中，按一下「新增項目」 。
  2. 將您的 Firebase 專案命名為FriendlyChat 。

請記住您的 Firebase 專案的專案 ID。

  1. 按一下「建立專案」 。

將 Firebase Web 應用程式加入到專案中

  1. 按一下網路圖示58d6543a156e56f9.png建立一個新的 Firebase Web 應用程式。
  2. 使用暱稱Friendly Chat註冊應用程序，然後選中“同時為此應用程式設定 Firebase 託管”旁邊的方塊。
  3. 點擊註冊應用程式。
  4. 按一下完成剩餘步驟。您現在不需要按照螢幕上的指示進行操作；這些將在本 Codelab 的後續步驟中介紹。

ea9ab0db531a104c.png

啟用 Google 登入以進行 Firebase 驗證

為了允許用戶使用其 Google 帳戶登入聊天應用，我們將使用Google登入方法。

您需要啟用Google登入：

  1. 在 Firebase 控制台中，找到左側面板中的「開發」部分。
  2. 按一下「驗證」 ，然後按一下「登入方法」標籤（前往控制台）。
  3. 啟用Google登入提供程序，然後按一下「儲存」 。

7f3040a646c2e502.png

啟用 Cloud Firestore

Web 應用程式使用Cloud Firestore儲存聊天訊息並接收新的聊天訊息。

您需要啟用 Cloud Firestore：

  1. 在 Firebase 控制台的「開發」部分中，按一下「資料庫」 。
  2. 按一下 Cloud Firestore 窗格中的建立資料庫。
  3. 選擇「以測試模式啟動」選項，然後在閱讀有關安全規則的免責聲明後按一下「啟用」 。

此 Codelab 的起始程式碼包含更安全的規則。我們稍後將在 Codelab 中部署它們。

24bd1a097492eac6.png

啟用雲端儲存

此 Web 應用程式使用 Cloud Storage for Firebase 來儲存、上傳和分享圖片。

您需要啟用雲端儲存：

  1. 在 Firebase 控制台的「開發」部分中，按一下「儲存」 。
  2. 單擊開始。
  3. 閱讀有關您的 Firebase 專案安全規則的免責聲明，然後按一下知道了。

起始程式碼包含基本安全規則，我們稍後將在 Codelab 中部署該規則。

4.安裝Firebase命令列介面

Firebase 命令列介面 (CLI) 可讓您使用 Firebase 託管在本機提供您的 Web 應用程式以及將您的 Web 應用程式部署到 Firebase 專案。

  1. 請按照 Firebase 文件中的這些說明安裝 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 專案指定一個別名。

如果您有多個環境（生產、登台等），則別名很有用。但是，對於此 Codelab，我們只使用default別名。

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

5. 與 Firebase 效能監控集成

有多種方法可以與 Web 版 Firebase 效能監控 SDK 整合（有關詳細信息，請參閱文件）。在此 Codelab 中，我們將透過託管 URL啟用效能監控。

新增效能監控並初始化 Firebase

  1. 開啟src/index.js文件，然後在TODO下方新增以下行以包含 Firebase 效能監控 SDK。

索引.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. 我們還需要使用一個配置物件來初始化 Firebase SDK，該物件包含有關 Firebase 專案和我們要使用的 Web 應用程式的資訊。由於我們使用 Firebase 託管，因此您可以匯入一個特殊腳本來為您執行此配置。對於此 Codelab，我們已在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. [擴充]使用User Timing API添加自訂跟踪

Firebase 效能監控 SDK 的設計使其可以非同步加載，因此不會在頁面加載期間對 Web 應用的效能產生負面影響。在載入 SDK 之前，Firebase 效能監控 API 不可用。在這種情況下，您仍然可以使用User Timing API新增自訂追蹤。 Firebase 效能 SDK 將從measure()中取得持續時間並將其記錄為自訂追蹤。

我們將使用 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 效能監控將自動收集您在此處建立的條目。稍後您將能夠在 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 應用程序，該應用程式現已使用 Firebase 託管完全託管在您自己的兩個 Firebase 子網域中： https://<projectId>.firebaseapp.com和https://<projectId>.web.app 。

驗證效能監控是否已啟用

打開Firebase 控制台並轉到“效能”選項卡。如果您看到歡迎訊息顯示“偵測到 SDK”，則表示您已成功與 Firebase 效能監控整合！

30df67e5a07d03b0.png

傳送圖片訊息

透過在聊天應用程式中發送圖像來產生一些效能數據。

  1. 登入聊天應用程式後，點擊圖片上傳按鈕13734cb66773e5a3.png 。
  2. 使用檔案選擇器選擇影像檔案。
  3. 嘗試傳送多個影像（有些範例儲存在public/images/中），以便您可以測試自訂指標和自訂屬性的分佈。

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

11.監控儀表板

部署 Web 應用程式並以使用者身分傳送影像訊息後，您可以在效能監控儀表板（在 Firebase 控制台中）中查看效能資料。

存取您的儀表板

  1. 在Firebase 控制台中，選擇包含您的Friendly Chat應用程式的項目。
  2. 在左側面板中，找到“品質”部分，然後按一下“效能” 。

查看設備上的數據

效能監控處理完應用程式的資料後，您將在儀表板頂部看到選項卡。如果您還沒有看到任何資料或選項卡，請務必稍後再回來查看。

  1. 按一下在裝置上標籤。
  • 頁面載入表顯示了效能監控在頁面載入時自動收集的各種效能指標。
  • 持續時間表顯示您在應用程式程式碼中定義的任何自訂追蹤。
  1. 按一下「持續時間」表中的「saveImageMes​​age」以查看追蹤的特定指標。

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 新增至您的 Web 應用。
  • 將自訂追蹤新增到您的程式碼中。
  • 記錄與自訂追蹤相關的自訂指標。
  • 使用自訂屬性細分效能資料。
  • 了解如何使用效能監控儀表板來深入了解應用程式的效能。

了解更多：