C/C++ WebAssembly 디버그

Sofia Emelianova
Sofia Emelianova
GitHub

WebAssembly를 사용하면 웹에서 C/C++ 코드를 기본 속도에 가깝게 그리고 자바스크립트와 함께 실행할 수 있습니다. 이 문서에서는 Chrome DevTools를 설정하고 사용하여 이러한 애플리케이션을 더 효과적으로 디버그하는 방법을 보여줍니다.

DevTools를 설정하면 다음 작업을 할 수 있습니다.

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

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

  • 원본 소스 파일의 변수 위로 마우스를 가져가 변수 값을 확인합니다.
  • 호출 스택의 함수 이름과 범위의 변수를 이해합니다.
  • 복잡하게 중첩된 속성과 복잡한 객체를 Console에 출력합니다.
  • 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. 코드를 다시 실행합니다. 중단점이 있는 줄 앞에서 실행이 일시중지됩니다.

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

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

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

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

호출 스택의 기본 함수입니다.

  • 소스 > 범위를 지정하고 로컬 및 전역 변수와 변수의 유형, 값을 확인합니다.

로컬 변수와 그 값이 표시된 범위 창

  • 콘솔에서 범위에서 이동하기 어려운 출력 변수 및 객체는 다음과 같습니다.

    • 깊이 중첩된 변수(예: 큰 배열의 색인이 생성된 항목)
    • 포인터 (->)로 액세스할 수 있는 객체를 포함한 복잡한 객체 펼쳐서 확인하세요.

콘솔에서 확장된 중첩 변수 및 복잡한 객체

  • 소스 > 범위에서 메모리. 아이콘을 클릭하여 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 지원 (DWARF) 확장 프로그램을 찾아 세부정보 >를 클릭합니다. 확장 프로그램 옵션.
  2. 이전 파일 경로와 새 파일 경로를 지정합니다.

이전 및 새 파일 경로를 지정했습니다.

자세히 알아보기

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