了解 2023 年 Google I/O 大会上介绍的 Firebase 亮点。了解详情

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

Sen başlamadan önce

Henüz yapmadıysanız, nasıl yapılacağını öğrenmek için Firebase'i JavaScript projenize ekleyin sayfasını ziyaret edin:

  • Bir Firebase projesi oluşturun

  • Web uygulamanızı Firebase'e kaydedin

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

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

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

  2. Performance Monitoring JS SDK'yı 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ş gecikmesi polyfill kitaplığını ekleyin

İlk giriş gecikmesi metriğini ölçmek için bu metrik için polyfill kitaplığını eklemeniz gerekir. Yükleme yönergeleri için kitaplığın belgelerine bakın.

Performance Monitoring'in diğer web uygulaması metriklerini raporlaması için bu polyfill kitaplığının eklenmesi gerekli değildir.

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

SDK'yı uygulamanıza başarıyla eklediğinizde Firebase olayları işlemeye başlar. Hâlâ yerel olarak geliştiriyorsanız, ilk veri toplama ve işlemeye yönelik etkinlikler oluşturmak için uygulamanızla etkileşime geçin.

  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. İlk veri ekranınızı birkaç dakika içinde görmelisiniz.

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

4. Adım : (İsteğe bağlı) Performans etkinlikleri 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'nde ).

  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 yönelik bir ağ araması arayın. Bu ağ aramasının varlığı, tarayıcının performans verilerini Firebase'e gönderdiğini gösterir.

Uygulamanız performans olaylarını günlüğe kaydetmiyorsa sorun giderme ipuçlarını inceleyin.

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

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

Özel bir kod izlemeyle, uygulamanızın belirli bir görevi veya bir dizi görüntüyü yükleme veya veritabanınızı sorgulama gibi bir dizi görevi tamamlamasının ne kadar sürdüğünü ölçebilirsiniz. Özel bir kod izleme 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 bir kod izlemenin başlangıcını ve sonunu tanımlarsınız (ve istediğiniz özel ölçümleri eklersiniz).

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

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

Performance Monitoring'i doğruladıktan sonra, uygulamanızın güncellenmiş sürümünü kullanıcılarınıza dağıtabilirsiniz.

Performans verilerini, Firebase konsolunun Performans kontrol panelinde izleyebilirsiniz.

Sonraki adımlar