퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 스크립팅과 데이터
  4. 디버깅[Debugging]

디버깅[Debugging]

이 가이드는 퓨즈와 함께 사용할 JavaScript 디버거를 설정하는 방법을 설명합니다. 프리뷰를 실행하거나 일반 빌드를 실행할 때 V8 JavaScript 엔진을 사용하는 모든 대상을 디버깅 할 수 있습니다. V8을 사용하지 않는 iOS도 iOS 8 이상을 사용하는 경우 디버깅 할 수 있지만 디버깅 절차는 약간 다릅니다.

로컬 프리뷰, DotNet 및 Android (V8)

이 작업을 수행하는 방법을 보여주는 비디오 자습서를 보려면 여기를 클릭하십시오.

V8 자바스크립트 엔진을 사용하는 타겟은 Android, DotNet(로컬 프리뷰 포함), OS X 및 Windows, OS X의 CMake 및 Windows의 MSVC를 포함합니다.

퓨즈는 V8 자바스크립트 엔진과 디버거 프로토콜을 사용합니다. ‘-DDEBUG_V8’을 사용하여 빌드된 퓨즈 앱은 로컬 소켓(포트 5858)의 연결을 자동으로 수신합니다. V8 디버거 프로토콜을 사용하는 모든 디버거가 원칙적으로 작동해야하지만 OS X 및 Windows에서 가능한 Visual Studio Code를 사용하는 것이 좋습니다.

설정

  • Visual Studio Code를 다운로드하여 설치하십시오.
  • (Android에만 해당) 기기의 포트 5858을 호스트로 전달합니다. 이것은 퓨즈와 함께 제공되는 adb를 사용하여 수행할 수 있으며 uno adb를 사용하여 호출할 수 있습니다. 표준 퓨즈 설치 및 단일 안드로이드 장치가 연결된 상태에서 터미널 또는 명령 프롬프트에서 다음을 실행하십시오.
    1
    uno adb forward tcp:5858 tcp:5858

    장치를 다시 연결할 때마다 이 명령을 다시 실행해야 할 수 있습니다. 예를 들어 Android에서 완료한 후 다른 대상을 디버그하려면 다음 명령문을 사용하여 포워딩을 삭제해야 합니다. (uno adb forward –remove-all) 그렇지 않으면 디버거 포트가 사용됩니다.

  • Visual Studio Code에서 프로젝트 폴더를 엽니다.
  • 디버그 아이콘을 누릅니다. 녹색 삼각형(“play” 아이콘)을 클릭하고 디버그 환경으로 Node.js를 선택하십시오.
  • 녹색 삼각형 옆에 있는 드롭다운 목록에서 Attach를 선택하십시오.

디버거 시작하기

  • ‘debugger;’를 추가하여 자바스크립트 코드에 중단점을 설정하십시오. 예를 들어, 다음과 같이 자바스크립트 코드의 맨 처음에 넣으십시오.
    1
    2
    3
    4
    <JavaScript>
      debugger;
      ... more code
    </JavaScript>

    또한 어떤 이벤트가 발생했을 때 중단하는 것이 유용할 수 있습니다:

    1
    2
    3
    4
    function someEvent() {
      debugger;
      ... more code
    }
  • ‘-DDEBUG_V8’을 사용하여 앱을 빌드하고 실행하십시오. 예를 들면
    1
    fuse preview . -DDEBUG_V8

    현재 작업 디렉토리에서 로컬로 프로젝트를 프리뷰 하거나

    1
    uno build --target=Android --run -DDEBUG_V8

    Android에서 빌드하고 실행할 수 있습니다.

  • 앱이 실행 중일 때 Visual Studio Code의 녹색 삼각형을 눌러 디버거를 연결하십시오. Windows에서 방화벽이 앱에 대한 액세스 권한을 요청하면 허용합니다.
  • 이전에 추가된 중단 점을 누르면 JS 코드가 일시 중지되고 Visual Studio Code가 코드의 위치를 표시하고 로컬 변수를 보고 코드에 들어가며 계속 진행할 수 있습니다.

iOS

이 작업을 수행하는 방법을 보여주는 비디오 자습서를 보려면 여기를 클릭하십시오.

설정

  • 디바이스가 iOS 8 이상을 사용하고 있는지 확인하십시오.
  • 디바이스에서 Safari Web Inspector를 사용하도록 설정합니다. 이것은 ‘Safari/Advanced/Web Inspector’의 설정 앱에서 수행됩니다.
  • 호스트 컴퓨터의 Safari에서 개발 메뉴를 활성화하십시오. 이 작업은 Safari의 환경 설정 메뉴에서 ‘Advanced/Show Develop menu in menu bar’에서 수행됩니다.

디버거 시작하기

  • 디바이스에서 프로젝트를 빌드하고 실행하십시오.
  • 호스트 컴퓨터에서 Safari를 열고 메뉴 표시줄에서 개발 메뉴를 클릭하십시오. 디바이스 뒤에 이름이 지정된 하위 메뉴가 있어야 하며 여기에서 JSContext를 클릭할 수 있습니다. 그러면 앱의 JavaScript 코드를 보고 디버깅 할 수 있는 Web Inspector 인스턴스가 열립니다.
Was this article helpful to you? Yes No

How can we help?