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

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

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

Если вы уже не имеете, посетить Добавить 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.

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