내 FlutterFlow 앱의 성능을 어떻게 디버깅할 수 있나요?

1단계: 퍼포먼스 프로파일링을 위한 플러터 DevTools 설정

첫 번째 단계는 플러터 DevTools를 설정하는 것입니다. 이는 플러터의 성능 및 디버깅 도구 모음입니다. 아래 명령어를 터미널에서 실행하여 활성화해야합니다:

flutter pub global activate devtools

이를 활성화한 후, 다음 명령어를 사용하여 DevTools를 시작할 수 있습니다:

flutter pub global run devtools

이렇게 하면 링크가 제공됩니다. 이 링크를 기록하고, 플러터 애플리케이션을 DevTools에 연결하는 데 사용하세요.

2단계: 당신의 앱을 DevTools에 연결

성능을 검사하려면, FlutterFlow 앱을 DevTools에 연결해야 합니다. 플러터 run 또는 attach 명령어와 --observatory-port 옵션을 사용하여 observatory가 수신할 특정 포트를 지정해야 합니다:

flutter run --observatory-port=9200

또는

flutter attach --observatory-port=9200

아래와 같이 보이는 라인을 출력에서 확인할 수 있습니다:

An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:49275/7GsCgXoh_JM=/

이 URL은 당신의 Observatory URL입니다.

이제, DevTools를 시작했을 때 나타난 DevTools URL로 이동하세요. 여기에는 "Connect"라고 쓰여진 텍스트 상자가 있습니다. 이 텍스트 상자에 Observatory URL을 입력하고 "Connect"를 클릭하세요.

3단계: 프로파일링을 위해 성능 페이지 사용

FlutterFlow 앱을 DevTools에 연결하면 "Performance" 페이지로 이동하세요. DevTools 창 상단의 바에서 이를 선택하세요. 성능 페이지는 애플리케이션의 프레임 렌더링 타임라인과 프레임을 렌더링 하는데 필요한 CPU와 GPU 작업을 심도있게 검사할 수 있는 UI를 포함하고 있습니다.

4단계: 성능 프로필 기록

"Record" 버튼을 클릭하여 성능 프로필 기록을 시작하세요. 이제 디바이스/에뮬레이터에서 애플리케이션과 상호 작용하세요. 이렇게 하면 DevTools가 성능 정보를 기록합니다. 이를 완료한 후에는 "Stop" 버튼을 클릭하세요.

5단계: 성능 프로필 분석

기록한 후에는 CPU, GPU 등 여러 성능의 타임라인을 볼 수 있습니다. 성능의 어떤 부분이 원래보다 시간이 오래 걸리는지 이들 타임라인을 분석하세요.

각 프레임이 렌더링하는 데 시간이 얼마나 걸렸는지 확인하기 위해 각 프레임을 조사할 수 도 있습니다. '이벤트 상세' 섹션에서 더 자세한 데이터를 보려면 특정 프레임을 클릭하세요.

6단계: 병목 현상 식별

평소보다 오래 걸린 작업을 찾아보세요. 렌더링하는 데 시간이 오래 걸린 프레임이나 오랫동안 지속되는 CPU 작업을 찾아보세요. 이를 분석하면 FlutterFlow 앱에서 성능이 느려지는 영역과 병목 현상을 식별하는 데 도움이 됩니다.

7단계: 성능 문제 해결

성능 병목을 일으키는 앱의 부분을 확인한 후에는, 성능을 최적화하는 데 아주 좋은 경험을 적용할 수 있습니다.

FlutterFlow 애플리케이션을 점진적으로 최적화해보세요, 각 변경 사항마다 성능을 확인하여 앞으로 나아가고 있는지 확인하세요.

8단계: 다시 테스트

개선 후에는 다른 성능 프로파일을 기록하여 조정 사항이 성능을 개선했는지 확인하세요.

9단계: 반복

당신의 앱의 성능에 만족할 때까지 이 과정을 반복하세요. 프로파일링은 문제를 식별하고, 개선하고, 그 영향을 확인하는 대화식이며 반복적인 과정입니다.