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 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 uygulamasını 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 dokümanları inceleyin.

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

3. Adım: İlk veri görüntüleme 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 Firebase konsolu. İlk verileriniz birkaç dakika içinde gösterilir.

    İ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 DevTools için Ağ sekmesi veya Firefox için Ağ İzleyici).

  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 kodla ilişkili performans verilerini izlemek için özel kod izlerini kullanabilirsiniz.

Ö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) Performance Monitoring SDK tarafından sağlanan API'yi kullanabilirsiniz.

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 uygulamasını doğruladıktan sonra uygulamanızı sağlar.

Performans verilerini Performans kontrol paneli Firebase konsolunda gösterilir.

Sonraki adımlar