Trước khi bắt đầu
Nếu bạn chưa có, hãy truy cập Thêm Firebase vào dự án JavaScript của bạn để tìm hiểu cách:
Tạo dự án Firebase
Đăng ký ứng dụng web của bạn với Firebase
Lưu ý rằng khi thêm Firebase vào ứng dụng của mình, bạn có thể hoàn thành một số bước được mô tả sau trên trang này (ví dụ: thêm SDK và khởi chạy Firebase).
Bước 1 : Thêm và khởi tạo Giám sát hiệu suất
Nếu bạn chưa cài đặt, hãy cài đặt SDK Firebase JS và khởi tạo Firebase .
Thêm SDK JS Giám sát hiệu suất và khởi tạo Giám sát hiệu suất:
API mô-đun web
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);
API không gian tên web
import firebase from "firebase/compat/app"; import "firebase/compat/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();
Bước 2 : Thêm thư viện polyfill độ trễ đầu vào đầu tiên
Để đo chỉ số độ trễ đầu vào đầu tiên , bạn cần thêm thư viện polyfill cho chỉ số này. Để biết hướng dẫn cài đặt, hãy tham khảo tài liệu của thư viện.
Việc thêm thư viện điền đầy này là không bắt buộc đối với Giám sát hiệu suất để báo cáo các chỉ số ứng dụng web khác.
Bước 3 : Tạo các sự kiện hiệu suất để hiển thị dữ liệu ban đầu
Firebase bắt đầu xử lý các sự kiện khi bạn thêm thành công SDK vào ứng dụng của mình. Nếu bạn vẫn đang phát triển tại địa phương, hãy tương tác với ứng dụng của bạn để tạo các sự kiện nhằm thu thập và xử lý dữ liệu ban đầu.
Phục vụ và xem ứng dụng web của bạn trong môi trường cục bộ.
Tạo sự kiện bằng cách tải các trang con cho trang web của bạn, tương tác với ứng dụng của bạn và/hoặc kích hoạt các yêu cầu mạng. Đảm bảo luôn mở tab trình duyệt trong ít nhất 10 giây sau khi tải trang.
Chuyển đến bảng điều khiển Hiệu suất của bảng điều khiển Firebase. Bạn sẽ thấy dữ liệu ban đầu của mình hiển thị trong vòng vài phút.
Nếu bạn không thấy hiển thị dữ liệu ban đầu của mình, hãy xem lại các mẹo khắc phục sự cố .
Bước 4 : (Tùy chọn) Xem thông báo nhật ký cho các sự kiện hiệu suất
Mở công cụ dành cho nhà phát triển của trình duyệt của bạn (ví dụ: tab Mạng cho Công cụ dành cho nhà phát triển Chrome hoặc trong Giám sát mạng cho Firefox ).
Làm mới ứng dụng web của bạn trong trình duyệt.
Kiểm tra thông báo nhật ký của bạn để biết bất kỳ thông báo lỗi nào.
Sau vài giây, hãy tìm cuộc gọi mạng tới
firebaselogging.googleapis.com
trong công cụ dành cho nhà phát triển của trình duyệt của bạn. Sự hiện diện của cuộc gọi mạng đó cho thấy rằng trình duyệt đang gửi dữ liệu hiệu suất tới Firebase.
Nếu ứng dụng của bạn không ghi lại các sự kiện hiệu suất, hãy xem lại các mẹo khắc phục sự cố .
Bước 5 : (Tùy chọn) Thêm giám sát tùy chỉnh cho mã cụ thể
Để giám sát dữ liệu hiệu suất được liên kết với mã cụ thể trong ứng dụng của bạn, bạn có thể cung cấp dấu vết mã tùy chỉnh .
Với theo dõi mã tùy chỉnh, bạn có thể đo thời gian ứng dụng của mình hoàn thành một tác vụ hoặc nhóm tác vụ cụ thể, chẳng hạn như tải một nhóm hình ảnh hoặc truy vấn cơ sở dữ liệu của bạn. Số liệu mặc định cho theo dõi mã tùy chỉnh là thời lượng của nó, nhưng bạn cũng có thể thêm các số liệu tùy chỉnh, chẳng hạn như số lần truy cập bộ nhớ cache và cảnh báo bộ nhớ.
Trong mã của mình, bạn xác định phần đầu và phần cuối của một lần theo dõi mã tùy chỉnh (và thêm bất kỳ chỉ số tùy chỉnh mong muốn nào) bằng cách sử dụng API do SDK giám sát hiệu suất cung cấp.
Truy cập Thêm giám sát cho mã cụ thể để tìm hiểu thêm về các tính năng này và cách thêm chúng vào ứng dụng của bạn.
Bước 6 : Triển khai ứng dụng của bạn sau đó xem xét kết quả
Sau khi bạn đã xác thực Giám sát hiệu suất, bạn có thể triển khai phiên bản cập nhật của ứng dụng cho người dùng của mình.
Bạn có thể theo dõi dữ liệu hiệu suất trong bảng điều khiển Hiệu suất của bảng điều khiển Firebase.
Bước tiếp theo
Trải nghiệm thực tế với Giám sát hiệu suất Firebase cho Web Codelab .
Tìm hiểu thêm về dữ liệu do Giám sát hiệu suất tự động thu thập:
- Dữ liệu để tải trang trong ứng dụng của bạn
- Dữ liệu cho các yêu cầu mạng HTTP/S do ứng dụng của bạn cấp
Xem, theo dõi và lọc dữ liệu hiệu suất của bạn trong bảng điều khiển Firebase
Thêm giám sát cho các tác vụ hoặc quy trình công việc cụ thể trong ứng dụng của bạn bằng công cụ theo dõi mã tùy chỉnh