C/C++ WebAssembly 디버그

Sofia Emelianova
Sofia Emelianova
GitHub

WebAssembly를 통해 예를 들어 웹에서 C/C++ 코드를 네이티브에 가까운 속도로 자바스크립트와 함께 실행할 수 있습니다. 이 문서에서는 Chrome DevTools를 설정하고 사용하여 이러한 애플리케이션을 더 잘 디버그하는 방법을 보여줍니다.

DevTools를 설정하고 나면 다음을 수행할 수 있습니다.

  • Sources(소스) > Editor(편집기)에서 원본 코드를 검사합니다.
  • 코드 줄 중단점으로 실행을 일시중지하고 컴파일된 .wasm 바이너리 파일이 아닌 원본 C/C++ 소스 코드를 단계별로 진행합니다.

일시중지 상태에서 다음 작업을 할 수 있습니다.

  • 원본 소스 파일의 변수 위로 마우스를 가져가서 값을 확인합니다.
  • 호출 스택의 함수 이름과 범위의 변수를 이해합니다.
  • 깊이 중첩된 속성과 복잡한 객체를 콘솔에 출력합니다.
  • Memory Inspector로 객체 메모리를 검사합니다.

설정

DevTools에서 C/C++ WebAssembly 디버깅을 사용 설정하려면 다음 단계를 따르세요.

  1. DWARF 디버그 정보를 포함하여 애플리케이션을 컴파일합니다. 최신 Emscripten 컴파일러를 실행하고 -g 플래그를 전달합니다. 예를 들면 다음과 같습니다.

    emcc -g source.cc -o app.html

    자세한 내용은 디버그 정보를 사용하여 프로젝트 빌드를 참고하세요.

  2. C/C++ DevTools 지원 (DWARF) Chrome 확장 프로그램을 설치합니다.

디버그

DevTools를 설정한 상태에서 코드를 디버그합니다.

  1. DevTools를 열어 웹사이트를 검사합니다. 이 튜토리얼에서는 필수 -g 플래그로 컴파일된 데모 페이지에서 실행해 볼 수 있습니다.
  2. 원하는 경우 더 쉽게 탐색할 수 있도록 작성한 파일을 그룹화합니다. 소스에서 점 3개로 된 메뉴입니다. > 페이지 > 체크박스입니다. > 작성/배포됨을 기준으로 그룹화 시험용입니다.를 선택합니다.
  3. 파일 트리에서 원본 소스 파일을 선택합니다. 이 경우 mandelbrot.cc입니다.

  4. 코드 줄 중단점을 설정하려면 편집기 왼쪽 열에서 줄 번호를 클릭합니다(예: 38번 줄).

    38번 줄에 설정된 코드 줄 중단점

  5. 코드를 다시 실행합니다. 중단점이 있는 줄 앞에서 실행이 일시 중지됩니다.

일시중지된 상태에서 다음을 시도해 보세요.

  • 소스 > 편집기에서 변수 위로 마우스를 가져가면 도움말에 값이 표시됩니다.

도움말에 표시되는 변수 값입니다.

  • 소스 > 호출 스택에서 소스에 있는 함수 이름을 확인합니다.

호출 스택의 main 함수

  • 소스 > 범위에서 로컬 및 전역 변수와 그 유형 및 값을 확인합니다.

로컬 변수 및 해당 값이 표시된 Scope 창

  • 콘솔에서는 범위로 이동하기 어려운 출력 변수 및 객체가 표시됩니다.

    • 깊이 중첩된 변수(예: 큰 배열에서 항목의 색인을 생성하는 경우)
    • 포인터로 액세스할 수 있는 객체 (->)를 비롯한 복잡한 객체. 이를 확장하여 검사하세요.

Console에서 확장된 중첩 변수 및 복합 객체

  • Sources > Scope에서 메모리. 아이콘을 클릭하여 Memory Inspector를 열고 객체 메모리의 원시 바이트를 검사합니다. 자세한 내용은 WebAssembly 메모리 검사를 참고하세요.

변수의 메모리 검사

프로필 실적

DevTools를 설정하고 열면 Chrome에서 실행하는 코드가 최적화되지 않습니다. 더 나은 디버깅 환경을 제공하기 위해 계층화됩니다.

이 경우 코드에서 console.time()와 performance.now()를 사용하여 성능을 프로파일링할 수 없습니다. 대신 Performance 패널을 사용하여 프로파일링하세요.

또는 DevTools를 열지 않고 프로파일링 코드를 실행한 다음 이 코드를 열어 콘솔에서 메시지를 검사할 수 있습니다.

디버그 정보 분리

로드 속도를 높이면서 디버깅 환경을 개선하려면 디버그 정보를 별도의 .wasm 파일로 분할하면 됩니다. 자세한 내용은 더 빠르게 WebAssembly 디버깅을 참고하세요.

이 파일을 로컬에 보관하거나 별도의 서버에서 호스팅할 수 있습니다. Emscripten을 사용하여 이 작업을 실행하려면 -gseparate-dwarf=<filename> 플래그를 전달하고 파일 경로를 지정합니다.

emcc -g source.cc -o app.html \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]

다양한 머신에서 빌드 및 디버그

Chrome을 실행하는 컴퓨터와 다른 운영체제 (컨테이너, VM 또는 원격 서버)를 사용하는 컴퓨터에서 빌드하는 경우 디버그 파일 경로를 수동으로 매핑해야 할 수 있습니다.

예를 들어 프로젝트가 로컬 C:\src\project에 있지만 경로가 /mnt/c/src/project인 Docker 컨테이너에서 빌드된 경우 다음을 수행합니다.

  1. chrome://extensions/로 이동하여 C/C++ DevTools Support (DWARF) 확장 프로그램을 찾은 다음 Details > Extension options를 클릭합니다.
  2. 이전 파일 경로와 새 파일 경로를 지정합니다.

지정된 이전 파일 경로와 새 파일 경로

자세히 알아보기

WebAssembly 디버깅에 대한 자세한 내용은 Chrome DevTools 엔지니어링 블로그를 확인하세요.