Trang này được dịch bởi Cloud Translation API.

Giám sát hiệu suất Firebase dành cho web
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Tổng quan

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng tính năng Giám sát hiệu suất của Firebase để đo lường hiệu suất của một ứng dụng web trò chuyện. Truy cập vào https://fireperf-friendlychat.web.app/ để xem bản minh hoạ trực tiếp.

Kiến thức bạn sẽ học được

Cách thêm tính năng Giám sát hiệu suất Firebase vào ứng dụng web để nhận các chỉ số sẵn có (tải trang và yêu cầu mạng).
Cách đo lường một đoạn mã cụ thể bằng dấu vết tuỳ chỉnh.
Cách ghi lại các chỉ số tuỳ chỉnh khác liên kết với một dấu vết tuỳ chỉnh.
Cách phân đoạn thêm dữ liệu hiệu suất bằng các thuộc tính tuỳ chỉnh.
Cách sử dụng trang tổng quan theo dõi hiệu suất để nắm được hiệu suất của ứng dụng web.

Bạn cần có

IDE hoặc trình soạn thảo văn bản mà bạn chọn, chẳng hạn như WebStorm, Atom, Sublime hoặc VS Code
Một thiết bị đầu cuối/bảng điều khiển
Một trình duyệt mà bạn chọn, chẳng hạn như Chrome
Mã mẫu của lớp học lập trình (Xem phần tiếp theo của lớp học lập trình này để biết cách lấy mã.)

2. Tải mã mẫu

Sao chép kho lưu trữ GitHub của lớp học lập trình từ dòng lệnh:

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

Ngoài ra, nếu chưa cài đặt git, bạn có thể tải kho lưu trữ xuống dưới dạng tệp zip.

Nhập ứng dụng khởi động

Sử dụng IDE, hãy mở hoặc nhập thư mục 📁 performance-monitoring-start từ kho lưu trữ được sao chép. Thư mục performance-monitoring-start 📁 này chứa mã khởi động cho lớp học lập trình, đó là một ứng dụng web trò chuyện.

3. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

Trong bảng điều khiển của Firebase, hãy nhấp vào Thêm dự án.
Đặt tên dự án Firebase là FriendlyChat.

Ghi nhớ mã dự án cho dự án Firebase của bạn.

Nhấp vào Create Project (Tạo dự án).

Nâng cấp gói giá Firebase

Để sử dụng Cloud Storage cho Firebase, dự án Firebase của bạn phải sử dụng gói giá trả theo mức sử dụng (Blaze), tức là dự án đó được liên kết với một tài khoản Cloud Billing.

Tài khoản Cloud Billing cần có một phương thức thanh toán, chẳng hạn như thẻ tín dụng.
Nếu bạn mới sử dụng Firebase và Google Cloud, hãy kiểm tra xem bạn có đủ điều kiện nhận khoản tín dụng 300 USD và tài khoản dùng thử miễn phí trên Cloud Billing hay không.
Nếu bạn tham gia lớp học lập trình này trong một sự kiện, hãy hỏi người tổ chức xem có khoản tín dụng Google Cloud nào không.

Để nâng cấp dự án lên gói Blaze, hãy làm theo các bước sau:

Trong bảng điều khiển của Firebase, hãy chọn nâng cấp gói.
Chọn gói Blaze. Làm theo hướng dẫn trên màn hình để liên kết tài khoản Cloud Billing với dự án của bạn.
Nếu cần tạo tài khoản Cloud Billing trong quá trình nâng cấp này, bạn có thể cần quay lại quy trình nâng cấp trong bảng điều khiển Firebase để hoàn tất quá trình nâng cấp.

Thêm ứng dụng web Firebase vào dự án

Nhấp vào biểu tượng web để tạo một ứng dụng web Firebase mới.
Đăng ký ứng dụng bằng biệt hiệu Friendly Chat, sau đó đánh dấu vào hộp bên cạnh Cũng thiết lập tính năng Lưu trữ Firebase cho ứng dụng này.
Nhấp vào Đăng ký ứng dụng.
Nhấp qua các bước còn lại. Bạn không cần làm theo hướng dẫn trên màn hình ngay; các hướng dẫn này sẽ được đề cập trong các bước sau của lớp học lập trình này.

