Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

Если вы еще этого не сделали, посетите страницу Добавить Firebase в свой проект JavaScript, чтобы узнать, как:

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

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

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

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

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

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

Web version 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);

Web version 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 : Добавьте первую библиотеку полифилла задержки ввода.

Чтобы измерить первую метрику задержки ввода , нужно добавить библиотеку полифилла для этой метрики. Инструкции по установке см. в документации библиотеки.

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

Шаг 3. Создание событий производительности для отображения начальных данных.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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