Check out what’s new from Firebase at Google I/O 2022. Learn more

Web için Performans İzleme'yi kullanmaya başlayın

Sen başlamadan önce

Henüz yapmadıysanız, aşağıdakileri nasıl yapacağınızı öğrenmek için JavaScript projenize Firebase Ekleme sayfasını ziyaret edin:

  • Bir Firebase projesi oluşturun

  • Web uygulamanızı Firebase'e kaydedin

Uygulamanıza Firebase eklediğinizde, bu sayfada daha sonra açıklanan adımlardan bazılarını tamamlayabileceğinizi unutmayın (örneğin, SDK'yı ekleme ve Firebase'i başlatma).

Adım 1 : Performans İzlemeyi ekleyin ve başlatın

  1. Henüz yapmadıysanız, Firebase JS SDK'yı yükleyin ve Firebase'i başlatın .

  2. Performance Monitoring JS SDK'sını ekleyin ve Performance Monitoring'i başlatın:

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

Adım 2 : İlk giriş gecikmeli çoklu doldurma kitaplığını ekleyin

İlk giriş gecikme metriğini ölçmek için bu metrik için çoklu doldurma kitaplığını eklemeniz gerekir. Kurulum talimatları için kitaplığın belgelerine bakın.

Performans İzleme'nin diğer web uygulaması ölçümlerini raporlaması için bu çoklu doldurma kitaplığının eklenmesi gerekli değildir.

Adım 3 : İlk veri gösterimi için performans olayları oluşturun

Firebase, SDK'yı uygulamanıza başarıyla eklediğinizde olayları işlemeye başlar. Hâlâ yerel olarak geliştiriyorsanız, ilk veri toplama ve işleme için olaylar oluşturmak üzere uygulamanızla etkileşim kurun.

  1. Web uygulamanızı yerel bir ortamda sunun ve görüntüleyin.

  2. Siteniz için alt sayfalar yükleyerek, uygulamanızla etkileşim kurarak ve/veya ağ isteklerini tetikleyerek etkinlikler oluşturun. Sayfa yüklendikten sonra tarayıcı sekmesini en az 10 saniye açık tuttuğunuzdan emin olun.

  3. Firebase konsolunun Performans panosuna gidin. Birkaç dakika içinde ilk veri görüntünüzü görmelisiniz.

    İlk verilerinizin bir görüntüsünü görmüyorsanız, sorun giderme ipuçlarını gözden geçirin.

Adım 4 : (İsteğe bağlı) Performans olayları için günlük mesajlarını görüntüleyin

  1. Tarayıcınızın geliştirici araçlarını açın (örneğin, Chrome Geliştirme Araçları için Ağ sekmesi veya Firefox için Ağ İzleyicisi ).

  2. Web uygulamanızı tarayıcıda yenileyin.

  3. Herhangi bir hata mesajı için günlük mesajlarınızı kontrol edin.

  4. Birkaç saniye sonra, tarayıcınızın geliştirici araçlarında firebaselogging.googleapis.com yapılan ağ aramasını arayın. Bu ağ aramasının varlığı, tarayıcının Firebase'e performans verileri gönderdiğini gösterir.

Uygulamanız performans olaylarını günlüğe kaydedmiyorsa sorun giderme ipuçlarını gözden geçirin.

Adım 5 : (İsteğe bağlı) Belirli kod için özel izleme ekleyin

Uygulamanızdaki belirli kodla ilişkili performans verilerini izlemek için özel kod izlemelerini kullanabilirsiniz.

Özel kod izlemeyle, uygulamanızın belirli bir görevi veya bir dizi görüntüyü yükleme veya veritabanınızı sorgulama gibi görevleri tamamlamasının ne kadar sürdüğünü ölçebilirsiniz. Özel kod izlemesi için varsayılan ölçüm, süresidir, ancak önbellek isabetleri ve bellek uyarıları gibi özel ölçümler de ekleyebilirsiniz.

Kodunuzda, Performance Monitoring SDK tarafından sağlanan API'yi kullanarak özel kod izlemenin başlangıcını ve sonunu tanımlarsınız (ve istediğiniz özel metrikleri eklersiniz).

Bu özellikler ve bunları uygulamanıza nasıl ekleyeceğiniz hakkında daha fazla bilgi edinmek için belirli kod için İzleme ekle sayfasını ziyaret edin.

Adım 6 : Uygulamanızı dağıtın ve sonuçları inceleyin

Performans İzleme'yi doğruladıktan sonra, uygulamanızın güncellenmiş sürümünü kullanıcılarınıza dağıtabilirsiniz.

Firebase konsolunun Performans panosunda performans verilerini izleyebilirsiniz.

Sonraki adımlar