Để cho phép người dùng đăng nhập vào ứng dụng trò chuyện bằng Tài khoản Google, chúng ta sẽ sử dụng phương thức đăng nhập Google.

Bạn cần bật tính năng đăng nhập bằng Google:

Trong bảng điều khiển Firebase, hãy tìm phần Phát triển trong bảng điều khiển bên trái.
Nhấp vào Xác thực, sau đó nhấp vào thẻ Phương thức đăng nhập ( chuyển đến bảng điều khiển).
Bật nhà cung cấp dịch vụ đăng nhập Google, sau đó nhấp vào Lưu.

Thiết lập Cloud Firestore

Ứng dụng web sử dụng Cloud Firestore để lưu tin nhắn trò chuyện và nhận tin nhắn trò chuyện mới.

Dưới đây là cách thiết lập Cloud Firestore trong dự án Firebase:

Trong bảng điều khiển bên trái của Firebase, hãy mở rộng mục Build (Tạo) rồi chọn Firestore database (Cơ sở dữ liệu Firestore).
Nhấp vào Tạo cơ sở dữ liệu.
Đặt Mã nhận dạng cơ sở dữ liệu thành (default).
Chọn một vị trí cho cơ sở dữ liệu, sau đó nhấp vào Tiếp theo.
Đối với một ứng dụng thực tế, bạn nên chọn một vị trí gần với người dùng.
Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
Trong phần sau của lớp học lập trình này, bạn sẽ thêm các Quy tắc bảo mật để bảo mật dữ liệu của mình. Đừng phân phối hoặc công khai ứng dụng mà không thêm Quy tắc bảo mật cho cơ sở dữ liệu của bạn.
Nhấp vào Tạo.

Thiết lập Cloud Storage cho Firebase

Ứng dụng web sử dụng Cloud Storage cho Firebase để lưu trữ, tải lên và chia sẻ ảnh.

Sau đây là cách thiết lập Cloud Storage cho Firebase trong dự án Firebase:

Trong bảng điều khiển bên trái của Firebase, hãy mở rộng mục Bản dựng rồi chọn Bộ nhớ.
Nhấp vào Bắt đầu.
Chọn vị trí cho bộ chứa Bộ nhớ mặc định.
Các bộ chứa trong US-WEST1, US-CENTRAL1 và US-EAST1 có thể tận dụng cấp"Luôn miễn phí" cho Google Cloud Storage. Các bộ chứa ở tất cả các vị trí khác tuân theo mức giá và mức sử dụng của Google Cloud Storage.
Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
Trong phần sau của lớp học lập trình này, bạn sẽ thêm các quy tắc bảo mật để bảo mật dữ liệu của mình. Đừng phân phối hoặc hiển thị công khai ứng dụng mà không thêm Quy tắc bảo mật cho bộ nhớ.
Nhấp vào Tạo.

4. Cài đặt giao diện dòng lệnh Firebase

Giao diện dòng lệnh (CLI) của Firebase cho phép bạn sử dụng tính năng Lưu trữ Firebase để phân phát ứng dụng web trên máy cũng như triển khai ứng dụng web đó cho dự án Firebase.

Cài đặt CLI bằng cách làm theo hướng dẫn này trong tài liệu Firebase.
Xác minh rằng bạn đã cài đặt CLI đúng cách bằng cách chạy lệnh sau trong một thiết bị đầu cuối:

firebase --version

Đảm bảo rằng phiên bản Giao diện dòng lệnh (CLI) của Firebase là phiên bản 8.0.0 trở lên.

Uỷ quyền cho Firebase CLI bằng cách chạy lệnh sau:

firebase login

