[RN] React Native Android Studio 디버깅 이용방법: Logcat, Profiler, App Inspection

해당 글에서는 React-native 환경에서 Android Studio의 디버깅 툴(Locat, Profiler, App Inspection)을 사용하는 방법에 대해 알아봅니다.

1) Android Studio 디버깅 주요 기능

---

 

1. Logcat

---

💡 Logcat

- 안드로이드 스튜디오에서 제공하는 디버깅 도구이며, 애플리케이션에서 발생하는 로그 및 디바이스 로그 메시지를 표시해 줍니다

- 이를 통해 로그 출력을 모니터링하고 필터링하여 앱을 디버깅하기 쉽게 도와줍니다.

Logcat을 이용하여 로그 보기  |  Android 스튜디오  |  Android Developers

 
 

2. Profiler

---

💡 Profiler

- 안드로이드 스튜디오의 성능 분석 도구이며, 앱의 ‘CPU’, ‘메모리’, ‘배터리 사용량’ 등 다양한 측면에서 성능을 모니터링하고 분석할 수 있습니다.

- 이를 통해 앱의 성능 문제를 식별하고 최적화 할 수 있습니다.

Android 프로파일러  |  Android 스튜디오  |  Android Developers

 
 
 

3. App Inspection

---

💡 App Inspection

- 애플리케이션의 성능과 동작을 분석하는 도구이며, 애플리케이션의 데이터베이스, 네트워크, 백그라운드 작업 등을 모니터링하고 성능 문제를 식별할 수 있습니다.

- 이를 통해 애플리케이션의 레이아웃과 리소스 파일을 시각적으로 검사하고 수정할 수도 있습니다.

Database Inspector로 데이터베이스 디버그  |  Android 스튜디오  |  Android Developers

Network Inspector로 네트워크 트래픽 검사  |  Android 스튜디오  |  Android Developers

 
 
 
 

2) 기본 설정 과정

---

 

1. Andriod Studio를 설치합니다.

---

Download Android Studio & App Tools - Android Developers

 
 

💡 [참고] MacOS의 경우는 homebrew를 통해서 설치가 가능합니다

# homebrew update 및 안드로이드 스튜디오 설치
$ brew update & brew install --cask andriod-studio

 
 

💡 [참고] Homebrew 명령에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.

[개발팁/명령어] Homebrew 명령어 관리(Command Line)

 
 
 

2.  local.properties를 설정합니다.

---

💡 android 폴더 바로 아래에 local.properties 파일을 생성하여 아래 코드와 같이 구성합니다.

💡코드는 ’lee’라고 작성한 해당하는 부분을 각각 환경에 맞추어 구성하시면 됩니다

sdk.dir=/Users/lee/Library/Android/sdk

 
 
 

💡 [참고] 구성한 소스코드의 폴더에 들어가보면 Andriod의 SDK를 확인할 수 있습니다.

 
 

[ 더 알아보기 ]

💡 local.properties를 구성해야 하는 이유는 뭘까?

- 프로젝트의 루트 디렉토리에 위치한 파일입니다. 이 파일은 주로 개발 환경에 대한 구성을 저장하는 데 사용됩니다.
예를 들어, SDK 경로, 디버그 키, API 키 등을 설정할 수 있습니다. 이 파일은 보안상의 이유로 버전 관리 시스템에 포함되지 않아야 합니다. 프로젝트를 공유하거나 협업하는 경우, local.properties 파일의 존재와 중요성을 이해하고 적절한 설정을 유지하는 것이 중요합니다.

 

💡 또한 아래와 같이 디바이스를 연결해 둔 상태여도 Andriod Studio에서 연결을 못하는 상황입니다.

 
 

3. Android Studio에서 구성한 react-native 프로젝트 중 ‘android’ 폴더를 엽니다.

---

 
 
 

4. 프로젝트 내에 연결된 디바이스를 확인합니다.

---

 
 

3) Logcat 수행과정

---

💡 Logcat 수행과정

- 해당 Locat의 과정은 디바이스를 연결하고 Metro Bundler로 빌드가 된 상태라면 즉시 상세한 로그를 확인할 수 있습니다.

 
 

1. View - Tool Windows - Logcat 탭을 눌러서 Logcat을 확인합니다.

---

 

 
 
 
 

2. Logcat 탭에서 상세한 로그가 확인이 가능합니다.

---

 

 
 

3. ReactNative 관련 메시지만 보고 싶으면 “ReactNativeJS” 필터를 걸어주면 콘솔 출력에 대한 로그만 확인이 가능합니다

---

 
 

4) Profiler 수행과정

---

 

1. 터미널에서 React-native Metro를 수행시킵니다.

---

 

2. Android Studio에서 Run - Profile... 을 누릅니다

---

 
 

3. app - Run을 선택하여 빌드를 하면 Profiler가 활성화 됩니다

---

 
 

4. View - Tool Windows - Profiler 탭을 열어둡니다.

---

 
 
 

[참고] 만약에 No debuggable processes detected 상태라면 해결방법

---

💡 현재 켜져있는 ‘앱을 종료하고 다시 앱을 키면’ 해당 문제가 해결되는것을 확인할 수 있습니다.
💡 또한, 종종 profile 빌드가 켜지지 않은 상태로 있을수 있으니 항상 켜져있는지 확인합니다.

 
 
 

5. 탭 내에서 자동으로 연결되거나 혹은 + 기호를 눌러서 연결된 디바이스로 확인을 합니다.

---

 
 
 

6. 현재 수행중인 앱에 대한 CPU, MEMORY, ENERGY 값을 실시간으로 확인할 수 있습니다.

---

 
 
 
 

5) App Inspection 수행과정

---

 

1. 터미널에서 React-native Metro를 수행시킵니다.

---

 

 
 

2. Android Studio에서 Run - Profile... 을 누릅니다

---

 
 

3. app - Run을 선택하여 빌드를 하면 App Inspection가 활성화 됩니다

---

 
 
 

4. View - Tool Windows - App Inspection 탭을 열어둡니다.

---

 
 

[참고] 만약에 No debuggable processes detected 상태라면 해결방법

---

💡 현재 켜져있는 앱을 종료하고 다시 앱을 키면 해당 문제가 해결되는것을 확인할 수 있습니다.
💡 또한, 종종 profile 빌드가 켜지지 않은 상태로 있을수 있으니 항상 켜져있는지 확인합니다.

 
 
 

5. 현재 수행중인 앱에 대한 Database Inspector, Network Inspector, Background Task Inspector를 확인할 수 있습니다

---

 
 
 

 

99) 참고 : 오류노트

---

1. Unable to determine application id: cohttp://m.android.tools.idea.run.ApkProvisionException

---

Unable to determine application id: com.android.tools.idea.run.ApkProvisionException: Error loading build artifacts from: /Users/lee/Desktop/workspace/xxxx/xxxx/android/app/build/intermediates/apk_ide_redirect_file/debug/redirect.txt

 

💡 해결방법 :Clean Project, Rebuild Project, Invalidate Caches..를 수행합니다.를 수행합니다.

 

💡 Build - Clean Project 를 수행합니다.

 

 

💡 Build - Rebuild Project를 수행합니다.

 

 

💡 File - Invalidate Caches.. 를 수행합니다. 

 

 
오늘도 감사합니다. 😀