Web için Performance Monitoring'i kullanmaya başlayın

Başlamadan önce

Henüz yapmadıysanız Firebase'i JavaScript projenize ekleyerek aşağıdaki işlemleri nasıl yapacağınızı öğrenebilirsiniz:

  • Firebase projesi oluşturma

  • Web uygulamanızı Firebase'e kaydedin

Uygulamanıza Firebase'i eklediğinizde adımları (ör. SDK'yı ekleme ve ilk kullanıma hazırlama, .

1. Adım: Performance Monitoring'i 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 

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 

import firebase from "firebase/compat/app";
import "firebase/compat/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();

2. Adım: İlk giriş gecikmesi polyfill kitaplığını ekleyin

Ölçmek için ilk giriş gecikmesi metriği bu metrik için çoklu dolgu kitaplığını eklemeniz gerekir. Kurulum İçin daha fazla bilgi edinmek için kütüphanenin belgeleri inceleyin.

Performance Monitoring'in diğerini raporlaması için bu çoklu dolgu kitaplığının eklenmesine gerek yoktur web uygulaması metrikleri

3. Adım: Verilerin ilk gösterilmesi için performans etkinlikleri oluşturun

Firebase, SDK'yı uygulamanıza başarılı bir şekilde eklediğinizde etkinlikleri işlemeye başlar: uygulamasını indirin. Hâlâ yerel olarak geliştirme yapıyorsanız etkinlikleri gözden geçirin.

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

  2. Sitenizin alt sayfalarını yükleyerek ve uygulama ve/veya ağ isteklerini tetikleme. Tarayıcı sekmesini kullanmaya devam edin ve sayfa yüklendikten sonra en az 10 saniye açılır.

  3. Performans kontrol paneline gidin bölümüne gidin. İlk verilerinizin birkaç dakika.

    İlk verileriniz gösterilmiyorsa sorun giderme ipuçları.

4. Adım: (İsteğe bağlı) Performans etkinliklerine ait 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ştirici Araçları için Ağ sekmesi veya Firefox için Ağ İzleyicisi).

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

  3. Hata mesajı olup olmadığını görmek 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. İlgili içeriği oluşturmak için kullanılan olup olmaması tarayıcının performans ve performans gönderdiğini gösterir Firebase'e aktarmanızı sağlar.

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

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

Uygulamanızdaki belirli bir kodla ilişkilendirilmiş performans verilerini izlemek için araç özel kod izleri.

Özel kod izleme ile uygulamanızın ne kadar sürede tamamlandığını ölçebilirsiniz. belirli bir görev veya görev kümesi (örneğin, bir dizi resim yüklemek veya yardımcı olur. Özel kod izleme için varsayılan metrik süresidir ancak önbellek isabetleri ve bellek uyarıları gibi özel metrikler de ekleyebilirsiniz.

Kodunuzda, özel bir kod izlemenin başlangıcını ve sonunu tanımlarsınız istediğiniz özel metrikleri ekleyebilirsiniz).

Belirli bir kod için izleme ekleme sayfasını ziyaret edin. göz atın.

6. Adım: Uygulamanızı dağıtıp sonuçları inceleyin

Performance Monitoring'i doğruladıktan sonra uygulamanızı sağlar.

Performans verilerini Performans kontrol paneli Firebase konsolu.

Sonraki adımlar