Chúng tôi đã thiết lập mẫu ứng dụng web để lấy cấu hình của ứng dụng cho tính năng Lưu trữ Firebase từ thư mục cục bộ của ứng dụng (kho lưu trữ mà bạn đã sao chép trước đó trong lớp học lập trình). Tuy nhiên, để lấy cấu hình, chúng ta cần liên kết ứng dụng của bạn với dự án Firebase.

Đảm bảo rằng dòng lệnh của bạn đang truy cập vào thư mục performance-monitoring-start cục bộ của ứng dụng.
Liên kết ứng dụng của bạn với dự án Firebase bằng cách chạy lệnh sau:

firebase use --add

Khi được nhắc, hãy chọn mã dự án của bạn, sau đó đặt bí danh cho dự án Firebase.

Bí danh sẽ hữu ích nếu bạn có nhiều môi trường (môi trường phát hành công khai, môi trường thử nghiệm, v.v.). Tuy nhiên, đối với lớp học lập trình này, chúng ta chỉ cần sử dụng bí danh của default.

Làm theo các hướng dẫn còn lại trong dòng lệnh.

5. Tích hợp với tính năng Giám sát hiệu suất Firebase

Có nhiều cách để tích hợp với SDK Giám sát hiệu suất Firebase cho web (tham khảo tài liệu để biết thông tin chi tiết). Trong lớp học lập trình này, chúng ta sẽ bật tính năng theo dõi hiệu suất từ URL lưu trữ.

Thêm tính năng giám sát hiệu suất và khởi chạy Firebase

Mở tệp src/index.js, sau đó thêm dòng sau bên dưới TODO để đưa SDK Giám sát hiệu suất Firebase vào.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

Chúng ta cũng cần khởi chạy SDK Firebase bằng một đối tượng cấu hình chứa thông tin về dự án Firebase và ứng dụng web mà chúng ta muốn sử dụng. Vì chúng ta đang sử dụng tính năng Lưu trữ Firebase, nên bạn có thể nhập một tập lệnh đặc biệt để thực hiện việc định cấu hình này. Đối với lớp học lập trình này, chúng tôi đã thêm dòng sau cho bạn ở cuối tệp public/index.html, nhưng hãy kiểm tra kỹ để đảm bảo dòng đó có trong tệp.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

Trong tệp src/index.js, hãy thêm dòng sau bên dưới TODO để khởi chạy tính năng giám sát hiệu suất.

index.js

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

Giờ đây, tính năng Giám sát hiệu suất sẽ tự động thu thập các chỉ số về yêu cầu mạng và tải trang cho bạn khi người dùng sử dụng trang web của bạn! Tham khảo tài liệu để tìm hiểu thêm về dấu vết tải trang tự động.

Thêm thư viện polyfill độ trễ đầu vào đầu tiên

Thời gian phản hồi lần nhập đầu tiên rất hữu ích vì trình duyệt phản hồi một lượt tương tác của người dùng sẽ tạo ấn tượng đầu tiên cho người dùng về khả năng phản hồi của ứng dụng.

Thời gian phản hồi lần tương tác đầu tiên bắt đầu khi người dùng tương tác lần đầu với một phần tử trên trang, chẳng hạn như nhấp vào một nút hoặc siêu liên kết. Quá trình này sẽ dừng ngay sau khi trình duyệt có thể phản hồi dữ liệu đầu vào, nghĩa là trình duyệt không bận tải hoặc phân tích cú pháp nội dung của bạn.

Bạn không bắt buộc phải sử dụng thư viện polyfill này để tích hợp tính năng giám sát hiệu suất.

Mở tệp public/index.html, sau đó bỏ ghi chú dòng sau.

index.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>

Tại thời điểm này, bạn đã hoàn tất việc tích hợp với tính năng Giám sát hiệu suất Firebase trong mã của mình!

Trong các bước sau, bạn sẽ tìm hiểu cách thêm dấu vết tuỳ chỉnh bằng tính năng Giám sát hiệu suất của Firebase. Nếu bạn chỉ muốn thu thập dấu vết tự động, hãy chuyển đến phần "Triển khai và bắt đầu gửi hình ảnh".

