Sen başlamadan önce
Henüz yapmadıysanız, nasıl yapılacağını öğrenmek için Firebase'i JavaScript projenize ekleme sayfasını ziyaret edin:
Firebase projesi oluşturma
Web uygulamanızı Firebase'e kaydedin
Firebase'i uygulamanıza eklediğinizde bu sayfanın ilerleyen kısımlarında 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
Henüz yapmadıysanız Firebase JS SDK'yı yükleyin ve Firebase'i başlatın .
Performance Monitoring JS SDK'sını ekleyin ve Performance Monitoring'i başlatın:
Web modüler API'si
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 ad alanlı API
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();
Adım 2 : İlk giriş gecikmesi çoklu doldurma kitaplığını ekleyin
İlk giriş gecikmesi ölçüsünü ölçmek için bu metriğin çoklu doldurma kitaplığını eklemeniz gerekir. Kurulum talimatları için kütüphanenin 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.
3. Adım : İlk veri görüntüleme için performans olaylarını oluşturun
Firebase, SDK'yı uygulamanıza başarıyla eklediğinizde etkinlikleri işlemeye başlar. Hala yerel olarak geliştirme yapıyorsanız, ilk veri toplama ve işlemeye yönelik etkinlikler oluşturmak için uygulamanızla etkileşim kurun.
Web uygulamanızı yerel bir ortamda yayınlayın ve görüntüleyin.
Siteniz için alt sayfalar yükleyerek, uygulamanızla etkileşimde bulunarak 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.
Firebase konsolunun Performans kontrol paneline gidin. Birkaç dakika içinde ilk verilerinizin görüntülendiğini görmelisiniz.
Başlangıç verilerinizin görüntüsünü görmüyorsanız sorun giderme ipuçlarını inceleyin.
4. Adım : (İsteğe bağlı) Performans etkinliklerine ilişkin günlük mesajlarını görüntüleyin
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 ).
Web uygulamanızı tarayıcıda yenileyin.
Herhangi bir hata mesajı için günlük mesajlarınızı kontrol edin.
Birkaç saniye sonra tarayıcınızın geliştirici araçlarında
firebaselogging.googleapis.com
adresine yapılacak bir ağ araması arayın. Bu ağ çağrısı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.
Adım 5 : (İsteğe bağlı) Belirli kod için özel izleme ekleyin
Uygulamanızdaki belirli kodlarla ilişkili performans verilerini izlemek için özel kod izlemelerini kullanabilirsiniz.
Özel bir kod izlemeyle, uygulamanızın belirli bir görevi veya bir dizi görseli yükleme veya veritabanınızı sorgulama gibi görevleri tamamlamasının ne kadar sürdüğünü ölçebilirsiniz. Özel bir kod izlemenin 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 bir kod için izleme ekleme sayfasını ziyaret edin.
6. Adım : Uygulamanızı dağıtın ve ardından sonuçları inceleyin
Performans İzlemeyi 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 panelinden izleyebilirsiniz.
Sonraki adımlar
Web Codelab için Firebase Performance Monitoring ile uygulamalı deneyim edinin.
Performans İzleme tarafından otomatik olarak toplanan veriler hakkında daha fazla bilgi edinin:
- Uygulamanızda sayfa yüklemeye ilişkin veriler
- Uygulamanız tarafından yayınlanan HTTP/S ağ isteklerine ilişkin veriler
Performans verilerinizi Firebase konsolunda görüntüleyin, izleyin ve filtreleyin
Özel kod izlerini kullanarak uygulamanıza belirli görevler veya iş akışları için izleme ekleyin
Performans verilerini filtrelemek için öznitelikleri kullanın