Zacznij korzystać z funkcji monitorowania wydajności w Internecie

Zanim zaczniesz

Jeśli nie masz jeszcze znaleźć Dodaj Firebase do projektu JavaScript , aby dowiedzieć się, jak:

  • Utwórz projekt Firebase

  • Zarejestruj swoją aplikację internetową w Firebase

Należy pamiętać, że podczas dodawania Firebase do aplikacji, można również wypełnić niektóre z kroków opisanych na tej stronie (na przykład dodanie Firebase SDK i inicjowanie Firebase ).

Krok 1: dodaj Monitorowanie wydajności i zainicjować Firebase

Dodaj pakiet SDK do monitorowania wydajności i zainicjuj Firebase w swojej aplikacji, korzystając z jednej z poniższych opcji. Rozważ następujące kwestie, które pomogą Ci wybrać spośród opcji (patrz poszczególne zakładki, aby uzyskać bardziej szczegółowe informacje):

  • Z CDN (standalone SDK) - Jeśli Monitorowanie wydajności jest produktem tylko Firebase w swojej aplikacji, ta opcja Obciążenia pojedynczy, lżejsza waga-SDK z CDN.

  • Z CDN (standard SDK) - W przypadku korzystania z innych produktów Firebase w swojej aplikacji, ta opcja Obciążenia Performance Monitoring SDK wraz z innymi Firebase bibliotek z CDN.

  • Od Hosting URL - Jeśli używasz Firebase Hosting, opcja ta oferuje wygodę do zarządzania konfiguracją Firebase podczas inicjalizacji Firebase.

  • Korzystanie bundlers Module - Jeśli używasz Bundler (jak Browserify lub WebPack), użyj tej opcji, aby importować poszczególne moduły, kiedy ich potrzebujesz.

Po dodaniu Performance Monitoring SDK, Firebase automatycznie rozpoczyna zbieranie danych dla Twojej aplikacji ładowania strony i HTTP / S żądania sieciowe .

Z CDN

Możesz skonfigurować częściowy import pakietu Firebase JavaScript SDK i ładować tylko te biblioteki Firebase, których potrzebujesz. Firebase przechowuje każdą bibliotekę pakietu Firebase JavaScript SDK w naszej globalnej sieci CDN (sieć dostarczania treści).

Aby dołączyć zestaw SDK monitorowania wydajności z sieci CDN, masz dwie możliwości:

  • Autonomiczny SDK - Monitorowanie wydajności jest produktem tylko Firebase że używasz w swojej aplikacji.
  • standardowy SDK - Używasz Monitorowanie wydajności wraz z innymi produktami Firebase w swojej aplikacji.

samodzielny pakiet SDK

Jeśli Performance Monitoring to jedyny produkt Firebase w Twojej aplikacji, użyj samodzielnego pakietu SDK Performance Monitoring (i zalecanego poniżej skryptu nagłówka), jeśli interesują Cię:

  • zmniejszenie rozmiaru pakietu SDK
  • opóźnianie inicjalizacji SDK do czasu załadowania strony

Aby dołączyć do aplikacji samodzielny pakiet SDK do monitorowania wydajności i opóźnić jego inicjalizację do momentu załadowania strony:

  1. Dodaj następujący skrypt do nagłówka pliku indeksu.
  2. Upewnij się, aby dodać swojej aplikacji Firebase obiektu konfiguracji projektu .
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

gdzie,

  • performance_standalone jest 'https://www.gstatic.com/firebasejs/8.8.0/firebase-performance-standalone.js'
  • firebaseConfig jest z aplikacji Firebase config przedmiot

Powyższy skrypt asynchronicznie wczytuje SDK samodzielny następnie inicjuje Firebase po okna onload pożary zdarzeń. Taktyka ta zmniejsza wpływ, jaki może mieć na SDK metryk strona załadowała ponieważ przeglądarka ma już zgłoszone do jego ładowania metryki kiedy zainicjować SDK.

standardowy pakiet SDK

Jeśli w swojej aplikacji używasz innych produktów Firebase (takich jak uwierzytelnianie lub Cloud Firestore, dołącz standardowy pakiet SDK do monitorowania wydajności).

Pamiętaj, że ten pakiet SDK wymaga dołączenia oddzielnego standardowego podstawowego pakietu SDK Firebase oraz zainicjowania Firebase i Monitorowania wydajności w osobnym skrypcie.

  1. Aby dołączyć Standard Performance Monitoring SDK, należy dodać następujące skrypty do dołu <body> tagu, ale przed użyciem jakichkolwiek usług Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-performance.js"></script>
    <body>
    
  2. Zainicjuj Firebase i Monitorowanie wydajności w swojej aplikacji:

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

Z hostujących adresów URL

Korzystając z Hostingu Firebase, możesz skonfigurować swoją aplikację tak, aby dynamicznie ładowała biblioteki Firebase JavaScript SDK z zarezerwowanych adresów URL. Dowiedz się więcej o dodaniu SDK poprzez zastrzeżone Hosting URL .

