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

Bắt đầu với Giám sát hiệu suất cho web

Trước khi bắt đầu

Nếu bạn chưa sẵn sàng, hãy truy cập Thêm căn cứ hỏa lực cho dự án JavaScript của bạn để học 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 bạn 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

  1. Nếu bạn chưa sẵn sàng, cài đặt các căn cứ hỏa lực JS SDK và khởi tạo căn cứ hỏa lực .

  2. Thêm SDK JS giám sát hiệu suất và khởi chạy Giám sát hiệu suất:

    Phiên bản 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);

    Phiên bản 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();

Bước 2: Thêm các đầu vào đầu tiên thư viện chậm trễ polyfill

Để đo đầu tiên số liệu chậm trễ đầu vào , bạn cần phải thêm thư viện polyfill cho chỉ số này. Để được hướng dẫn cài đặt, hãy tham khảo của thư viện tài liệu .

Không cần thêm thư viện polyfill này để 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 sự kiện hoạt động để 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 cục bộ, hãy tương tác với ứng dụng của bạn để tạo các sự kiện cho việc thu thập và xử lý dữ liệu ban đầu.

  1. Cung cấp và xem ứng dụng web của bạn trong môi trường cục bộ.

  2. 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 giữ tab trình duyệt mở trong ít nhất 10 giây sau khi tải trang.

  3. Đi đến bảng điều khiển hiệu suất của các firebase console. Bạn sẽ thấy hiển thị dữ liệu ban đầu của mình trong vòng vài phút.

    Nếu bạn không nhìn thấy một hiển thị dữ liệu ban đầu của bạn, xem lại những mẹo gỡ rối .

Bước 4: (Tùy chọn) Xem các thông điệp log cho các sự kiện hoạt động

  1. Mở công cụ phát triển của trình duyệt của bạn (ví dụ, tab cho Chrome Dev Network Tools hoặc trong Network Monitor cho Firefox ).

  2. Làm mới ứng dụng web của bạn trong trình duyệt.

  3. Kiểm tra thông báo nhật ký của bạn để tìm bất kỳ thông báo lỗi nào.

  4. Sau một vài giây, tìm kiếm một cuộc gọi mạng để firebaselogging.googleapis.com trong các công cụ nhà phát triển của trình duyệt. 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 đến Firebase.

Nếu ứng dụng của bạn không đăng nhập các sự kiện thực hiện, xem xét các mẹo gỡ rối .

Bước 5: (Tùy chọn) Thêm tùy chỉnh giám sát cho mã cụ thể

Theo dõi dữ liệu hiệu suất kết hợp với mã cụ thể trong ứng dụng của bạn, bạn có thể công cụ mã tùy chỉnh dấu vết .

Với dấu vết mã tùy chỉnh, bạn có thể đo lường thời gian ứng dụng của mình hoàn thành một nhiệm vụ hoặc tập hợp tác vụ cụ thể, chẳng hạn như tải một tập hợp hình ảnh hoặc truy vấn cơ sở dữ liệu của bạn. Số liệu mặc định cho dấu vết mã tùy chỉnh là thời lượng của nó, nhưng bạn cũng có thể thêm 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 dấu vết mã tùy chỉnh (và thêm bất kỳ số liệu 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.

Thăm Thêm giám sát cho mã cụ thể để tìm hiểu thêm về các tính năng và làm thế nào để 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 đó kết quả rà soát

Sau khi 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 các firebase console.

Bước tiếp theo