Ikuti semua informasi yang diumumkan di Firebase Summit, dan pelajari bagaimana Firebase dapat membantu Anda mempercepat pengembangan aplikasi dan menjalankan aplikasi dengan percaya diri. Pelajari Lebih Lanjut

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 mungkin menyelesaikan beberapa langkah yang dijelaskan nanti di halaman ini (misalnya, menambahkan SDK dan menginisialisasi Firebase).

Langkah 1 : Tambahkan dan inisialisasi Performance Monitoring

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

  2. Tambahkan JS SDK Performance Monitoring 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 pustaka polyfill penundaan input pertama

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

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

Langkah 3 : Hasilkan peristiwa 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. Hasilkan 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 peristiwa 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 mengirimkan data performa ke Firebase.

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

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

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

Dengan pelacakan kode khusus, 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 cache hits 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 kepada pengguna.

Anda dapat memantau data performa di dasbor Performa Firebase console.

Langkah selanjutnya