Dzięki tej opcji konfiguracji, po wdrożeniu do Firebase , aplikacja automatycznie pobiera obiekt konfiguracji Firebase z projektu Firebase do którego już wdrożony. Można wdrożyć ten sam codebase do wielu projektów Firebase, ale nie masz do śledzenia konfiguracji Firebase że używasz do firebase.initializeApp() .

  1. Aby dołączyć Monitorowanie wydajności SDK, należy dodać następujące skrypty do dołu <body> tagu, ale przed użyciem jakichkolwiek usług Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.8.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.8.0/firebase-performance.js"></script>
    </body>
    
  2. Zainicjuj Firebase i monitorowanie wydajności w swojej aplikacji (nie musisz dołączać obiektu konfiguracyjnego Firebase, gdy używasz zarezerwowanych adresów URL w Hostingu):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

Korzystanie z pakietu modułów

Możesz skonfigurować częściowy import pakietu Firebase JavaScript SDK i ładować tylko te produkty Firebase, których potrzebujesz. Jeśli używasz Bundler (jak Browserify lub WebPACK), można import poszczególne produkty Firebase kiedy ich potrzebujesz.

  1. Zainstalować firebase pakiet npm i zapisać go na dysku package.json pliku za pomocą polecenia:

    npm install --save firebase
  2. Aby dołączyć Monitorowanie wydajności SDK, import z Firebase moduły:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. Zainicjuj Firebase i Monitorowanie wydajności w swojej aplikacji:

    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
    // Initialize Performance Monitoring and get a reference to the service
    const perf = firebase.performance();
    

Krok 2: Dodaj pierwsze wejście bibliotekę opóźnienie PolyFill

Aby zmierzyć pierwsze opóźnienie wejścia metrykę , trzeba dodać bibliotekę PolyFill na to metryka. Instrukcje instalacji znajdują się biblioteki dokumentacji .

Dodanie tej biblioteki wypełnienia nie jest wymagane, aby funkcja monitorowania wydajności mogła raportować inne metryki aplikacji sieci Web.

Krok 3: Generowanie zdarzeń osiągi początkowym wyświetlaniem danych

Firebase rozpocznie przetwarzanie zdarzeń po pomyślnym dodaniu pakietu SDK do aplikacji. Jeśli nadal programujesz lokalnie, wejdź w interakcję z aplikacją, aby wygenerować zdarzenia do wstępnego gromadzenia i przetwarzania danych.

  1. Udostępniaj i wyświetlaj swoją aplikację internetową w środowisku lokalnym.

  2. Generuj zdarzenia, ładując podstrony Twojej witryny, wchodząc w interakcję z Twoją aplikacją i/lub wywołując żądania sieciowe. Upewnij się, że karta przeglądarki jest otwarta przez co najmniej 10 sekund po załadowaniu strony.

  3. Idź na desce rozdzielczej wydajności konsoli Firebase. Powinieneś zobaczyć swoje początkowe dane w ciągu kilku minut.

    Jeśli nie pojawi się ekran swojego wstępnych danych, przejrzeć wskazówki dotyczące rozwiązywania problemów .

Krok 4: (opcjonalnie) Przeglądanie wiadomości dziennika zdarzeń dla wydajności

  1. Otwórz narzędzia dla programistów w przeglądarce (na przykład, zakładka dla Chrome Dev Narzędzia sieciowe lub w Monitorze sieci dla Firefoksa ).

  2. Odśwież swoją aplikację internetową w przeglądarce.

  3. Sprawdź komunikaty dziennika pod kątem komunikatów o błędach.

  4. Po kilku sekundach, szukać połączenia sieciowego firebaselogging.googleapis.com w dostarczaniu narzędzi programistycznych w Twojej przeglądarce. Obecność tego połączenia sieciowego wskazuje, że przeglądarka wysyła dane o wydajności do Firebase.

Jeśli aplikacja nie jest rejestrowanie zdarzeń z wydajnością, przejrzeć wskazówki dotyczące rozwiązywania problemów .

Krok 5: (opcjonalnie) Dodaj własny monitoring dla kodu specyficznego

Monitorować dane dotyczące wydajności związanych z kodem określonego w swojej aplikacji, MOŻESZ przyrządów kod zwyczaj ślady .

Dzięki niestandardowemu śledzeniu kodu możesz zmierzyć, ile czasu zajmuje Twojej aplikacji wykonanie określonego zadania lub zestawu zadań, takich jak ładowanie zestawu obrazów lub wysyłanie zapytań do bazy danych. Domyślną metryką niestandardowego śledzenia kodu jest jego czas trwania, ale można również dodać niestandardowe metryki, takie jak trafienia w pamięci podręcznej i ostrzeżenia dotyczące pamięci.

W swoim kodzie definiujesz początek i koniec niestandardowego śledzenia kodu (i dodajesz dowolne żądane niestandardowe metryki) za pomocą interfejsu API dostarczanego przez zestaw SDK monitorowania wydajności.

Wizyta Dodaj monitorowania specyficzny kod , aby dowiedzieć się więcej na temat tych funkcji i jak je dodać do swojej aplikacji.

Krok 6: Rozmieszczanie app następnie powodowało

Po sprawdzeniu poprawności monitorowania wydajności możesz wdrożyć zaktualizowaną wersję aplikacji dla użytkowników.

Można monitorować dane dotyczące wydajności w desce rozdzielczej wydajności konsoli Firebase.

Następne kroki