Skip to main content
Version: Next

추가 디버깅 방법

이 페이지에서는 레거시 자바스크립트 디버깅 방법을 사용하는 방법을 설명한다. 새로운 React Native나 Expo 앱을 시작하는 경우, React Native DevTools를 사용하는 것을 권장한다.

Safari 개발자 도구 (직접 JSC 디버깅)​

JavaScriptCore (JSC)를 앱의 런타임으로 사용할 때, Safari를 통해 iOS 버전 앱을 디버깅할 수 있다.

  1. 물리적 디바이스만 가능: 설정 앱을 열고 Safari > 고급으로 이동한 후 "웹 검사기"가 켜져 있는지 확인한다.
  2. Mac에서 Safari를 열고 개발 메뉴를 활성화한다. Safari > 설정...에서 고급 탭을 선택한 후 "웹 개발자용 기능 표시"를 선택한다.
  3. 개발 메뉴에서 디바이스를 찾고, 하위 메뉴에서 "JSContext" 항목을 선택한다. 이렇게 하면 Safari의 웹 검사기가 열리며, Chrome DevTools와 유사한 콘솔과 소스 패널을 사용할 수 있다.

Safari 웹 검사기 열기

tip

소스 맵이 기본적으로 활성화되어 있지 않을 수 있지만, 이 가이드나 동영상을 따라 소스 맵을 활성화하고 소스 코드의 적절한 위치에 중단점을 설정할 수 있다.

tip

앱이 다시 로드될 때마다 새로운 JSContext가 생성된다. "JSContext에 대한 웹 검사기 자동 표시"를 선택하면 최신 JSContext를 수동으로 선택하지 않아도 된다.

원격 자바스크립트 디버깅 (사용 중단)​

warning

원격 자바스크립트 디버깅은 React Native 0.73 버전부터 사용 중단되었으며, 향후 릴리스에서는 완전히 제거될 예정이다.

원격 자바스크립트 디버깅은 외부 웹 브라우저(Chrome)를 앱에 연결하고, 자바스크립트 코드를 웹 페이지 내에서 실행한다. 이를 통해 일반 웹 앱처럼 Chrome의 디버거를 사용할 수 있다. 하지만 브라우저 환경은 상당히 다를 수 있으며, 이 방식으로 디버깅할 때 모든 React Native 모듈이 정상적으로 동작하지 않을 수 있다.

설정​

React Native 0.73부터는 원격 JavaScript 디버깅을 사용하려면 NativeDevSettings 모듈을 통해 수동으로 활성화해야 한다.

js
import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';

function MyApp() {
  // 이 함수를 개발 전용 버튼이나 useEffect 호출에 할당
  const connectToRemoteDebugger = () => {
    NativeDevSettings.setIsDebuggingRemotely(true);
  };
}

NativeDevSettings.setIsDebuggingRemotely(true)를 호출하면 http://localhost:8081/debugger-ui에서 새로운 탭이 열린다.

이 페이지에서 Chrome DevTools를 열 수 있는 방법은 다음과 같다:

  • View > Developer > Developer Tools
  • ⌥ Option + Cmd ⌘ + I (macOS) / Ctrl + Shift + I (Windows와 Linux)

Console과 Sources 패널을 통해 React Native 코드를 검사할 수 있다.

Chrome의 원격 디버거 윈도우

info

원격 JavaScript 디버깅을 사용할 때는 Chrome의 웹 버전 React DevTools가 React Native와 호환되지 않는다. React DevTools를 사용하려면 React Native DevTools 가이드를 참고하여 통합 디버거에서 사용하는 방법을 확인하라.

note

안드로이드에서 디버거와 디바이스 간 시간이 어긋나면 애니메이션과 이벤트 동작이 제대로 작동하지 않을 수 있다. 이 문제는 adb shell "date `date +%m%d%H%M%Y.%S%3N`" 명령어를 실행하여 해결할 수 있다. 물리적 디바이스를 사용 중이라면 루트 접근 권한이 필요하다.

물리적 기기에서 디버깅하기​

info

Expo CLI를 사용 중이라면, 이미 설정이 완료되어 있다.

USB로 연결된 Android 5.0 이상 기기에서는 adb 커맨드라인 도구를 사용해 기기에서 컴퓨터로 포트 포워딩을 설정할 수 있다:

sh
adb reverse tcp:8081 tcp:8081
note

문제가 발생한다면, Chrome 확장 프로그램 중 하나가 디버거와 예상치 못한 방식으로 상호작용할 가능성이 있다. 모든 확장 프로그램을 비활성화한 후, 하나씩 다시 활성화하며 문제를 일으키는 확장 프로그램을 찾아본다.