Прежде чем начать
Если вы еще этого не сделали, посетите страницу «Добавить Firebase в свой проект JavaScript», чтобы узнать, как:
Создать проект Firebase
Зарегистрируйте свое веб-приложение в Firebase
Обратите внимание: когда вы добавляете Firebase в свое приложение, вы можете выполнить некоторые шаги, описанные ниже на этой странице (например, добавить SDK и инициализировать Firebase).
Шаг 1. Добавьте и инициализируйте Performance Monitoring
Если вы еще этого не сделали, установите Firebase JS SDK и инициализируйте Firebase .
Добавьте JS SDK Performance Monitoring и инициализируйте Performance Monitoring :
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. Добавьте первую библиотеку полифилов задержки ввода.
Чтобы измерить первую метрику задержки ввода , вам нужно добавить библиотеку полифилов для этой метрики. Инструкции по установке можно найти в документации библиотеки.
Добавление этой библиотеки полифилов не требуется, чтобы Performance Monitoring мог сообщать о других показателях веб-приложения.
Шаг 3. Создайте события производительности для отображения начальных данных.
Firebase начинает обрабатывать события, когда вы успешно добавляете SDK в свое приложение. Если вы все еще занимаетесь локальной разработкой, взаимодействуйте со своим приложением, чтобы генерировать события для первоначального сбора и обработки данных.
Обслуживание и просмотр вашего веб-приложения в локальной среде.
Создавайте события, загружая подстраницы вашего сайта, взаимодействуя с вашим приложением и/или запуская сетевые запросы. Обязательно держите вкладку браузера открытой не менее 10 секунд после загрузки страницы.
Перейдите на панель «Производительность» консоли Firebase . Через несколько минут вы должны увидеть исходные данные.
Если вы не видите исходные данные, ознакомьтесь с советами по устранению неполадок .
Шаг 4. (Необязательно) Просмотрите сообщения журнала о событиях производительности.
Откройте инструменты разработчика вашего браузера (например, вкладку «Сеть» для Chrome Dev Tools или «Сетевой монитор» для Firefox ).
Обновите веб-приложение в браузере.
Проверьте сообщения журнала на наличие сообщений об ошибках.
Через несколько секунд найдите сетевой вызов
firebaselogging.googleapis.com
в инструментах разработчика вашего браузера. Наличие этого сетевого вызова показывает, что браузер отправляет данные о производительности в Firebase.
Если ваше приложение не регистрирует события производительности, ознакомьтесь с советами по устранению неполадок .
Шаг 5. (Необязательно) Добавьте собственный мониторинг для конкретного кода.
Чтобы отслеживать данные о производительности, связанные с конкретным кодом в вашем приложении, вы можете использовать специальные трассировки кода .
С помощью пользовательской трассировки кода вы можете измерить, сколько времени требуется вашему приложению для выполнения определенной задачи или набора задач, таких как загрузка набора изображений или запрос к базе данных. Метрикой по умолчанию для пользовательской трассировки кода является ее продолжительность, но вы также можете добавить собственные метрики, такие как попадания в кэш и предупреждения памяти.
В своем коде вы определяете начало и конец пользовательской трассировки кода (и добавляете любые необходимые пользовательские метрики) с помощью API, предоставляемого пакетом SDK Performance Monitoring .
Посетите раздел «Добавить мониторинг для конкретного кода», чтобы узнать больше об этих функциях и о том, как добавить их в свое приложение.
Шаг 6. Разверните приложение и просмотрите результаты.
После проверки Performance Monitoring вы можете развернуть обновленную версию своего приложения для своих пользователей.
Вы можете отслеживать данные о производительности на панели «Производительность» консоли Firebase .
Следующие шаги
Получите практический опыт работы с Firebase Performance Monitoring for Web Codelab .
Узнайте больше о данных, автоматически собираемых с помощью Performance Monitoring :
- Данные для загрузки страниц в вашем приложении
- Данные для сетевых запросов HTTP/S, выдаваемых вашим приложением.
Просматривайте, отслеживайте и фильтруйте данные о производительности в консоли Firebase
Добавьте мониторинг конкретных задач или рабочих процессов в свое приложение, используя специальные трассировки кода.
Используйте атрибуты для фильтрации данных о производительности
Прежде чем начать
Если вы еще этого не сделали, посетите раздел «Добавить Firebase в свой проект JavaScript», чтобы узнать, как:
Создать проект Firebase
Зарегистрируйте свое веб-приложение в Firebase
Обратите внимание: когда вы добавляете Firebase в свое приложение, вы можете выполнить некоторые шаги, описанные ниже на этой странице (например, добавить SDK и инициализировать Firebase).
Шаг 1. Добавьте и инициализируйте Performance Monitoring
Установите Firebase JS SDK и инициализируйте Firebase , если вы еще этого не сделали.
Добавьте JS SDK Performance Monitoring и инициализируйте Performance Monitoring :
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. Добавьте первую библиотеку полифилов задержки ввода.
Чтобы измерить первую метрику задержки ввода , вам нужно добавить библиотеку полифилов для этой метрики. Инструкции по установке можно найти в документации библиотеки.
Добавление этой библиотеки полифилов не требуется для того, чтобы Performance Monitoring мог сообщать о других показателях веб-приложения.
Шаг 3. Создайте события производительности для отображения начальных данных.
Firebase начнет обрабатывать события, когда вы успешно добавите SDK в свое приложение. Если вы все еще разрабатываете локально, взаимодействуйте со своим приложением, чтобы генерировать события для первоначального сбора и обработки данных.
Обслуживание и просмотр вашего веб-приложения в локальной среде.
Создавайте события, загружая подстраницы вашего сайта, взаимодействуя с вашим приложением и/или запуская сетевые запросы. Обязательно держите вкладку браузера открытой не менее 10 секунд после загрузки страницы.
Перейдите на панель «Производительность» консоли Firebase . Через несколько минут вы должны увидеть исходные данные.
Если вы не видите исходные данные, ознакомьтесь с советами по устранению неполадок .
Шаг 4. (Необязательно) Просмотрите сообщения журнала о событиях производительности.
Откройте инструменты разработчика вашего браузера (например, вкладку «Сеть» для Chrome Dev Tools или «Сетевой монитор» для Firefox ).
Обновите веб-приложение в браузере.
Проверьте сообщения журнала на наличие сообщений об ошибках.
Через несколько секунд найдите сетевой вызов
firebaselogging.googleapis.com
в инструментах разработчика вашего браузера. Наличие этого сетевого вызова показывает, что браузер отправляет данные о производительности в Firebase.
Если ваше приложение не регистрирует события производительности, ознакомьтесь с советами по устранению неполадок .
Шаг 5. (Необязательно) Добавьте собственный мониторинг для конкретного кода.
Чтобы отслеживать данные о производительности, связанные с конкретным кодом в вашем приложении, вы можете использовать специальные трассировки кода .
С помощью пользовательской трассировки кода вы можете измерить, сколько времени требуется вашему приложению для выполнения определенной задачи или набора задач, таких как загрузка набора изображений или запрос к базе данных. Метрикой по умолчанию для пользовательской трассировки кода является ее продолжительность, но вы также можете добавить собственные метрики, такие как попадания в кэш и предупреждения памяти.
В своем коде вы определяете начало и конец пользовательской трассировки кода (и добавляете любые необходимые пользовательские метрики) с помощью API, предоставляемого пакетом SDK Performance Monitoring .
Посетите раздел «Добавить мониторинг для конкретного кода», чтобы узнать больше об этих функциях и о том, как добавить их в свое приложение.
Шаг 6. Разверните приложение и просмотрите результаты.
После проверки Performance Monitoring вы можете развернуть обновленную версию своего приложения для своих пользователей.
Вы можете отслеживать данные о производительности на панели «Производительность» консоли Firebase .
Следующие шаги
Получите практический опыт работы с Firebase Performance Monitoring for Web Codelab .
Узнайте больше о данных, автоматически собираемых с помощью Performance Monitoring :
- Данные для загрузки страниц в вашем приложении
- Данные для сетевых запросов HTTP/S, выданных вашим приложением.
Просматривайте, отслеживайте и фильтруйте данные о производительности в консоли Firebase
Добавьте мониторинг определенных задач или рабочих процессов в свое приложение, используя специальные трассировки кода.
Используйте атрибуты для фильтрации данных о производительности