6. Thêm dấu vết tuỳ chỉnh vào ứng dụng

Tính năng Theo dõi hiệu suất cho phép bạn tạo dấu vết tuỳ chỉnh. Dấu vết tuỳ chỉnh là một báo cáo về thời lượng của một khối thực thi trong ứng dụng. Bạn xác định điểm bắt đầu và điểm kết thúc của dấu vết tuỳ chỉnh bằng cách sử dụng các API do SDK cung cấp.

Trong tệp src/index.js, hãy lấy một đối tượng hiệu suất, sau đó tạo một dấu vết tuỳ chỉnh để tải thông báo hình ảnh lên.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

Để ghi lại một dấu vết tuỳ chỉnh, bạn cần chỉ định điểm bắt đầu và điểm dừng cho dấu vết đó. Bạn có thể coi dấu vết là một bộ hẹn giờ.

index.js

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

 ...

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

Bạn đã xác định thành công một dấu vết tuỳ chỉnh! Sau khi triển khai mã, thời lượng của dấu vết tuỳ chỉnh sẽ được ghi lại nếu người dùng gửi tin nhắn hình ảnh. Điều này sẽ giúp bạn biết thời gian người dùng thực tế mất để gửi hình ảnh trong ứng dụng trò chuyện của bạn.

7. Thêm chỉ số tuỳ chỉnh vào ứng dụng.

Bạn có thể định cấu hình thêm dấu vết tuỳ chỉnh để ghi lại các chỉ số tuỳ chỉnh cho các sự kiện liên quan đến hiệu suất xảy ra trong phạm vi của dấu vết đó. Ví dụ: bạn có thể sử dụng một chỉ số để điều tra xem kích thước của hình ảnh có ảnh hưởng đến thời gian tải lên hay không đối với dấu vết tuỳ chỉnh mà chúng ta đã xác định ở bước cuối cùng.

Tìm dấu vết tuỳ chỉnh từ bước trước (được xác định trong tệp src/index.js).
Thêm dòng sau bên dưới TODO để ghi lại kích thước của hình ảnh đã tải lên.

index.js

 ...

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

 ...

Chỉ số này cho phép tính năng theo dõi hiệu suất ghi lại thời lượng theo dõi tuỳ chỉnh cũng như kích thước hình ảnh đã tải lên.

8. Thêm thuộc tính tuỳ chỉnh vào ứng dụng

Dựa trên các bước trước, bạn cũng có thể thu thập thuộc tính tuỳ chỉnh trên dấu vết tuỳ chỉnh. Thuộc tính tuỳ chỉnh có thể giúp phân đoạn dữ liệu theo các danh mục dành riêng cho ứng dụng của bạn. Ví dụ: bạn có thể thu thập loại MIME của tệp hình ảnh để điều tra mức độ ảnh hưởng của loại MIME đến hiệu suất.

Sử dụng dấu vết tuỳ chỉnh được xác định trong tệp src/index.js.
Thêm dòng sau bên dưới TODO để ghi lại loại MIME của hình ảnh đã tải lên.

index.js

 ...

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

 ...

Thuộc tính này cho phép tính năng giám sát hiệu suất phân loại thời lượng theo dõi tuỳ chỉnh dựa trên loại hình ảnh đã tải lên.

9. [Mở rộng] Thêm dấu vết tuỳ chỉnh bằng User Timing API

SDK Giám sát hiệu suất Firebase được thiết kế để có thể tải không đồng bộ, nhờ đó không ảnh hưởng tiêu cực đến hiệu suất của ứng dụng web trong quá trình tải trang. Trước khi tải SDK, bạn sẽ không thể sử dụng API Giám sát hiệu suất Firebase. Trong trường hợp này, bạn vẫn có thể thêm dấu vết tuỳ chỉnh bằng cách sử dụng User Timing API. SDK hiệu suất Firebase sẽ lấy thời lượng từ measure() và ghi lại dưới dạng dấu vết tuỳ chỉnh.

