Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

Sen başlamadan önce

Henüz varsa ziyaret edin JavaScript projeye Firebase ekleyin öğrenmek:

  • 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: ekleyin ve Performans İzleme başlatmak

  1. Henüz varsa, Firebase JS SDK yüklemek ve Firebase başlatmak .

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

    Web sürümü 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 sürümü 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();
    

2. Adım: İlk giriş gecikmesi polyfill kütüphane ekle

Ölçmek için ilk giriş gecikmesi metrik , bu metrik için polyfill kütüphanesini eklemeniz gerekir. Yükleme talimatları için kütüphanenin bakın belgeler .

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

Aşama 3: ilk veri görüntü için oluşturmak performans etkinlikleri

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. Git Performans pano Firebase konsolunun. Birkaç dakika içinde ilk veri görüntünüzü görmelisiniz.

    Eğer ilk verilerin bir ekran görmüyorsanız, gözden giderme ipuçları .

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

  1. Tarayıcınızın geliştirici araçları açın (örneğin, Ağ Chrome Dev Tools sekmesi veya Firefox için ağ izleyicisi ).

  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, bir ağ çağrısı aramaya firebaselogging.googleapis.com tarayıcınızın geliştirici araçları. Bu ağ çağrısının varlığı, tarayıcının Firebase'e performans verileri gönderdiğini gösterir.

Uygulama performansı olaylarını günlüğe değilse, gözden giderme ipuçları .

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

Şunları yapabilirsiniz enstrüman uygulamanızda belirli koduyla ilişkili performans verilerini izlemek için özel kod izleri .

Ö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 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).

Ziyaret özel kod için izleme ekleme daha bu özellikler ve nasıl uygulamanıza eklemek için hakkında bilgi edinmek için.

Adım 6: İnceleme sonuçları daha sonra dağıtma uygulama

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

Sen performans verilerini izleyebilir Performans pano Firebase konsolunun.

Sonraki adımlar