Catch up on everthing we announced at this year's Firebase Summit. Learn more

Начните работу с мониторингом производительности в Интернете

Прежде чем вы начнете

Если вы уже не имеете, посетить Добавить Firebase в свой проект JavaScript , чтобы узнать , как:

  • Создать проект Firebase

  • Зарегистрируйте свое веб-приложение в Firebase

Обратите внимание: когда вы добавляете Firebase в свое приложение, вы можете выполнить некоторые из шагов, описанных ниже на этой странице (например, добавление SDK и инициализация Firebase).

Шаг 1: Добавление и инициализация мониторинга производительности

  1. Если вы еще не сделали, установить Firebase JS SDK и инициализировать Firebase .

  2. Добавьте JS SDK для мониторинга производительности и инициализируйте мониторинг производительности:

    Веб-версия 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);
    

    Веб-версия 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: Добавьте первый вход библиотеку задержки polyfill

Для измерения первого показателя задержки ввода , необходимо добавить библиотеку polyfill для этой метрики. Инструкции по установке см библиотеки документации .

Добавление этой библиотеки полифиллов не требуется для мониторинга производительности, чтобы сообщать о других показателях веб-приложения.

Шаг 3: Генерация события производительности для начального отображения данных

Firebase начинает обработку событий, когда вы успешно добавляете SDK в свое приложение. Если вы все еще разрабатываете локально, взаимодействуйте со своим приложением, чтобы сгенерировать события для первоначального сбора и обработки данных.

  1. Обслуживайте и просматривайте свое веб-приложение в локальной среде.

  2. Создавайте события, загружая подстраницы вашего сайта, взаимодействуя с вашим приложением и / или инициируя сетевые запросы. Убедитесь, что вкладка браузера открыта не менее 10 секунд после загрузки страницы.

  3. Перейти к приборной панели Performance консоли Firebase. Вы должны увидеть исходные данные в течение нескольких минут.

    Если вы не видите отображение ваших исходных данных, просмотрите советы по устранению неполадок .

Шаг 4: (Необязательно) Просмотр сообщения журнала для событий производительности

  1. Открыть инструменты разработчика вашего браузера (например, вкладка Chrome Dev Tools Network или в сетевой монитор для Firefox ).

  2. Обновите свое веб-приложение в браузере.

  3. Проверьте сообщения журнала на наличие сообщений об ошибках.

  4. Через несколько секунд, обратите внимание на сеть вызов firebaselogging.googleapis.com в инструментах разработчика Вашего браузера. Наличие этого сетевого вызова показывает, что браузер отправляет данные о производительности в Firebase.

Если ваше приложение не регистрирует события производительности, просмотрите советы по устранению неполадок .

Шаг 5: (Необязательно) Добавьте пользовательский мониторинг для конкретного кода

Для мониторинга данных о производительности , связанные с определенным кодом в вашем приложении, вы можете инструмент пользовательского кода следы .

С помощью настраиваемой трассировки кода вы можете измерить, сколько времени требуется вашему приложению для выполнения определенной задачи или набора задач, таких как загрузка набора изображений или запрос к базе данных. Метрикой по умолчанию для пользовательской трассировки кода является ее продолжительность, но вы также можете добавить пользовательские метрики, такие как попадания в кеш и предупреждения о памяти.

В своем коде вы определяете начало и конец пользовательской трассировки кода (и добавляете любые желаемые пользовательские метрики) с помощью API, предоставляемого SDK для мониторинга производительности.

Посещение Добавить мониторинг для конкретного кода , чтобы узнать больше об этих функциях и как добавить их к вашему приложению.

Шаг 6: Развертывание приложение затем результаты обзора

После того, как вы проверили мониторинг производительности, вы можете развернуть обновленную версию своего приложения для своих пользователей.

Вы можете отслеживать данные о производительности в приборной панели Performance консоли Firebase.

Следующие шаги