Chúng ta sẽ đo lường thời lượng tải tập lệnh tạo kiểu ứng dụng bằng User Timing API.

Trong tệp public/index.html, hãy thêm dòng sau để đánh dấu thời điểm bắt đầu tải tập lệnh tạo kiểu ứng dụng.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

Thêm các dòng sau để đánh dấu thời điểm kết thúc quá trình tải tập lệnh tạo kiểu ứng dụng và để đo lường thời lượng từ lúc bắt đầu đến lúc kết thúc.

index.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>

Mục bạn đã tạo tại đây sẽ được tính năng Giám sát hiệu suất Firebase tự động thu thập. Sau này, bạn sẽ thấy một dấu vết tuỳ chỉnh có tên là loadStyling trong bảng điều khiển Firebase Performance.

10. Triển khai và bắt đầu gửi hình ảnh

Triển khai lên Firebase Hosting

Sau khi thêm tính năng Giám sát hiệu suất Firebase vào mã, hãy làm theo các bước sau để triển khai mã đó lên Firebase Hosting:

Đảm bảo rằng dòng lệnh của bạn đang truy cập vào thư mục performance-monitoring-start cục bộ của ứng dụng.
Triển khai các tệp của bạn vào dự án Firebase bằng cách chạy lệnh sau:

firebase deploy

Bảng điều khiển sẽ hiển thị nội dung sau:

=== 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.firebasestorage.app
✔  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

Truy cập vào ứng dụng web hiện được lưu trữ đầy đủ bằng tính năng Lưu trữ Firebase tại hai miền con Firebase của riêng bạn: https://<projectId>.firebaseapp.com và https://<projectId>.web.app.

Xác minh rằng bạn đã bật tính năng giám sát hiệu suất

Mở bảng điều khiển của Firebase rồi chuyển đến thẻ Hiệu suất. Nếu bạn thấy thông báo chào mừng "Đã phát hiện SDK", thì tức là bạn đã tích hợp thành công với tính năng Giám sát hiệu suất Firebase!

Gửi tin nhắn hình ảnh

Tạo một số dữ liệu hiệu suất bằng cách gửi hình ảnh trong ứng dụng nhắn tin.

Sau khi đăng nhập vào ứng dụng trò chuyện, hãy nhấp vào nút tải hình ảnh lên .
Chọn một tệp hình ảnh bằng bộ chọn tệp.
Hãy thử gửi nhiều hình ảnh (một vài mẫu được lưu trữ trong public/images/) để bạn có thể kiểm thử việc phân phối các chỉ số tuỳ chỉnh và thuộc tính tuỳ chỉnh.

Thông báo mới sẽ xuất hiện trong giao diện người dùng của ứng dụng cùng với hình ảnh bạn đã chọn.

11. Theo dõi trang tổng quan

Sau khi triển khai ứng dụng web và gửi thông báo hình ảnh dưới vai trò người dùng, bạn có thể xem lại dữ liệu hiệu suất trong trang tổng quan về giám sát hiệu suất (trong bảng điều khiển Firebase).

Truy cập vào trang tổng quan

Trong bảng điều khiển của Firebase, hãy chọn dự án có ứng dụng Friendly Chat.
Trong bảng điều khiển bên trái, hãy tìm mục Chất lượng rồi nhấp vào Hiệu suất.

Xem lại dữ liệu trên thiết bị

Sau khi tính năng theo dõi hiệu suất xử lý dữ liệu của ứng dụng, bạn sẽ thấy các thẻ ở đầu trang tổng quan. Hãy nhớ kiểm tra lại sau nếu bạn chưa thấy dữ liệu hoặc thẻ nào.

Nhấp vào thẻ Trên thiết bị.

Bảng Số lượt tải trang cho thấy nhiều chỉ số hiệu suất mà tính năng giám sát hiệu suất tự động thu thập trong khi trang đang tải.
Bảng Durations (Thời lượng) cho thấy mọi dấu vết tuỳ chỉnh mà bạn đã xác định trong mã của ứng dụng.

