Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Mulai dengan Pemantauan Kinerja untuk web

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Sebelum kamu memulai

Jika Anda belum melakukannya, kunjungi Tambahkan Firebase ke proyek JavaScript Anda untuk mempelajari cara:

  • Buat proyek Firebase

  • Daftarkan aplikasi web Anda dengan Firebase

Perhatikan bahwa saat menambahkan Firebase ke aplikasi, Anda dapat menyelesaikan beberapa langkah yang dijelaskan nanti di halaman ini (misalnya, menambahkan SDK dan menginisialisasi Firebase).

Langkah 1 : Tambahkan dan inisialisasi Pemantauan Kinerja

  1. Jika Anda belum melakukannya, instal Firebase JS SDK dan inisialisasi Firebase .

  2. Tambahkan Performance Monitoring JS SDK dan inisialisasi Performance Monitoring:

Web version 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);

Web version 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();

Langkah 2 : Tambahkan perpustakaan polyfill penundaan input pertama

Untuk mengukur metrik penundaan masukan pertama , Anda perlu menambahkan pustaka polyfill untuk metrik ini. Untuk petunjuk penginstalan, lihat dokumentasi perpustakaan .

Menambahkan perpustakaan polyfill ini tidak diperlukan untuk Performance Monitoring untuk melaporkan metrik aplikasi web lainnya.

Langkah 3 : Hasilkan acara kinerja untuk tampilan data awal

Firebase mulai memproses peristiwa saat Anda berhasil menambahkan SDK ke aplikasi Anda. Jika Anda masih mengembangkan secara lokal, berinteraksilah dengan aplikasi Anda untuk menghasilkan peristiwa untuk pengumpulan dan pemrosesan data awal.

  1. Sajikan dan lihat aplikasi web Anda di lingkungan lokal.

  2. Buat peristiwa dengan memuat subhalaman untuk situs Anda, berinteraksi dengan aplikasi Anda, dan/atau memicu permintaan jaringan. Pastikan tab browser tetap terbuka setidaknya selama 10 detik setelah halaman dimuat.

  3. Buka dasbor Performa konsol Firebase. Anda akan melihat tampilan data awal Anda dalam beberapa menit.

    Jika Anda tidak melihat tampilan data awal Anda, tinjau tips pemecahan masalah .

Langkah 4 : (Opsional) Lihat pesan log untuk acara kinerja

  1. Buka alat pengembang browser Anda (misalnya, tab Jaringan untuk Alat Pengembang Chrome atau di Monitor Jaringan untuk Firefox ).

  2. Segarkan aplikasi web Anda di browser.

  3. Periksa pesan log Anda untuk setiap pesan kesalahan.

  4. Setelah beberapa detik, cari panggilan jaringan ke firebaselogging.googleapis.com di alat pengembang browser Anda. Adanya panggilan jaringan tersebut menunjukkan bahwa browser sedang mengirimkan data performa ke Firebase.

Jika aplikasi Anda tidak mencatat peristiwa kinerja, tinjau kiat pemecahan masalah .

Langkah 5 : (Opsional) Tambahkan pemantauan khusus untuk kode tertentu

Untuk memantau data kinerja yang terkait dengan kode tertentu di aplikasi, Anda dapat menggunakan pelacakan kode khusus .

Dengan pelacakan kode kustom, Anda dapat mengukur berapa lama waktu yang dibutuhkan aplikasi untuk menyelesaikan tugas atau kumpulan tugas tertentu, seperti memuat kumpulan gambar atau membuat kueri database Anda. Metrik default untuk pelacakan kode khusus adalah durasinya, tetapi Anda juga dapat menambahkan metrik khusus, seperti klik cache dan peringatan memori.

Dalam kode Anda, Anda menentukan awal dan akhir pelacakan kode khusus (dan menambahkan metrik khusus yang diinginkan) menggunakan API yang disediakan oleh Performance Monitoring SDK.

Kunjungi Tambahkan pemantauan untuk kode tertentu guna mempelajari lebih lanjut tentang fitur ini dan cara menambahkannya ke aplikasi Anda.

Langkah 6 : Terapkan aplikasi Anda lalu tinjau hasilnya

Setelah Anda memvalidasi Performance Monitoring, Anda dapat menerapkan versi terbaru aplikasi Anda ke pengguna.

Anda dapat memantau data performa di dasbor Performa di Firebase console.

Langkah selanjutnya