Firebase Summit에서 발표된 모든 내용을 살펴보고 Firebase로 앱을 빠르게 개발하고 안심하고 앱을 실행하는 방법을 알아보세요. 자세히 알아보기

웹용 Performance Monitoring 시작하기

시작하기 전에

아직 수행하지 않았다면 JavaScript 프로젝트에 Firebase 추가 를 방문하여 다음을 수행하는 방법을 알아보세요.

  • Firebase 프로젝트 만들기

  • Firebase에 웹 앱 등록

앱에 Firebase를 추가할 때 이 페이지의 뒷부분에서 설명하는 단계 중 일부를 완료할 수 있습니다(예: SDK 추가 및 Firebase 초기화).

1단계 : 성능 모니터링 추가 및 초기화

  1. 아직 설치하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화 합니다.

  2. Performance Monitoring JS SDK를 추가하고 Performance Monitoring을 초기화합니다.

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단계 : 첫 번째 입력 지연 폴리필 라이브러리 추가

첫 번째 입력 지연 메트릭 을 측정하려면 이 메트릭에 대한 폴리필 라이브러리를 추가해야 합니다. 설치 지침은 라이브러리 설명서 를 참조하십시오.

Performance Monitoring이 다른 웹 앱 메트릭을 보고하는 데 이 폴리필 라이브러리를 추가할 필요는 없습니다.

3단계 : 초기 데이터 표시를 위한 성능 이벤트 생성

앱에 SDK를 성공적으로 추가하면 Firebase에서 이벤트 처리를 시작합니다. 아직 로컬에서 개발 중인 경우 앱과 상호 작용하여 초기 데이터 수집 및 처리를 위한 이벤트를 생성합니다.

  1. 로컬 환경에서 웹 앱을 제공하고 봅니다.

  2. 사이트의 하위 페이지를 로드하고, 앱과 상호 작용하고, 네트워크 요청을 트리거하여 이벤트를 생성합니다. 페이지가 로드된 후 최소 10초 동안 브라우저 탭을 열어 두십시오.

  3. Firebase 콘솔의 성능 대시보드 로 이동합니다. 몇 분 안에 초기 데이터가 표시되어야 합니다.

    초기 데이터가 표시되지 않으면 문제 해결 팁 을 검토하십시오.

4단계 : (선택 사항) 성능 이벤트에 대한 로그 메시지 보기

  1. 브라우저의 개발자 도구를 엽니다(예: Chrome 개발자 도구의 경우 네트워크 탭 또는 Firefox의 경우 네트워크 모니터 ).

  2. 브라우저에서 웹 앱을 새로 고칩니다.

  3. 오류 메시지가 있는지 로그 메시지를 확인하십시오.

  4. 몇 초 후 브라우저의 개발자 도구에서 firebaselogging.googleapis.com 에 대한 네트워크 호출을 찾습니다. 해당 네트워크 호출이 있으면 브라우저가 Firebase에 성능 데이터를 전송하고 있음을 나타냅니다.

앱이 성능 이벤트를 기록하지 않는 경우 문제 해결 팁 을 검토하세요.

5단계 : (선택 사항) 특정 코드에 대한 사용자 지정 모니터링 추가

앱의 특정 코드와 관련된 성능 데이터를 모니터링하기 위해 사용자 지정 코드 추적 을 계측할 수 있습니다.

사용자 지정 코드 추적을 사용하면 앱에서 이미지 집합 로드 또는 데이터베이스 쿼리와 같은 특정 작업 또는 작업 집합을 완료하는 데 걸리는 시간을 측정할 수 있습니다. 사용자 지정 코드 추적의 기본 메트릭은 기간이지만 캐시 적중 및 메모리 경고와 같은 사용자 지정 메트릭을 추가할 수도 있습니다.

코드에서 Performance Monitoring SDK에서 제공하는 API를 사용하여 사용자 지정 코드 추적의 시작과 끝을 정의하고 원하는 사용자 지정 메트릭을 추가합니다.

이러한 기능과 앱에 추가하는 방법에 대해 자세히 알아보려면 특정 코드에 대한 모니터링 추가를 방문하세요.

6단계 : 앱 배포 후 결과 검토

성능 모니터링을 검증한 후 업데이트된 버전의 앱을 사용자에게 배포할 수 있습니다.

Firebase 콘솔의 성능 대시보드 에서 성능 데이터를 모니터링할 수 있습니다.

다음 단계