Başlamadan önce
Henüz yapmadıysanız aşağıdakileri nasıl yapacağınızı öğrenmek için JavaScript projenize Firebase ekleme başlıklı makaleyi inceleyin:
Firebase projesi oluşturma
Web uygulamanızı Firebase'e kaydetme
Firebase'i uygulamanıza eklediğinizde bu sayfada daha sonra açıklanan adımlardan bazılarını (ör. SDK'yı ekleme ve Firebase'i başlatma) tamamlayabileceğinizi unutmayın.
1. adım: Performance Monitoring değişkenini ekleyip başlatın
Henüz yapmadıysanız Firebase JS SDK'sını yükleyin ve Firebase'i başlatın.
Performance Monitoring JS SDK'sını ekleyin ve Performance Monitoring'yi 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
İlk giriş gecikmesi metriğini ölçmek için bu metrik için polyfill kitaplığını eklemeniz gerekir. Yükleme talimatları için kitaplığın dokümanlarına bakın.
Performance Monitoring'ün diğer web uygulaması metriklerini bildirmesi için bu polyfill kitaplığının eklenmesi gerekmez.
3. Adım: İlk veri görüntüleme için performans etkinlikleri oluşturun
Firebase, SDK'yı uygulamanıza başarıyla eklediğinizde etkinlikleri işlemeye başlar. Hâlâ yerel olarak geliştirme yapıyorsanız ilk veri toplama ve işleme için etkinlikler oluşturmak üzere uygulamanızla etkileşim kurun.
Web uygulamanızı yerel bir ortamda yayınlama ve görüntüleme.
Sitenizin alt sayfalarını yükleyerek, uygulamanızla etkileşime geçerek 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 gösterge tablosuna gidin. İlk verileriniz birkaç dakika içinde gösterilir.
İlk verilerinizin gösterilmediğini görürseniz sorun giderme ipuçlarını inceleyin.
4. adım: (İsteğe bağlı) Performans etkinlikleriyle ilgili günlük mesajlarını görüntüleme
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).
Tarayıcıda web uygulamanızı yenileyin.
Günlük mesajlarınızda hata mesajı olup olmadığını kontrol edin.
Birkaç saniye sonra, tarayıcınızın geliştirici araçlarında
firebaselogging.googleapis.com
adresine yapılan bir ağ çağrısı olup olmadığını kontrol edin. Bu ağ çağrısının varlığı, tarayıcının Firebase'e performans verileri gönderdiğini gösterir.
Uygulamanız performans etkinliklerini günlüğe kaydetmiyorsa sorun giderme ipuçlarını inceleyin.
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 özelliğiyle, uygulamanızın belirli bir görevi veya görev grubunu (ör. bir resim grubunu yükleme ya da veritabanınızı sorgulama) tamamlamasının ne kadar sürdüğünü ölçebilirsiniz. Özel kod izleme için varsayılan metrik, izlemenin süresidir ancak önbelleğe isabet ve bellek uyarıları gibi özel metrikler de ekleyebilirsiniz.
Kodunuzda, Performance Monitoring SDK'sı tarafından sağlanan API'yi kullanarak özel kod izinin başlangıç ve bitişini tanımlar (ve istediğiniz özel metrikleri eklersiniz).
Bu özellikler ve uygulamanıza nasıl eklenecekleri hakkında daha fazla bilgi edinmek için Belirli kod için izleme ekleme başlıklı makaleyi inceleyin.
6. adım: Uygulamanızı dağıtın ve ardından sonuçları inceleyin
Performance Monitoring'ü 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
Firebase Performance Monitoring for Web Codelab ile uygulamalı deneyim edinin.
Performance Monitoring tarafından otomatik olarak toplanan veriler hakkında daha fazla bilgi edinin:
- Uygulamanızda sayfa yükleme ile ilgili veriler
- Uygulamanız tarafından gönderilen HTTP/S ağ isteklerine ilişkin veriler
Firebase konsolunda performans verilerinizi görüntüleme, izleme ve filtreleme
Özel kod izlerini kullanarak uygulamanızdaki belirli görevler veya iş akışları için izleme ekleme