Nhấp vào saveImageMessage trong bảng Durations (Thời lượng) để xem các chỉ số cụ thể cho dấu vết.

Nhấp vào Tổng hợp để xem mức phân phối kích thước hình ảnh. Bạn có thể thấy chỉ số mà bạn đã thêm để đo kích thước hình ảnh cho dấu vết tuỳ chỉnh này.

Nhấp vào Theo thời gian bên cạnh Tổng hợp ở bước trước. Bạn cũng có thể xem Thời lượng của dấu vết tuỳ chỉnh. Nhấp vào Xem thêm để xem dữ liệu đã thu thập chi tiết hơn.

Trên trang mở ra, bạn có thể phân đoạn dữ liệu về thời lượng theo loại MIME của hình ảnh bằng cách nhấp vào imageType. Dữ liệu cụ thể này được ghi lại do thuộc tính imageType mà bạn đã thêm vào dấu vết tuỳ chỉnh.

Xem lại dữ liệu mạng

Yêu cầu mạng HTTP/S là một báo cáo ghi lại thời gian phản hồi và kích thước tải trọng của các lệnh gọi mạng.

Quay lại màn hình chính của trang tổng quan về việc theo dõi hiệu suất.
Nhấp vào thẻ Mạng để xem danh sách các mục yêu cầu mạng cho ứng dụng web của bạn.
Hãy duyệt qua các yêu cầu đó để xác định yêu cầu bị chậm và bắt đầu khắc phục để cải thiện hiệu suất của ứng dụng!

12. Xin chúc mừng!

Bạn đã bật SDK Firebase để giám sát hiệu suất, đồng thời thu thập dấu vết tự động và dấu vết tuỳ chỉnh để đo lường hiệu suất thực tế của ứng dụng trò chuyện!

Nội dung chúng ta đã đề cập:

Thêm SDK Giám sát hiệu suất Firebase vào ứng dụng web.
Thêm dấu vết tuỳ chỉnh vào mã của bạn.
Ghi lại các chỉ số tuỳ chỉnh liên kết với dấu vết tuỳ chỉnh.
Phân đoạn dữ liệu hiệu suất bằng các thuộc tính tuỳ chỉnh.
Tìm hiểu cách sử dụng trang tổng quan theo dõi hiệu suất để nắm bắt thông tin chi tiết về hiệu suất của ứng dụng.

Giám sát hiệu suất Firebase dành cho web Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Tổng quan

Kiến thức bạn sẽ học được

Bạn cần có

2. Tải mã mẫu

Nhập ứng dụng khởi động

3. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

Nâng cấp gói giá Firebase

Thêm ứng dụng web Firebase vào dự án

Bật tính năng đăng nhập bằng Google cho tính năng xác thực Firebase

Thiết lập Cloud Firestore

Thiết lập Cloud Storage cho Firebase

4. Cài đặt giao diện dòng lệnh Firebase

5. Tích hợp với tính năng Giám sát hiệu suất Firebase

Thêm tính năng giám sát hiệu suất và khởi chạy Firebase

Thêm thư viện polyfill độ trễ đầu vào đầu tiên

6. Thêm dấu vết tuỳ chỉnh vào ứng dụng

7. Thêm chỉ số tuỳ chỉnh vào ứng dụng.

8. Thêm thuộc tính tuỳ chỉnh vào ứng dụng

9. [Mở rộng] Thêm dấu vết tuỳ chỉnh bằng User Timing API

10. Triển khai và bắt đầu gửi hình ảnh

Triển khai lên Firebase Hosting

Xác minh rằng bạn đã bật tính năng giám sát hiệu suất

Gửi tin nhắn hình ảnh

11. Theo dõi trang tổng quan

Truy cập vào trang tổng quan

Xem lại dữ liệu trên thiết bị

Xem lại dữ liệu mạng

12. Xin chúc mừng!

Nội dung chúng ta đã đề cập:

Tìm hiểu thêm:

Giám sát hiệu suất Firebase dành cho web
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.